diantou/src_custom/spicdecisionsupportcenter/minxisoptions.js

import echarts from 'echarts'
export default {
  name: 'minxisoptions',
  computed: {
    getValues() {
      return (arr) => {
        const values = []
        const names = []
        if (arr.length > 0) {
          const arle = Object.keys(arr[0]).filter((itcv) => itcv !== 'name')
          arle.forEach((itcs) => {
            values.push([])
          })

          arr.forEach((iybv) => {
            for (const key in iybv) {
              if (iybv?.name) {
                if (key === 'name') {
                  names.push(iybv[key])
                } else {
                  const fdex = arle.findIndex((itcg) => itcg === key)
                  values[fdex].push(iybv[key])
                }
              }
            }
          })
        }

        return { names, values }
      }
    },
  },
  data() {
    return {
      chartOne: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },

        legend: {
          show: true,
        },
        xAxis: {
          type: 'category',
          data: [],
          axisLine: {
            lineStyle: {
              color: 'rgba(0,0,0,0.6)',
            },
          },
          axisLabel: {
            show: true,
            interval: 0,
            rotate: 50,
            inside: false,
            margin: 6,
            formatter: (val) => {
              if (val.length > 5) {
                return val.split('').splice(0, 5).join('') + '...'
              } else {
                return val
              }
            },
          },
        },
        grid: {
          left: 50,
          right: 30,
          bottom: 70,
          top: 30,
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(0,0,0,0.1)',
            },
          },
          axisLabel: {
            textStyle: {
              fontFamily: 'Microsoft YaHei',
              // color: '#ccc',
            },
          },
        },
        series: [],
      },
      chartTwo: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        legend: {
          show: true,
        },
        grid: {
          left: 20,
          right: 20,
          bottom: 30,
          top: 30,
          containLabel: true,
        },

        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [],
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(0,0,0,0.1)',
            },
          },
          axisLabel: {
            textStyle: {
              fontFamily: 'Microsoft YaHei',
              // color: '#ccc',
            },
          },
        },
        series: [],
      },
      chartThree: {
        color: ['#bb7ec4', '#ffb74a', '#ff4a55', '#54c5eb', '#8675ff', '#dce0fa'],
        textStyle: {
          color: '#8a8a8a',
          fontSize: 13,
        },
        tooltip: {
          trigger: 'item',
          show: false,
        },
        legend: {
          orient: 'vertical',
          right: '150px',
          icon: 'circle',
          top: 50,
          textStyle: {
            color: '#8a8a8a',
            lineHeight: 10,
          },
        },
        series: [],
      },
      chartFour: {
        legend: {
          show: false,
        },

        xAxis: {
          type: 'category',
          data: [],
          axisLine: {
            lineStyle: {
              color: 'rgba(0,0,0,0.6)',
            },
          },
          axisLabel: {
            show: true,
            interval: 0,
            rotate: 0,
            inside: false,
            margin: 6,
            formatter: (val) => {
              if (val.length > 5) {
                return val.split('').splice(0, 5).join('') + '...'
              } else {
                return val
              }
            },
          },
        },
        grid: {
          left: 50,
          right: 30,
          bottom: 50,
          top: 30,
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(0,0,0,0.1)',
            },
          },
          axisLabel: {
            textStyle: {
              fontFamily: 'Microsoft YaHei',
              // color: '#ccc',
            },
          },
        },
        series: [],
      },
      chartFive: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },

        legend: {
          show: true,
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisLine: {
              lineStyle: {
                color: 'rgba(0,0,0,0.6)',
              },
            },
            axisLabel: {
              show: true,
              interval: 0,
              rotate: 0,
              inside: false,
              margin: 6,
              formatter: (val) => {
                if (val.length > 5) {
                  return val.split('').splice(0, 5).join('') + '...'
                } else {
                  return val
                }
              },
            },
          },
          {
            type: 'value',
            max: 0,
            show: false,
          },
        ],
        grid: {
          left: 50,
          right: 30,
          bottom: 50,
          top: 30,
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(0,0,0,0.1)',
            },
          },
          axisLabel: {
            textStyle: {
              fontFamily: 'Microsoft YaHei',
              // color: '#ccc',
            },
          },
        },
        series: [],
      },
      chartSex: {
        color: ['#ff7f5c', '#163bf5', '#f14249', '#2fc666', '#ffd72c'],
        tooltip: {
          trigger: 'item',
        },

        legend: {
          show: true,
          orient: 'vertical',
          right: '40%',
          icon: 'circle',
          top: '50%',
          textStyle: {
            color: '#000',
            rich: {
              a: {
                width: 50,
                padding: [0, 14, 0, 0],
              },
              b: {
                align: 'left',
                width: 40,
                padding: [0, 10, 0, 0],
              },
              c: {
                align: 'left',
              },
            },
          },
        },
        series: [],
      },
      chartSeven: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },

        legend: {
          show: true,
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisLine: {
              lineStyle: {
                color: 'rgba(0,0,0,0.6)',
              },
            },
            axisLabel: {
              show: true,
              interval: 0,
              rotate: 0,
              inside: false,
              margin: 6,
              formatter: (val) => {
                if (val.length > 5) {
                  return val.split('').splice(0, 5).join('') + '...'
                } else {
                  return val
                }
              },
            },
          },
          {
            type: 'value',
            max: 0,
            show: false,
          },
        ],
        grid: {
          left: 50,
          right: 30,
          bottom: 50,
          top: 30,
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(0,0,0,0.1)',
            },
          },
          axisLabel: {
            textStyle: {
              fontFamily: 'Microsoft YaHei',
              // color: '#ccc',
            },
          },
        },
        series: [],
      },
      chartEight: {
        color: ['#ff7f5c', '#163bf5', '#f14249', '#2fc666', '#ffd72c'],
        tooltip: {
          trigger: 'item',
        },

        legend: {
          show: true,
          orient: 'vertical',
          right: '40%',
          icon: 'circle',
          top: '50%',
          textStyle: {
            color: '#000',
            rich: {
              a: {
                width: 50,
                padding: [0, 14, 0, 0],
              },
              b: {
                align: 'left',
                width: 40,
                padding: [0, 10, 0, 0],
              },
              c: {
                align: 'left',
              },
            },
          },
        },
        series: [],
      },
    }
  },

  methods: {
    oneChartsMap(datas) {
      const series = []
      const { names, values } = this.getValues(datas)
      const tabline = [
        {
          name: '发现问题数',
          color: ['#e7474e', '#eb4442'],
          data: values[0] || 0,
        },
        {
          name: '到期整改问题数',
          color: ['#2dc84e', '#2ac689'],
          data: values[1] || 0,
        },
        {
          name: '零容忍问题数',
          color: ['#ffd619', '#f9d632'],
          data: values[2] || 0,
        },
      ]
      // console.log(tabline, '数据-------tabline')
      const styles = []
      tabline.forEach((itvb, indexv) => {
        const styArr = []
        itvb.color.forEach((itvn, inde) => {
          styArr.push({ offset: inde, color: itvn })
        })
        styles.push(styArr)
      })

      tabline.forEach((itcs, index) => {
        series.push({
          name: itcs.name,
          type: 'bar',
          barWidth: '15%',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, styles[index]),
              barBorderRadius: [12, 12, 0, 0],
            },
          },
          data: itcs.data,
        })
      })
      this.chartOne.xAxis.data = names
      this.chartOne.series = series

      // console.log('数据----ce', series)
    },
    twoChartMap(datas) {
      const tabline = ['年度发现问题数趋势', '零容忍问题数']
      const colors = ['rgba(191, 121, 131,1)', 'rgba(225, 217, 68,1)']
      // const colors = ['rgba(191, 121, 131,1)', 'rgba(225, 217, 68,1)', 'rgba(103, 152, 183,1)']

      const series = []
      const { names, values } = this.getValues(datas)
      values.forEach((itcs, index) => {
        series.push({
          name: tabline[index],
          type: 'line',

          showAllSymbol: true,
          symbol: 'circle',
          symbolSize: 8,
          lineStyle: {
            color: colors[index], // 线条颜色

            normal: {
              color: colors[index], // 线条颜色
            },
          },
          label: {
            show: false,
            position: 'top',
            textStyle: {
              color: '#fff',
            },
          },
          itemStyle: {
            normal: {
              color: colors[index],
            },
          },
          tooltip: {
            show: true,
          },
          areaStyle: {
            // 区域填充样式

            normal: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: colors[index], // 0% 处的颜色
                  },
                  {
                    offset: 0.4,
                    color: colors[index].replace('1)', '0.1)'), // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(255,255,255,0)',
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },

          data: values[index],
        })
      })
      this.chartTwo.xAxis.data = names
      this.chartTwo.series = series
    },
    threeChartMap(datas) {
      let nums = 0
      datas.forEach((itb) => {
        nums += itb.value * 1
      })
      const series = []

      series.push({
        type: 'pie',
        center: ['25%', '50%'],
        radius: ['50%', '70%'],
        label: {
          show: true,
          fontSize: 15,
          fontWeight: '600',
          // color: '#fff',
          position: 'outside',
          formatter: function (item) {
            return `${((item.value / nums) * 100).toFixed(2)}%`
          },
        },
        emphasis: {
          disabled: true,
          scale: true,
          scaleSize: 0,
        },
        tooltip: {
          show: false,
        },
        labelLine: {
          show: true,
        },
        data: datas,
      })

      const legend = {
        show: true,
        orient: 'vertical',
        right: '10%',
        icon: 'circle',
        formatter: function (name) {
          const indexs = datas.findIndex((itcs) => itcs.name === name)
          return `{a|${datas[indexs].name}}{b|${datas[indexs].value}万元}`
        },
        top: '5%',
        textStyle: {
          color: '#000',
          rich: {
            a: {
              width: 160,
              padding: [0, 14, 0, 0],
            },
            b: {
              align: 'left',
              width: 60,
              padding: [0, 10, 0, 0],
            },
          },
        },
      }
      // series[0].data = nameArr
      // 设置总条数
      this.chartThree.title = {
        text: nums.toFixed(2),
        subtext: '金额总计(万元)',
        left: '25%',
        textAlign: 'center',
        top: 'center',
      }
      this.chartThree.series = series
      this.chartThree.legend = legend
    },
    fourChartMap(datas) {
      debugger
      const series = []
      const { names, values } = this.getValues(datas)
      const valuec = values[0]
      const arrc = [[], [], [], [], []]
      const arrcName = [[], [], [], [], []]
      // if (valuec) {
      //   valuec.forEach((itc) => {
      //     itc.forEach((itcv, index) => {
      //       if (itcv.label) {
      //         arrc[index].push(itcv.value || 0)
      //         arrcName[index].push(itcv.label)
      //       }
      //     })
      //   })
      // }
      if (valuec) {
        valuec.forEach((itc) => {
          itc.forEach((itcv, index) => {
            // if (itcv.label) {
            arrc[index].push(itcv.value)
            arrcName[index].push(itcv.label)
            // }
          })
        })
      }

      const tabline = []
      const colorsc = ['#d55d6e', '#edd43e', '#6fa6da', '#5459c1', '#23459c']
      arrc.forEach((itcvc, indexc) => {
        if (itcvc) {
          tabline.push({ name: `TOP${indexc * 1 + 1}`, data: itcvc, color: colorsc[indexc] })
        }
      })

      tabline.forEach((itcs, index) => {
        series.push({
          name: itcs.name,
          barGap: 0.1,

          type: 'bar',
          itemStyle: {
            normal: {
              color: itcs.color,
              barBorderRadius: [12, 12, 0, 0],
            },
          },
          data: itcs.data,
        })
      })
      this.chartFour.tooltip = {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
        formatter: (val) => {
          let str = ''
          let searName = []

          val.forEach((itc) => {
            const newArrs = arrcName.filter((itcvc) => itcvc[itc.dataIndex])
            searName = newArrs.map((ityv, indx) => {
              return { name: ityv[itc.dataIndex], value: arrc[indx][itc.dataIndex] }
            })
          })

          searName.forEach((itcc, indec) => {
            if (itcc?.name) {
              str += `<div style="display:flex;align-items:center;"><span style="width:10px;height:10px;border-radius:100%;background-color:${val[indec]?.color};"></span><span style="padding-left:5px">${itcc.name}:${itcc.value}</span></div>`
            }
          })
          return val[0]?.axisValue ? `<div>${val[0]?.axisValue}</div>${str}` : ''
        },
      }
      this.chartFour.xAxis.data = names
      this.chartFour.series = series
    },
    fiveChartsMap(datas) {
      // debugger
      const series = []
      const { names, values } = this.getValues(datas)
      // console.log(names, values, ' names, values ---')
      const tabline = [
        // {
        //   name: '增收节支',
        //   color: ['#eb4442'],
        //   data: values[0],
        // },
        {
          name: '新建、修订制度、流程、标准数量',
          color: ['#2390f5'],
          data: values[0],
        },
        // {
        //   name: '整改完成率',
        //   color: ['#29c886'],
        //   data: values[2],
        // },
        {
          name: '追责问责（人次）',
          color: ['#fdd267'],
          data: values[1],
        },
      ]

      const styles = []
      tabline.forEach((itvb, indexv) => {
        const styArr = []
        itvb.color.forEach((itvn, inde) => {
          styArr.push({ offset: inde, color: itvn })
        })
        styles.push(styArr)
      })

      const bars = []
      const lines = []

      tabline.forEach((itcs, index) => {
        bars.push({
          name: itcs.name,
          type: 'bar',
          barWidth: '15%',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, styles[index]),
              barBorderRadius: [12, 12, 0, 0],
            },
          },
          data: itcs.data,
        })
      })

      // lines.push({
      //   name: '总计',
      //   type: 'line',
      //   symbol: 'circle',
      //   symbolSize: 10,
      //   smooth: true,
      //   animationDuration: 2000,
      //   legend: {
      //     show: false,
      //   },
      //   lineStyle: {
      //     normal: {
      //       color: '#cb4445', // 线条颜色
      //     },
      //     borderColor: '#cb4445',
      //   },
      //   label: {
      //     show: false,
      //     position: 'top',
      //     textStyle: {
      //       color: '#fff',
      //     },
      //   },
      //   itemStyle: {
      //     normal: {
      //       color: '#cb4445',
      //     },
      //   },
      //   tooltip: {
      //     show: true,
      //   },

      //   data: names.map((itcv, indec) => {
      //     let nums = 0
      //     values.forEach((itvb) => {
      //       nums += itvb[indec] * 1
      //     })
      //     return nums
      //   }),
      // })
      this.chartFive.xAxis[0].data = names
      this.chartFive.series = [...bars, ...lines]
    },
    SevenChartsMap(datas) {
      const series = []
      const { names, values } = this.getValues(datas)
      const tabline = [
        //
        {
          name: '新建、修订制度、流程、标准数量',
          color: ['#2390f5'],
          data: values[0],
        },
        //
        {
          name: '追责问责（人次）',
          color: ['#fdd267'],
          data: values[1],
        },
      ]

      const styles = []
      tabline.forEach((itvb, indexv) => {
        const styArr = []
        itvb.color.forEach((itvn, inde) => {
          styArr.push({ offset: inde, color: itvn })
        })
        styles.push(styArr)
      })

      const bars = []
      const lines = []

      tabline.forEach((itcs, index) => {
        bars.push({
          name: itcs.name,
          type: 'bar',
          barWidth: '15%',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, styles[index]),
              barBorderRadius: [12, 12, 0, 0],
            },
          },
          data: itcs.data,
        })
      })

      this.chartSeven.xAxis[0].data = names
      this.chartSeven.series = [...bars, ...lines]
    },
    sexChartsMap(datas) {
      let nums = 0
      datas.forEach((itb) => {
        nums += itb.value * 1
      })
      const series = []

      series.push({
        type: 'pie',
        center: ['25%', '50%'],
        radius: ['50%', '70%'],
        label: {
          show: true,
          fontSize: 15,
          fontWeight: '600',
          // color: '#fff',
          position: 'outside',
          formatter: function (item) {
            return `${((item.value / nums) * 100).toFixed(1)}%`
          },
        },
        emphasis: {
          disabled: true,
          scale: true,
          scaleSize: 0,
        },
        tooltip: {
          show: false,
        },
        labelLine: {
          show: true,
        },
        data: datas,
      })

      const legend = {
        show: true,
        orient: 'vertical',
        right: '10%',
        icon: 'circle',
        formatter: function (name) {
          const indexs = datas.findIndex((itcs) => itcs.name === name)
          return `{a|${datas[indexs].name}}{b|${datas[indexs].value}条}{c|${datas[indexs].value2}万元}`
        },
        top: '35%',
        textStyle: {
          color: '#000',
          rich: {
            a: {
              width: 60,
              padding: [0, 14, 0, 0],
            },
            b: {
              align: 'left',
              width: 40,
              padding: [0, 10, 0, 0],
            },
            c: {
              align: 'left',
            },
          },
        },
      }
      // series[0].data = nameArr
      // 设置总条数
      this.chartSex.title = {
        text: nums,
        subtext: '总整改数(条)',
        left: '25%',
        top: 'center',
        textAlign: 'center',
      }
      this.chartSex.series = series
      this.chartSex.legend = legend
    },

    eightChartsMap(datas) {
      let nums = 0
      datas.forEach((itb) => {
        nums += itb.value * 1
      })
      const series = []

      series.push({
        type: 'pie',
        center: ['25%', '50%'],
        radius: ['50%', '70%'],
        label: {
          show: true,
          fontSize: 15,
          fontWeight: '600',
          // color: '#fff',
          position: 'outside',
          formatter: function (item) {
            return `${((item.value / nums) * 100).toFixed(1)}%`
          },
        },
        emphasis: {
          disabled: true,
          scale: true,
          scaleSize: 0,
        },
        tooltip: {
          show: false,
        },
        labelLine: {
          show: true,
        },
        data: datas,
      })

      const legend = {
        show: true,
        orient: 'vertical',
        right: '10%',
        icon: 'circle',
        formatter: function (name) {
          const indexs = datas.findIndex((itcs) => itcs.name === name)
          return `{a|${datas[indexs].name}}{b|${datas[indexs].value}条}{c|${datas[indexs].value2}万元}`
        },
        top: '35%',
        textStyle: {
          color: '#000',
          rich: {
            a: {
              width: 60,
              padding: [0, 14, 0, 0],
            },
            b: {
              align: 'left',
              width: 40,
              padding: [0, 10, 0, 0],
            },
            c: {
              align: 'left',
            },
          },
        },
      }
      // series[0].data = nameArr
      // 设置总条数
      this.chartEight.title = {
        text: nums,
        subtext: '总整改数(条)',
        left: '25%',
        top: 'center',
        textAlign: 'center',
      }
      this.chartEight.series = series
      this.chartEight.legend = legend
    },
    changeLegend(params) {
      //   const _thant = this
      //   const arrs = this.chartFive.series.filter((itcs) => itcs.xAxisIndex && itcs.xAxisIndex === 1)
      //   const newArr = arrs.filter((itvc) => params.selected[itvc.name])
      //   for (const key in newArr) {
      //     const num = Number(key) + 20
      //     newArr[key].data = newArr[key].data.map((itcv, indec) => {
      //       itcv[0] = num + indec * 100
      //       return itcv
      //     })
      //     console.log(newArr, 'arr----')
      //   }
      //   newArr.forEach((itcx) => {
      //     const indesx = _thant.chartFive.series.findIndex(
      //       (ityv) => ityv?.xAxisIndex === 1 && ityv.name === itcx.name
      //     )
      //     if (indesx !== -1) {
      //       _thant.chartFive.series[indesx] = itcx
      //     }
      //   })
      //   console.log(newArr, 'paramsparamsparamsparams')
    },
  },
}