饼状图

const chart = echarts.init(canvas, null, {
      width: width,
      height: height,
      devicePixelRatio: dpr // 像素
    });
    canvas.setChart(chart);
    /* 定制每个角的label */
    const label = {
      /* 格式化 c: value, b: name */
      formatter: [
        '{value|{c}元}',
        '{name|{b}}',
      ].join('\n'),
      /* 定制CSS，可以在 formatter 中应用 */
      rich: {
        value: {
          lineHeight: 25,
          fontSize: 14,
          color: '#333333',
          align: 'center'
        },
        name: {
          fontSize: 12,
          color: '#333333',
          align: 'center',
        }
      }
    };
    let option = {
      backgroundColor: "#ffffff",
      color: ["#00B8B0", "#FF7C7C", "#0C98E7"],
      series: [
        {
          selectedMode: 'single',
          /* 选中的时候往外扩充的宽度 */
          hoverOffset: 20,
          /* 选中的时候往外扩充的宽度，会直接移动 */
          selectedOffset: 0,
          /* 顺时加载 */
          clockWise: true,
          avoidLabelOverlap: true,
          type: 'pie',
          /* 中心点的 x,y */
          center: ['50%', '50%'],
          /* 半径 */
          radius: ['30%', '45%'],
          /* label 线条 */
          labelLine: {
            /* 正常下 */
            normal: {
              show: true,
              length: 5,
              length2: 25
            },
            /* 高亮下 */
            emphasis: {
              show: true
            }
          },
          position: 'outer',
          data: [{
            value: 12759,
            name: '交强险',
            label,
          }, {
            value: 12759,
            name: '车价',
            label,
          }, {
            value: 20000,
            name: '商业保险',
            label
          }]
        }
      ]
    };
    /* 更新配置 */
    chart.setOption(option);
    /* 默认选中 */
    chart.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: 0
    });
    this.eChart = chart;