背景:
1、图例宽度固定,文字超出部分以“…”代替,鼠标悬浮在单个图例(legend)时以tooltip的方式展示全当前name。
2、图例数量过多时可滚动翻页
效果如图:
配置:
legend: {
show: legend.show, // 展示图例
x: "right", // 水平居右
y: "center", // 垂直居中
icon: "rect", // 图例icon为方块
backgroundColor: "transparent",
itemHeight: 6, // 图例icon高度
itemWidth: 6, // 图例icon宽度
orient: "vertical", // 垂直排列
type: "scroll", // 可滚动翻页的图例
pageIconSize: 8, //翻页按钮大小
pageIconColor: "#2C86FF", //翻页箭头颜色
pageIconInactiveColor: "rgba(44,132,251,0.40)", //翻页(即翻页到头时箭头的颜色
pageTextStyle: {
color: "#999", //翻页数字颜色
},
align: "left", // 图例icon在左侧
formatter: function(p) {
// 文字太长时只取20个字符
const label = p.length > 20 ? p.substr(0, 20) : p;
// 文字宽度:后台设有宽度时使用后台传的值,若没有默认70
const width = legend.sideWidth ? (legend.sideWidth - 10) : 70;
// 渲染图例文字
return echarts.format.truncateText(label, width, "14px Microsoft Yahei", "…");
// widthStyle 对应为legend.textStyle.rich中的key名,可设置label显示的样式
// return `{widthStyle|${label }}`
},
tooltip: {
show: true, // 显示图例的tooltip
textStyle: {
width: 300, // 提示框宽度300
overflow: "breakAll", // 文字太长时换行
},
formatter: (val) => {
// 图例最大宽度为600px, 超出部分隐藏
return `<p style="max-width: 600px;overflow:hidden;white-space:pre-wrap;">${val.name}</p>`;
},
},
textStyle: {
color: "#464c54", // 图例文字颜色
// rich: {
// widthStyle: {
// width: legend.sideWidth ? (legend.sideWidth - 30) : 50,
// overflow: "hidden"
// }
// }
},
},