echarts 3/4环形图

<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '350px'
    },
    height: {
      type: String,
      default: '210px'
    },
    series: {
      type: Array,
      default: []
    },
  },
  data() {
    return {
      chart: null,
      color: ['#4169E1', '#00FFFF', '#FFA500', '#40E0D0', '#B22222'],
      chartData: [{ "id": null, "commodityName": "青花陶瓷盖碗", "industry": "日用陶瓷", "createNum": 110, "queryNum": 150 }, { "id": null, "commodityName": "高花瓶", "industry": "陈设艺术陶瓷", "createNum": 61, "queryNum": 78 }, { "id": null, "commodityName": "五桃图陶瓷寿碗", "industry": "日用陶瓷", "createNum": 56, "queryNum": 49 }, { "id": null, "commodityName": "冰裂茶具套装", "industry": "日用陶瓷", "createNum": 33, "queryNum": 15 }, { "id": null, "commodityName": "一米荷花缸", "industry": "园艺陶瓷", "createNum": 6, "queryNum": 10 }]
    }
  },
  watch: {
    series: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.chartData)
    },
    setOptions(val) {
      let sum = 0;
      let pieSeries = [],
        lineYAxis = [];
      // 数据处理
      if (val) {
        val.forEach((v, i) => {
          sum = sum + v.value;
        })
        val.forEach((v, i) => {
        //数据
          pieSeries.push({
            name: '',
            type: 'pie',
            clockWise: false,
            hoverAnimation: false,
            //环形宽度
            radius: [85 - i * 15 + '%', 88 - i * 15 + '%'],
            center: ["30%", "50%"],
            label: {
              show: false
            },
            data: [{
              value: v.value,
              name: v.commodityName
            }, {
              value: sum - v.value,
              name: '',
              itemStyle: {
                color: "rgba(0,0,0,0)"
              }
            }]
          });
          //底色
          pieSeries.push({
            name: '',
            type: 'pie',
            silent: true,
            z: 1,
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            radius: [85 - i * 15 + '%', 88 - i * 15 + '%'],
            center: ["30%", "50%"],
            label: {
              show: false
            },
            data: [{
              value: 7.5,
              itemStyle: {
                color: "rgba(	211,211,211,0.1)"
              }
            }, {
              value: 2.5,
              name: '',
              itemStyle: {
                color: "rgba(0,0,0,0)"
              }
            }]
          });
          lineYAxis.push({
            value: i,
            textStyle: {
              rich: {
                circle: {
                  color: this.color[i],
                  padding: [0, 5]
                }
              }
            }
          });
        })
      }



      this.chart.setOption({
        backgroundColor: '',
        color: this.color,
        grid: {
          top: '4%',
          bottom: '60%',
          left: "28%",
          containLabel: false
        },
        yAxis: [{
          type: 'category',
          inverse: true,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            formatter: function (params) {
              let item = val[params];
              return '{line|}{circle|●}{commodityName|' + item.commodityName + '}  {value|' + item.value + '}'
            },
            interval: 0,
            inside: true,
            textStyle: {
              color: "#ffffff",
              fontSize: 14,
              rich: {
                line: {
                  width: 10,
                  height: 10,
                },
              }
            },
            show: true
          },
          data: lineYAxis
        }],
        xAxis: [{
          show: false
        }],
        series: pieSeries
      })
    }
  }
}
</script>