echarts 半饼图 js

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

let data = [
  { value: 40, name: '苯' },
  { value: 33, name: '砷' },
  { value: 28, name: '铬' },
  { value: 22, name: 'C6-C10' },
  { value: 20, name: 'xx1' },
  { value: 15, name: 'xx2' },
  { value: 12, name: 'xx3' }
];
let seriesData = [];
let zeroArry = [];
let legendData = [];
for (let i = 0; i < data.length; i++) {
  zeroArry.push({ value: 0, name: `text ${i}` });
  legendData.push(data[i].name);
}
seriesData = [...zeroArry, ...data];
option = {
  legend: {
    right: '2%',
    orient: 'vertical',
    bottom: '50%',
    itemGap: 20,
    icon: 'rect',
    itemWidth: 10,
    itemHeight: 10,
    textStyle: {
      color: '#38ebf4',
      fontSize: 12
    },
    data: legendData,
    formatter: function (name) {
      console.log(name);
      return 'Legend ' + name;
    }
  },
  series: [
    {
      name: 'Mode1',
      type: 'pie',
      radius: ['0%', '20%'],
      center: ['50%', '50%'],
      roseType: 'area',
      startAngle: 0,
      label: {
        show: false
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 0, name: 'rose 200' },
        { value: 20, name: 'rose 200' }
      ]
    },
    {
      name: 'Mode2',
      type: 'pie',
      radius: ['25%', '100%'],
      center: ['50%', '50%'],
      roseType: 'area',
      startAngle: 0,
      label: {
        show: false
      },
      labelLine: {
        show: false
      },
      color: [
        '#ff4343',
        '#f69846',
        '#f6d54a',
        '#45dbf7',
        '#44aff0',
        '#4777f5',
        '#5045f6',
        '#ad46f3',
        '#f845f1',
        '#a4ffad'
      ],
      data: seriesData
    }
  ]
};

option && myChart.setOption(option);

效果图：