echarts 点击legend只显示当前，隐藏其他

原莱_

已于 2022-08-05 10:53:39 修改

阅读量5.6k

点赞数 6

分类专栏： echarts 文章标签： echarts javascript ecmascript

于 2022-08-05 10:16:07 首次发布

本文链接：https://blog.csdn.net/qq_40934617/article/details/126164036

版权

echarts 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了如何使用ECharts库实现图例点击事件，使得所有图例默认为选中状态，点击时切换显示状态，并支持取消选中所有图例和仅选中当前图例的功能。通过监听`legendselectchanged`事件，细致判断操作类型并执行相应的图例控制操作。

摘要由CSDN通过智能技术生成

场景：

初始化渲染所有图例，echarts默认点击图例就隐藏该图例
要实现：

所有图例都是选中态，当点击一个图例时，取消其他图例，仅显示当前图例
点击该图例后，所有图例都是取消选中态时，选中全部图例

解决方法

监听图例点击事件, 判断当前点击是选中操作还是取消操作
判断是不是全部图例都选中时的取消操作
- 选中当前图例，取消选中剩余图例
判断是不是取消之后就没有选中图例时的取消操作
- 选中全部图例

const legendselect1 = legendData => {
//监听图例点击事件
 myChart.on('legendselectchanged', obj => {
 	//点击之后所有被选中的图例
    const selectedobj = Object.keys(obj.selected).filter(item => obj.selected[item])
    //点击的图例是否在 所有被选中的图例 中，也就是判断当前点击是选中操作还是取消操作
    const flag = (selectedobj.indexOf(obj.name) > -1)
    //当是取消操作 && 取消前所有图例都是选中状态
    //选中当前图例，取消选中剩余图例
    if (!flag && (selectedobj.length + 1 === legendData.length)) {
      for (let i = 0; i < legendData.length; i++) {
        // 显示当前legend 关闭非当前legend
        if (obj.name === legendData[i]) {
          myChart.dispatchAction({
            type: 'legendSelect',
            name: legendData[i],
          })
        } else {
          myChart.dispatchAction({
            type: 'legendUnSelect',
            name: legendData[i],
          })
        }
      }
    }
    //当是取消操作 && 取消后就没有图例是选中状态
    //选中所有图例
    if(!flag && !selectedobj.length ){
      for (var i = 0; i < legendData.length; i++) {
        myChart.dispatchAction({
            type: 'legendSelect',
            name: legendData[i]
        });
      }
    }
  })
}
legendselect1(['item1','item2','item3','item4'])
//参数[]=>图例data数据