echarts中饼图引导线加圆点

推荐网址

该网站里面有很多大佬贡献的图表，总能找到你想要的
点击链接抵达

（1）我们需要完成的样子如下

（2）echarts主要部分配置

series: [
label: { //饼图图形上的文本标签
              show: true, //默认展示
              position: "outside", //默认'outside'饼图扇区外侧，通过视觉引导线连到相应的扇区
              formatter: '{a|{b}}\n{c|{d}%}', //格式展示{a|{b}\n{d}%}
              backgroundColor: "auto", //圆点颜色，auto：映射的系列色
              // height,width,lineHeight必须为0
              height: 0,
              width: 0,
              lineHeight: 0,
              // radius和padding为圆点大小，圆点半径为几radius和padding各项数值就为几如：圆点半径为1
              // borderRadius: 4,
              // padding: [4, -4, 4, -4],
              borderRadius: 2.5,
              padding: [2.5, -2.5, 2.5, -2.5],
              color:"#315af0",
              rich: { // 自定义富文本样式
                a: {
                  padding: [30, -95, -15, -80],
                  color:"#fff"
                },
                c: {
                  padding: [0, -75, -15, -70]
                }
              },
            },
            labelLine: {
              normal: {
                length2: 80,
                lineStyle: {
                  width: 1,
                  color:"#315af0"  //引导线颜色
                },
              },
            },
]

（3）单独提取的小圆点的配置

//这一段是为了设置引导线的小圆点
backgroundColor: "auto", //圆点颜色，auto：映射的系列色
              // height,width,lineHeight必须为0
              height: 0,
              width: 0,
              lineHeight: 0,
              // radius和padding为圆点大小，圆点半径为几radius和padding各项数值就为几如：圆点半径为1
              // borderRadius: 4,
              // padding: [4, -4, 4, -4],
              borderRadius: 2.5,
              padding: [2.5, -2.5, 2.5, -2.5],