echarts环形图的图例引导线水平加圆点
什么是引导线?
引导线就是label(文本标签)链接的线
引导线分两段
从拐弯的地方开始分，接近圆的是length(引导线1)，接近label的是length2(引导线2)
需求一：要求水平引导线
让第一段引导线长度为0，第二段自己调试长度
let data = [
{ name: "业务1", value: 10 },
{ name: "业务2", value: 15 },
{ name: "业务3", value: 15 },
{ name: "业务4", value: 25 },
{ name: "业务5", value: 10 },
{ name: "业务6", value: 25 },
];
let color = ["#fec101", "#D1C76B ", "#ff6226", "#f60000", "#2cc78f", "#2ca7f9"];
// 这步主要是为了让小圆点的颜色和饼状图的块对应，如果圆点的颜色是统一的，只需要把itemStyle写在series里面
let setLabel = (data) => {
let opts = [];
for (let i = 0; i < data.length; i++) {
let item = {};
item.name = data[i].name;
item.value = data[i].value;
item.label = {
normal: {
//控制引导线上文字颜色和位置,此处a是显示文字区域，b做一个小圆圈在引导线尾部显示
show: true,
//a和b来识别不同的文字区域
formatter: [
"{a|{b}}", //引导线上面文字
"{b|}", //引导线下面文字
// '{c|{c}}', //引导线下面文字
// "{d}",
].join("\n"), //用\n来换行
// formatter:'{d}',
rich: {
a: {
left: 10,
// padding: [0, -50, 20, -50],
padding: [0, 0, 0, 2],
color: color[i],
},
b: {
height: 5,
width: 5,
lineHeight: 5,
marginBottom: 0,
padding: [0, -5],
borderRadius: 5,
backgroundColor: color[i], // 圆点颜色和饼图块状颜色一致
},
c: {
left: 20,
padding: [20, -35, 0, -35],
color: color[i],
},
d: {
// left:35,
// top:20,
// padding:[10,0,10,10],
// color: color[i]
},
},
},
};
opts.push(item);
}
return opts;
};
option = {
legend: {
left: "center",
itemHeight: 10,
itemWidth: 10,
textStyle: {
fontSize: 14, //字体大小
color: "#268C8C", //字体颜色
},
itemGap: 20,
bottom: "5px",
},
grid: {
show: false,
left: "10%",
// bottom: "10%",
},
// backgroundColor: "#d9d9d9",
// title:{
// text: 'eeee\neeee',
// x: 'center',
// top: 'center',
// textStyle: {
// color: '#222',
// fontSize: 22,
// fontWeight: '600',
// }
// },
animation: true,
series: [
{
color: color,
name: "饼图圆点",
type: "pie",
radius: ["25%", "50%"],
avoidLabelOverlap: false,
itemStyle: {
normal: {
borderColor: "#ffffff",
// borderWidth:3,
},
},
labelLine: {
normal: {
show: true,
length: 0, // 第一段线 长度
length2: 55, // 第二段线 长度
align: "right",
},
emphasis: {
show: true,
},
},
data: setLabel(data),
},
{
type: "pie",
radius: ["25%", "0%"],
center: ["50%", "50%"],
z: 0,
data: [
{
// hoverOffset: 1,
// value: 100,
// itemStyle: {
// color: '#fff',
// shadowBlur: 20,
// shadowColor: '#b5b8cd',
// },
// label: {
// show: false
// },
// labelLine: {
// normal: {
// smooth: true,
// lineStyle: {
// width: 0
// }
// }
// },
// hoverAnimation: false,
},
],
},
],
};
这里是代码
需求二：要求水平引导线末端加上圆点
可以参考上面代码的位置，把它放在echarts的实例编辑器上自己调试
let data = [
{ name: "业务1", value: 10 },
{ name: "业务2", value: 15 },
{ name: "业务3", value: 15 },
{ name: "业务4", value: 25 },
{ name: "业务5", value: 10 },
{ name: "业务6", value: 25 },
];
let color = ["#fec101", "#D1C76B ", "#ff6226", "#f60000", "#2cc78f", "#2ca7f9"];
// 这步主要是为了让小圆点的颜色和饼状图的块对应，如果圆点的颜色是统一的，只需要把itemStyle写在series里面
let setLabel = (data) => {
let opts = [];
for (let i = 0; i < data.length; i++) {
let item = {};
item.name = data[i].name;
item.value = data[i].value;
item.label = {
normal: {
//控制引导线上文字颜色和位置,此处a是显示文字区域，b做一个小圆圈在引导线尾部显示
show: true,
//a和b来识别不同的文字区域
formatter: [
"{a|{b}}", //引导线上面文字
"{b|}", //引导线下面文字
// '{c|{c}}', //引导线下面文字
// "{d}",
].join("\n"), //用\n来换行
// formatter:'{d}',
rich: {
a: {
left: 10,
// padding: [0, -50, 20, -50],
padding: [0, 0, 0, 2],
color: color[i],
},
b: {
height: 5,
width: 5,
lineHeight: 5,
marginBottom: 0,
padding: [0, -5],
borderRadius: 5,
backgroundColor: color[i], // 圆点颜色和饼图块状颜色一致
},
c: {
left: 20,
padding: [20, -35, 0, -35],
color: color[i],
},
d: {
// left:35,
// top:20,
// padding:[10,0,10,10],
// color: color[i]
},
},
},
};
opts.push(item);
}
return opts;
};
option = {
legend: {
left: "center",
itemHeight: 10,
itemWidth: 10,
textStyle: {
fontSize: 14, //字体大小
color: "#268C8C", //字体颜色
},
itemGap: 20,
bottom: "5px",
},
grid: {
show: false,
left: "10%",
// bottom: "10%",
},
// backgroundColor: "#d9d9d9",
// title:{
// text: 'eeee\neeee',
// x: 'center',
// top: 'center',
// textStyle: {
// color: '#222',
// fontSize: 22,
// fontWeight: '600',
// }
// },
animation: true,
series: [
{
color: color,
name: "饼图圆点",
type: "pie",
radius: ["25%", "50%"],
avoidLabelOverlap: false,
itemStyle: {
normal: {
borderColor: "#ffffff",
// borderWidth:3,
},
},
labelLine: {
normal: {
show: true,
length: 0, // 第一段线 长度
length2: 55, // 第二段线 长度
align: "right",
},
emphasis: {
show: true,
},
},
data: setLabel(data),
},
{
type: "pie",
radius: ["25%", "0%"],
center: ["50%", "50%"],
z: 0,
data: [
{
// hoverOffset: 1,
// value: 100,
// itemStyle: {
// color: '#fff',
// shadowBlur: 20,
// shadowColor: '#b5b8cd',
// },
// label: {
// show: false
// },
// labelLine: {
// normal: {
// smooth: true,
// lineStyle: {
// width: 0
// }
// }
// },
// hoverAnimation: false,
},
],
},
],
};