Echarts环形效果 多环形

drawLine () {
      var that = this
      window.addEventListener('resize', this.drawLine)
      let myChart = this.$echarts.init(this.$refs.echarts)
      var data = [{
        name: '许村南',
        value: 754
      },
        {
          name: '桐乡付',
          value: 611
        },
        {
          name: '马家浜',
          value: 400
        }
      ]
      var arrName = getArrayValue(data, 'name')
      var arrValue = getArrayValue(data, 'value')
      var sumValue = 1000
      var objData = array2obj(data, 'name')
      var optionData = getData(data)

      function getArrayValue (array, key) {
        var key = key || 'value'
        var res = []
        if (array) {
          array.forEach(function (t) {
            res.push(t[key])
          })
        }
        return res
      }

      function array2obj (array, key) {
        var resObj = {}
        for (var i = 0; i < array.length; i++) {
          resObj[array[i][key]] = array[i]
        }
        return resObj
      }

      function getData (data) {
        var res = {
          series: [{
            name: '大环',
            type: 'gauge',
            splitNumber: 15,
            radius: '82%',
            center: ['50%', '55%'],
            startAngle: 90,
            endAngle: -270,
            axisLine: {
              show: false,

            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false,

            },
            axisLabel: {
              show: false
            },
            detail: {
              show: false
            }
          }

          ],
          yAxis: []
        }
        for (let i = 0; i < data.length; i++) {
          res.series.push({
            name: '学历',
            type: 'pie',
            clockWise: true,
            z: 2,
            hoverAnimation: false,
            radius: [73 - i * 15 + '%', 68 - i * 15 + '%'],
            center: ['50%', '45%'],
            label: {
              show: false,
              formatter: function (params) {
                return params.value
              }
            },
            labelLine: {
              show: false
            },
            data: [{
              value: data[i].value,
              name: data[i].name
            }, {
              value: sumValue - data[i].value,
              name: '',
              itemStyle: {
                color: '#173561',
                borderWidth: 0
              },
              tooltip: {
                show: false
              },
              label: {
                show: false
              },
              hoverAnimation: false
            }]
          })
          res.yAxis.push(data[i].name)
        }
        return res
      }

      var option = {
        color: ['#0D89FD', '#2DE183', '#67DFFF'],
        legend: {
          show: true,
          icon: 'circle',
          itemWidth: 6,
          itemHeight: 6,
          data: arrName,
          bottom: 10,
          left: 'center',
          textStyle: {
            color: '#fff',
            fontSize: FontChart(12)
          }
        },
        grid: {
          top: '16%',
          bottom: '54%',
          left: '50%',
          containLabel: false
        },
        yAxis: [{
          type: 'category',
          inverse: true,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0,
            inside: false,
            textStyle: {
              color: 'RGB(78,184,252)',
              fontSize: 25,
            },
            show: false
          },
          data: optionData.yAxis
        }],
        xAxis: [{
          show: false
        }],
        series: optionData.series
      }
      myChart.clear()
      myChart.resize()
      myChart.setOption(option)
    },