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

最终效果如下:

相关推荐
草帽lufei11 小时前
3DMap大屏那些事儿
前端·vue.js·echarts
安卓开发者2 天前
Android中RxJava与LiveData的结合使用
android·echarts·rxjava
小小愿望5 天前
ECharts 实战技巧:揭秘 X 轴末项标签 “莫名加粗” 之谜及破解之道
前端·echarts
じòぴé南冸じょうげん5 天前
解决ECharts图表上显示的最小刻度不是设置的min值的问题
前端·javascript·echarts
我在北国不背锅6 天前
基于Java的Markdown转Word工具(标题、段落、表格、Echarts图等)
java·word·echarts·markdown
码界筑梦坊6 天前
135-基于Spark的抖音数据分析热度预测系统
大数据·python·数据分析·spark·毕业设计·echarts
安卓开发者6 天前
RxJava 核心概念解析:构建响应式Android应用的基石
android·echarts·rxjava
码界筑梦坊10 天前
105-基于Flask的珍爱网相亲数据可视化分析系统
python·ai·信息可视化·flask·毕业设计·echarts
安卓开发者10 天前
深入理解Android Kotlin Flow:响应式编程的现代实践
android·kotlin·echarts
别来无恙14912 天前
Spring Boot + ECharts 极简整合指南:从零实现动态数据可视化大屏
spring boot·信息可视化·echarts