Echarts环形图 叠加效果

echarts yekong

Echarts环形图 叠加效果

    drawLine () {
      var that = this
      window.addEventListener('resize', this.drawLine)
      let myChart = this.$echarts.init(this.$refs.echarts)
      var chartdata = [
        {
          name: '男性',
          value: 30,
        },
        {
          name: '女性',
          value: 50,
        }
      ]
      var radius = ['60%', '70%']
      var color = ['#37FFC9', '#FFE777', '#19D6FF', '#32A1FF', '#cccccc', '#ff1111']
      let color1 = [],
        color2 = [],
        color3 = []
      color.forEach((item) => {
        color1.push(item, 'transparent')
        color2.push(hexToRgba(item, 0.7), 'transparent')
        color3.push(hexToRgba(item, 0.4), 'transparent')
      })
      let data1 = []
      let sum = 0
      chartdata.forEach((item) => {
        sum += Number(item.value)
      })
      chartdata.forEach((item, index) => {
        if (item.value !== 0) {
          data1.push(item, {
            name: '',
            value: sum / 70,
            labelLine: {
              show: false,
              lineStyle: {
                color: 'transparent',
              },
            },
            itemStyle: {
              color: 'transparent',
            },
          })
        }
      })
      let radius2 = [Number(radius[1].split('%')[0]) + 0 + '%', Number(radius[1].split('%')[0]) + 4 + '%']
      let radius3 = [Number(radius[1].split('%')[0]) + 4 + '%', Number(radius[1].split('%')[0]) + 8 + '%']
      var option = {
        grid: {
          top: 0,
          bottom: 0,
          left: 0,
          right: 0,
          containLabel: true,
        },
        tooltip: {
          formatter: (params) => {
            if (params.name !== '') {
              return params.name + ' : ' + params.value + '\n' + '(' + params.percent + '%)'
            }
          },
        },
        series: [
          // 最外层圆环
          {
            type: 'pie',
            radius: radius3,
            center: ['50%', '50%'],
            hoverAnimation: false,
            startAngle: 90,
            selectedMode: 'single',
            selectedOffset: 0,
            itemStyle: {
              normal: {
                color: (params) => {
                  return color1[params.dataIndex]
                },
              },
            },
            label: {
              show: true,
              normal: {
                position: 'outside',
                fontSize: FontChart(14),
                color: '#fff',
                formatter: (params) => {
                  console.log(params)
                  console.log(1)
                  if (params.dataIndex == 0 || params.dataIndex == 2) {
                    return params.name + '\n' + params.value
                  }
                }
              }
            },
            labelLine: {
              show: false,
              length: 10,
              length2: 10,
              lineStyle: {
                color: '#fff',
                width: 2,
              },
            },
            data: data1,
            z: 666,
          },
          {
            type: 'pie',
            radius: radius2,
            center: ['50%', '50%'],
            hoverAnimation: false,
            startAngle: 90,
            selectedMode: 'single',
            selectedOffset: 0,
            itemStyle: {
              normal: {
                color: (params) => {
                  return color2[params.dataIndex]
                },
              },
            },
            label: {
              show: false,
              formatter: '{b}' + ' ' + '{c}',
            },
            data: data1,
            z: 666,
          },
          {
            type: 'pie',
            radius: radius,
            center: ['50%', '50%'],
            hoverAnimation: false,
            startAngle: 90,
            selectedMode: 'single',
            selectedOffset: 0,
            itemStyle: {
              normal: {
                color: (params) => {
                  return color3[params.dataIndex]
                },
              },
            },
            label: {
              show: false,
              formatter: '{b}' + ' ' + '{c}',
            },
            data: data1,
            z: 666,
          },
        ],
      }
      myChart.clear()
      myChart.resize()
      myChart.setOption(option)
    },
喜欢