echarts学习:通过图例事件实现选中后控制多条折线的显隐

1.问题描述

我在工作中遇到了这样一个需求:我们都知道点击echarts折线图的图例,是可以控制折线的显隐的。我现在希望点击某一个图例可以改变多条折线的显隐。

例如在下面这张图中,我将"xxx水位"和"yyy水位"分为一组;将"xxx流量"和"yyy流量"分为一组。我希望当点击组内的任意一个图例时,可以改变整组折线的显隐。

2.问题分析

想要实现理想的效果,主要有两个要点:1.获取到图例点击事件;2.找到自定义折线显隐的方法。

(1)图例点击事件

echarts有完整的事件系统,在我们点击图例时legendselectchanged事件会被触发。

(2)控制折线的显隐

echarts还有一些控制图表的方法,称之为action图表行为。其中的legendToggleSelect方法就可以切换图例的选中状态,从而控制折线的显隐。

3.实现功能

我一开始的写法如下:

JavaScript 复制代码
const dimensionNames = [
  ["xxx水位", "yyy水位"],
  ["xxx流量", "yyy流量"],
];
onMounted(() => {
  nextTick(() => {
    const instance = chart.value.getInstance();
    instance.on("legendselectchanged", e => {
      /**
       * e = {
       *    name      //切换的图例名称
       *    selected  //所有图例的选中状态表
       * }
       */
      const name = dimensionNames
        .find(g => g.includes(e.name))
        .find(n => n !== e.name);

      instance.dispatchAction({
        type: "legendToggleSelect",
        name,
      });
    });
  });

但是这样写有一个问题:由于legendToggleSelect行为的会触发legendselectchanged事件,因此就会出现死循环。

为了解决这个问题就需要在代码中加入一个甄别机制,只在鼠标点击图例所触发的事件中使用legendToggleSelect行为。

JavaScript 复制代码
const dimensionNames = [
  ["xxx水位", "yyy水位"],
  ["xxx流量", "yyy流量"],
];
onMounted(() => {
  nextTick(() => {
    const instance = chart.value.getInstance();
    instance.on("legendselectchanged", e => {
      /**
       * e = {
       *    name      //切换的图例名称
       *    selected  //所有图例的选中状态表
       * }
       */
      const group = dimensionNames.find(g => g.includes(e.name));

      // 甄别是否是鼠标点击所触发的事件
      if (group.every(i => e.selected[i] == e.selected[e.name])) return;

      const name = group.find(n => n !== e.name);

      instance.dispatchAction({
        type: "legendToggleSelect",
        name,
      });
    });
  });

最终效果如下:

相关推荐
U.2 SSD1 天前
Echart仪表盘示例
javascript·echarts
U.2 SSD1 天前
ECharts漏斗图示例
前端·javascript·echarts
java水泥工2 天前
基于Echarts+HTML5可视化数据大屏展示-车辆综合管控平台
前端·echarts·html5·大屏模版
拜无忧2 天前
【案例】可视化模板,驾驶舱模板,3x3,兼容移动
前端·echarts·数据可视化
U.2 SSD3 天前
Echarts单轴坐标系散点图
前端·javascript·echarts
U.2 SSD4 天前
ECharts 日历坐标示例
前端·javascript·echarts
paopaokaka_luck5 天前
基于SpringBoot+Vue的志行交通法规在线模拟考试(AI问答、WebSocket即时通讯、Echarts图形化分析、随机测评)
vue.js·人工智能·spring boot·后端·websocket·echarts
卷Java9 天前
饼状图修复总结
java·spring boot·uni-app·echarts
用户32660949361710 天前
Echarts常用配置项参数总结
echarts