echarts饼状图引导线加圆点

实现echarts饼状图引导线加圆点实现思路:

1.首先我们在series里设置三个饼状图，设置共有的数据来防止页面交互显示错位问题
设置minAngle 最小区域扇面角度防止多个数据为0时候引导线会合并在一起

let data = [
        {value: 20, name: '测试1'},
        {value: 30,name: '测试2'},
        {value: 30, name: '测试3' },
        {value: 20, name: '测试4' },                                
];

2.第一个为饼状图的圆点显示，该数据为series里的第一个对象代码如下：

{
      type: 'pie',
      minAngle: 18,
      radius: ['65%', '70%'],
      center: ['50%', '45%'],
      data: [
        {value: 20, name: ''},
        {value: 30,name: ''},
        {value: 30, name: '' },
        {value: 20, name: '' },                                
      ],
      labelLine: { 
        length: 0,
        length2: 0,
        minSurfaceAngle: 90
      },
      itemStyle: { opacity: 0  },
      label: {
        normal: {
          opacity:1,
          show: true,
          width:0,
          height:0,
          padding:2.5,
          borderRadius:2.5, 
          backgroundColor:"auto",
          distanceToLabelLine :-2.5
        }
      }      
}

 注意：圆点显示的data里面name默认给空数据，能防止圆点显示错位问题

3.第二个为饼状图的引导线显示，代码如下：

{
      type: 'pie',
      minAngle: 18,
      radius: ['65%', '70%'],
      center: ['50%', '45%'],
      data:data,
      itemStyle: { opacity:0 },
      label: {
        alignTo: 'edge',
        margin: 0,
        formatter: '{value|{d}%}\n{name|{b} }',
        opacity:1,
        lineHeight: 20,
        rich: {
          value: {
            fontSize: 14,
            color: '#333',
            fontWeight:'bold',
            padding:[0,0,0,0],
          },
          name: {
            fontSize: 14,
            color: '#333',
            padding:[8,0,0,0],
          },
        },
        distanceToLabelLine: 0
      },
      labelLine: {
        length: 20,
        length2: 30,
        minSurfaceAngle: 90
      },
      labelLayout: function (params) {
        const isLeft = params.labelRect.x < myChart.getWidth() / 2;
        const points = params.labelLinePoints;
        points[2][0] = isLeft? params.labelRect.x : params.labelRect.x + params.labelRect.width;
        return {
          labelLinePoints: points
        };
      }, 
},

4.第三个为饼状图扇形区，代码如下：

{
      type: 'pie',
      minAngle: 18,
      radius: ['44%', '65%'],
      center: ['50%', '45%'],
      data: data,
      label: {
        show: false
      },
}

5.综上，我们的代码就编写成功了现在看看图表效果

6.现在，我们整理下代码，看看整体代码

let data = [
        {value: 20, name: '测试1'},
        {value: 30,name: '测试2'},
        {value: 30, name: '测试3' },
        {value: 20, name: '测试4' },                                
];
option = {
  series: [
    {
          type: 'pie',
          minAngle: 18,
          radius: ['65%', '70%'],
          center: ['50%', '45%'],
          data: [
            {value: 20, name: ''},
            {value: 30,name: ''},
            {value: 30, name: '' },
            {value: 20, name: '' },                                
          ],
          labelLine: { 
            length: 0,
            length2: 0,
            minSurfaceAngle: 90
          },
          itemStyle: { opacity: 0  },
          label: {
            normal: {
              opacity:1,
              show: true,
              width:0,
              height:0,
              padding:2.5,
              borderRadius:2.5, 
              backgroundColor:"auto",
              distanceToLabelLine :-2.5
            }
          }      
    },
    {
      type: 'pie',
      minAngle: 18,
      radius: ['65%', '70%'],
      center: ['50%', '45%'],
      data:data,
      itemStyle: { opacity:0 },
      label: {
        alignTo: 'edge',
        margin: 0,
        formatter: '{value|{d}%}\n{name|{b} }',
        opacity:1,
        lineHeight: 20,
        rich: {
          value: {
            fontSize: 14,
            color: '#333',
            fontWeight:'bold',
            padding:[0,0,0,0],
          },
          name: {
            fontSize: 14,
            color: '#333',
            padding:[8,0,0,0],
          },
        },
        distanceToLabelLine: 0
      },
      labelLine: {
        length: 20,
        length2: 30,
        minSurfaceAngle: 90
      },
      labelLayout: function (params) {
        const isLeft = params.labelRect.x < myChart.getWidth() / 2;
        const points = params.labelLinePoints;
        points[2][0] = isLeft? params.labelRect.x : params.labelRect.x + params.labelRect.width;
        return {
          labelLinePoints: points
        };
      }, 
},
    {
          type: 'pie',
          minAngle: 18,
          radius: ['44%', '65%'],
          center: ['50%', '45%'],
          data: data,
          label: {
            show: false
          },
      }
  ]
};