echarts的奇怪需求之多折线图的控制

346 阅读1分钟

多折线图的图例控制显示,初始化,只显示一条线,显示对应线的label,图例置灰的线不显示,多条线时不显示label

1.显示图例但是不显示数据和折线,

echarts官方提供了在legend中的selectMode的选项

image-20240430165012883.png 在legend中添加这个选项,并且给默认的图例在select中初始化显示的状态,legent的完整示例

 legend: {
          data: [
            { name: "1月", icon: "circle" },
            { name: "2月", icon: "circle" },
            { name: "3月", icon: "circle" },
          ],
          fontSize: 14,
          top: "6%",
          textStyle: {
            color: "#fff",
          },
          selected: {
            [ "1月"]: true,
            [ "2月"]: false,
            [ "3月"]: false,
          },
          selectorLabel: true,
        },

2.点击出现其他的折线,并在多条折线出现的时候取消label!,这是代码片段

点击折线.png 3.首页进入效果 image-20240515140900772.png

4.点击多个效果image-20240515140937369.png

ps:数据都已脱敏