推荐网址
该网站里面有很多大佬贡献的图表,总能找到你想要的
点击链接抵达
(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],