526互联

echarts中legend实现排列对齐

发布时间 2023-08-01 12:50:22作者: ZerlinM

问题

当图表中的 legend 过多的时候，就需要考虑 legend 进行换行，但是换行之后，图例就会无法对齐。

解决

legend: {
  icon: "rect",
  width: "80%",
  itemWidth: 6,
  itemHeight: 6,
  bottom: 0,
  textStyle: {
    color: "#333",
    rich: {
      a: {
        width: 100,
        height: 12,
        backgroundColor: "transparent", // 一定要设置，不然不生效
        padding: [0, 20, 0, 0],
      },
    },
  },
  formatter: (params) => {
    return `{a|${params}}`;
  },
},

效果如下