饼图设置(外圈圆、自定义Lableline)echarts 饼配置项内容和展示

      function generateData(totalNum, bigvalue, smallvalue, color) {
    let dataArr = [];
    for (var i = 0; i < totalNum; i++) {
        if (i % 2 === 0) {
            dataArr.push({
                name: (i + 1).toString(),
                value: bigvalue,
                itemStyle: {
                    normal: {
                        color: color,
                        borderWidth: 0,
                    }
                }
            });
        } else {
            dataArr.push({
                name: (i + 1).toString(),
                value: smallvalue,
                itemStyle: {
                    normal: {
                        color: "rgba(0,0,0,0)",
                        borderWidth: 0,
                    }
                }
            });
        }

    }
    return dataArr;
}
option = {
  title: {
    text: '费用占比',
    left: 0,
  },
  graphic: {
    elements: [
      {
        type: 'text',
        top: 'center',
        left: 'center',
        style: {
          text: '19999',
          textAlign: 'center',
          fill: '#333333',
          fontSize: 36,
        },
      },
      {
        type: 'text',
        top: '40%',
        left: 'center',
        style: {
          text: '费用',
          textAlign: 'center',
          fill: '#000000',
          fontSize: 16,
          fontWeight: 'normal',
        },
      },
    ],
  },
  series: [
    {
      name: 'Email',
      type: 'pie',
      radius: ['60%', '70%'],
      avoidLabelOverlap: true,
      emphasis: {
        scale: true,
        scaleSize: 10,
        label: {
          show: true,
          fontSize: 16,
          fontWeight: 600,
        },
        labelLine: {
          lineStyle: {
            type: 'dashed',
          },
        },
      },
      label: {
        show: false,
      },
      labelLine: {
        length: 20,
        length2: 40,
        show: true,
        lineStyle: {
          type: 'dashed',
        },
      },
      z: 3,
      data: [
        {
          value: 1048,
          name: 'Email',
          itemStyle: {
            color: '#7893F2',
          },
          label: {
            formatter: '{hr|}{space|}{a|{b}}{space|}{c}{space|}{d}%',
            rich: {
              hr: {
                backgroundColor: '#ffffff',
                width: 11,
                height: 11,
                borderColor: '#7893F2',
                borderWidth: 3,
              },
              space: {
                padding: [0, 8, 0, 0],
              },
              a: {
                color: '#666666',
                fontSize: 12,
              },
            },
          },
          emphasis: {
            labelLine: {
              show: true,
              lineStyle: {
                color: '#7893F2',
              },
            },
          },
        },
        {
          value: 735,
          name: 'Video',
          itemStyle: {
            color: '#32C8F5',
          },
          label: {
            formatter: '{hr|}{space|}{a|{b}}{space|}{c}{space|}{d}%',
            rich: {
              hr: {
                backgroundColor: '#ffffff',
                width: 11,
                height: 11,
                borderColor: '#32C8F5',
                borderWidth: 3,
              },
              space: {
                padding: [0, 8, 0, 0],
              },
              a: {
                color: '#666666',
                fontSize: 12,
              },
            },
          },
          emphasis: {
            labelLine: {
              show: true,
              lineStyle: {
                color: '#32C8F5',
              },
            },
          },
        },
        {
          value: 580,
          name: 'music',
          itemStyle: {
            color: '#3DC6BD',
          },
          label: {
            formatter: '{hr|}{space|}{a|{b}}{space|}{c}{space|}{d}%',
            rich: {
              hr: {
                backgroundColor: '#ffffff',
                width: 11,
                height: 11,
                borderColor: '#3DC6BD',
                borderWidth: 3,
              },
              space: {
                padding: [0, 8, 0, 0],
              },
              a: {
                color: '#666666',
                fontSize: 12,
              },
            },
          },
          emphasis: {
            labelLine: {
              show: true,
              lineStyle: {
                color: '#3DC6BD',
              },
            },
          },
        },
        {
          value: 484,
          name: 'high',
          itemStyle: {
            color: '#5D7092',
          },
          label: {
            formatter: '{hr|}{space|}{a|{b}}{space|}{c}{space|}{d}%',
            rich: {
              hr: {
                backgroundColor: '#ffffff',
                width: 11,
                height: 11,
                borderColor: '#5D7092',
                borderWidth: 3,
              },
              space: {
                padding: [0, 8, 0, 0],
              },
              a: {
                color: '#666666',
                fontSize: 12,
              },
            },
          },
          emphasis: {
            labelLine: {
              show: true,
              lineStyle: {
                color: '#5D7092',
              },
            },
          },
        },
      ],
    },
    {
      name: '不动外圆',
      type: 'pie',
      zlevel: 4,
      silent: true,
      radius: ['80%', '79%'],
      label: {
        show: false,
      },
      data: generateData(100, 25, 20, '#E6E6E6'),
    },
  ],
};