echarts 饼图

   methods: {
echart(dom, index, data) {
  const colorpercent0 = ['rgba(159,16,23,0.5)', 'rgba(158,151,24,0.5)', 'rgba(0,172,181,0.5)']
  const colorpercent100 = ['rgba(159,16,23,0.1)', 'rgba(158,151,24,0.1)', 'rgba(47,172,181,0.1)']
  const storagePercent = [95, 96, 97]
  const option = {
    legend: {
      show: false
    },
    grid: {
      top: 'top',
      bottom: 'top',
      left: 0,
      right: 0
    },
    title: {
      text: '',
      x: 'center',
      y: '0%',
      textStyle: {
        color: '#7a8c9f',
        fontSize: 14
      }
    },
    tooltip: {
      show: false
    },
    series: [{
      type: 'pie',
      radius: ['70%', '90%'],
      startAngle: 225,
      hoverAnimation: false,
      avoidLabelOverlap: false,
      legendHoverLink: false,
      labelLine: {
        normal: {
          show: false
        }
      },
      color: [{
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
          offset: 0,
          color: colorpercent0[index]
        },
        {
          offset: 1,
          color: colorpercent100[index]
        }
        ]
      },
      'none'
      ],
      data: [{
        value: 75,
        name: '',
        itemStyle: {
          borderColor: 'rgba(2,152,193,0.7)',
          borderWidth: 1
        }
      },
      {
        value: 25,
        name: ''
      }

      ]
    },
    { // 内细
      name: '',
      type: 'pie',
      radius: ['61%', '62%'],
      startAngle: 225,
      hoverAnimation: false,
      legendHoverLink: false,
      color: [{
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
          offset: 0,
          color: colorpercent0[index]
        },
        {
          offset: 1,
          color: colorpercent100[index]
        }
        ]
      },
      'none'
      ],
      labelLine: {
        normal: {
          show: false
        }
      },
      data: [{
        value: 75,
        name: '',
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0,
              color: 'rgba(2,153,194,0.5)'
            },
            {
              offset: 1,
              color: 'rgba(2,153,194,0.1)'
            }
            ]
          }
        }
      },
      {
        value: 25,
        name: ''
      }
      ]
    },
    {
      name: '',
      type: 'pie',
      radius: ['70%', '90%'],
      startAngle: 315,
      hoverAnimation: false,
      legendHoverLink: false,
      labelLine: {
        normal: {
          show: false
        }
      },
      clockwise: false,
      z: 7,
      data: [{
        name: '',
        value: ((100 - storagePercent[index]) * 270) / 360,
        label: {
          formatter: '\n' + (storagePercent[index]).toFixed(0) + '\n{a|%}',
          position: 'center',
          show: true,
          color: '#fff',
          fontSize: 26,
          rich: {
            a: {
              color: '#06b6f0',
              fontSize: 16
            }
          }
        },
        itemStyle: {
          color: 'rgba(0, 0, 0, .2)'
        }
      },
      { // 头
        value: 1.5,
        name: '',
        itemStyle: {
          color: data
        }
      },
      {
        name: '',
        value: 100 - ((100 - storagePercent[index]) * 270) / 360,
        itemStyle: {
          color: 'transparent'
        }
      }
      ]
    }
    ]
  }
  this.myChart = this.$echarts.init(dom)
  this.myChart.setOption(option)
}
 },
  created() {},
  mounted() {
   this.echart(this.$refs.echart1, 0, '#9f1017')
   this.echart(this.$refs.echart2, 1, '#9e9718')
  this.echart(this.$refs.echart3, 2, '#00acb5')
},