echarts饼图，自定义legend，解决legend字数太多和太长的问题，翻页处理
https://blog.csdn.net/weixin_43899935/article/details/107185591
版权
{
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
type: "scroll",
orient: "vertical",
right: 20,
top: 5,
bottom: 10,
pageIconColor: "white",//激活的分页按钮颜色
pageIconInactiveColor: "#2f4554",//没激活的分页按钮颜色
//设置自定义legend 的重点
formatter: function(name) {
// 获取legend显示内容
let data = data1;//这个是展示的数据
let total = 0;
let tarValue = 0;
let value = 0;
for (let i = 0, l = data.length; i < l; i++) {
total += data[i].value;
if (data[i].name == name) {
tarValue = data[i].value;
value = data[i].value;
}
}
let p = total== 0? 0 ：((tarValue / total) * 100).toFixed(1);
return [
"{a|" +
echarts.format.truncateText(
name,
80,
"14px Microsoft Yahei",
"…"//如果宽度超过80会出现...
) +
"}",
"{b|" + p + "%}",
"{x|" + value + "}" //a、b、x、跟下面的rich对应
].join(" ");
},
tooltip: {
show: true//这个为true的话悬停到legend上会出现tooltip
},
textStyle: {
rich: {
a: {
color: "white",
width: 80,
align: "left"
},
b: {
width: 50,
align: "left",
color: "white"
},
x: {
width: 30,
align: "left",
color: "white"
}
}
}
},
graphic: {//环形中间的字
elements: [
{
type: "text",
left: "28%",
top: "43%",
style: {
text: "666666",
textAlign: "center",
fill: "#fff",
fontSize: 32
}
},
{
type: "text",
left: "28%",
top: "56%",
style: {
text: "总人数（人）",
textAlign: "center",
fill: "#fff",
fontSize: 14
}
}
]
},
series: [
{
name: "访问来源",
type: "pie",
radius: ["50%","70%"],//环形图
center: ["35%", "50%"],
labelLine: {
show: false
},
label: {
show: false
},
data: data1
}
]
};
原文链接：https://blog.csdn.net/weixin_43899935/article/details/107185591
