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,
      });
    });
  });

最终效果如下:

相关推荐
在雨夜入睡2 天前
Echarts-实现柱状图单系列图例
echarts
paopaokaka_luck2 天前
婚纱摄影管理系统(发送邮箱、腾讯地图API、物流API、webSocket实时聊天、协同过滤算法、Echarts图形化分析)
vue.js·spring boot·后端·websocket·算法·echarts
码上佳人2 天前
Echarts如何生成没有上下两端线的箱线图
前端·echarts
wow_DG6 天前
【ECharts✨】解决Vue 中 v-show 导致组件 ECharts 样式异常问题
前端·javascript·vue.js·echarts
朝阳397 天前
echarts【实战】饼状图点击高亮,其他区域变暗
echarts
HashTang8 天前
2025年7月份实时最新获取地图边界数据方法,省市区县街道多级联动【文末附实时geoJson数据下载】
echarts·地图·geojson·全国geojson·经纬度·街道geojson·街道边界数据·矢量边界·乡镇geojson·乡镇边界数据·行政边界
全宝10 天前
🗾3分钟学会Echart地图下钻
前端·echarts
paopaokaka_luck12 天前
基于SpringBoot+Vue的汽车租赁系统(协同过滤算法、腾讯地图API、支付宝沙盒支付、WebsSocket实时聊天、ECharts图形化分析)
vue.js·spring boot·后端·websocket·算法·汽车·echarts
隐含12 天前
基于echarts的水球的样式。
前端·javascript·echarts
lianlian0113 天前
vue3+echarts 多Y轴折线图,通过图例legend动态控制对应Y轴所有数据显示隐藏
echarts