echarts自定义图例（legend）样式

背景：

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"
      //   }
      // }
    },
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48