优化Echarts自带的图例点击事件，点击什么显示什么

背景

开发需要改动一下Echarts自带的图例点击事件，默认所带的效果是：点击什么隐藏什么，而需求则为点击什么显示什么，则需要重写其图例的触发事件函数。

原理

Echarts在检测到图例点击时，将触发legendselectchanged事件，提供的参数包括：

1. name，点击的图例名。

2. seleced: {name1: value1, name2: value2, ...}，所有图例的选中状态。
   其中name为图例名称，value取true | false，表示该项在点击后处于选中状态还是未选中状态。

3. 触发事件chart.on("legendselectchanged", (params)=>{})

4. chart.dispatchAction，echarts中支持的图表行为，通过dispatchAction触发。

通过该事件，我们可以对Echarts的图例点击效果作修改，规则包括：

1. （初始）全选时，点击图例中的某项，将只显示该项而隐藏其他项
2. 当唯一显示的项目被取消选中时，恢复为全选状态

例如：点击图例的第三项

1. 点击前：Yes，Yes，Yes，Yes，Yes

   • 修改前：Yes，Yes，No，Yes，Yes
   • 修改后：No，No，Yes，No，No

2. 点击前：No，No，Yes，No，No

   • 修改前：No，No，No，No，No
   • 修改后：Yes，Yes，Yes，Yes，Yes

代码如下（Vue）

mounted

 mounted() {
   setTimeout(() => {
        this.chart = echarts.init(this.$refs.chart)
        this.chart.on('legendselectchanged', (params) => {
          let selected = params.selected;
          let legend = params.name;
      // 使用legendToggleSelect动作将重新触发legendselectchanged事件，导致本函数重复运行从而丢失selected对象
          if (selected !== undefined) {
            if (this.isFirstUnSelect(selected, legend)) {
              console.log(selected)
              console.log(legend)
              this.triggerAction('legendToggleSelect', selected);
            } else if (this.isAllUnSelected(selected)) {
              this.triggerAction('legendSelect', selected);
            }
          }

        })

    }, 500)
  },

methods

triggerAction (action, selected) {
  let legend = [];
  for (let name in selected) {
    if (selected.hasOwnProperty(name)) {
      legend.push({name: name});
    }
  }
  this.chart.dispatchAction({
    type: action,
    batch: legend
  });
},

isFirstUnSelect (selected, legend) {
  if (selected[legend] === true) return false;
  let unSelectedCount = 0;
  for (let name in selected) {
    if (!selected.hasOwnProperty(name)) {
      continue;
    }
    if (selected[name] === false) {
      unSelectedCount++;
    }
  }
  return unSelectedCount === 1;
},

isAllUnSelected (selected) {
  let selectedCount = 0;
  for (let name in selected) {
    if (!selected.hasOwnProperty(name)) {
      continue;
    }
    // selected对象内true代表选中，false代表未选中
    if (selected[name] === true) {
      selectedCount++;
    }
  }
  return selectedCount === 0;
},

附录A-Echarts中图表行为汇总

1.highlight 高亮指定的数据图形

dispatchAction({
















    type: 'highlight',
    // 可选，系列 index，可以是一个数组指定多个系列




    seriesIndex?: number|Array,




    // 可选，系列名称，可以是一个数组指定多个系列




    seriesName?: string|Array,




    // 可选，数据的 index

    dataIndex?: number,




    // 可选，数据的 名称

    name?: string




})

2.downplay 取消高亮指定的数据图形

dispatchAction({
















    type: 'downplay',
    // 可选，系列 index，可以是一个数组指定多个系列




    seriesIndex?: number|Array,




    // 可选，系列名称，可以是一个数组指定多个系列




    seriesName?: string|Array,




    // 可选，数据的 index

    dataIndex?: number,




    // 可选，数据的 名称

    name?: string




})

3.图例相关的行为，必须引入图例组件之后才能使用

1）legendSelect（选中图例）

dispatchAction({
















    type: 'legendSelect',
    // 图例名称


    name: string


})

2）legendUnSelect（取消选中图例）

dispatchAction({
















    type: 'legendUnSelect',
    // 图例名称


    name: string


})

3）legendToggleSelect（切换图例的选中状态）

dispatchAction({
















    type: 'legendToggleSelect',
    // 图例名称


    name: string


})

4）legendScroll（控制图例的滚动），当legend.type是scroll的时候有效

dispatchAction({
















    type: 'legendScroll',
    scrollDataIndex: number,
    legendId: string
})

4. 提示框组件相关行为，必须引入提示框组件之后才能引用

1）showTip（显示提示框）
有两种使用方式
A：指定在相对容器的位置处显示提示框，如果指定的位置无法显示则无效。

dispatchAction({
















    type:'showTip',
    //屏幕上的x坐标
    x: number,
    //屏幕上的y坐标
    y: number,
    //本次显示tooltip的位置，只在本次action生效。缺省则使用option中定义的tooltip位置
    position: Array.<number> | String | Function
})

B: 指定数据图形，根据tooltip的配置项进行显示提示框

dispatch({
    type: 'showTip',
    // 系列的 index，在 tooltip 的 trigger 为 axis 的时候可选。
    seriesIndex?: number,
    // 数据的 index，如果不指定也可以通过 name 属性根据名称指定数据
    dataIndex?: number,
    // 可选，数据名称，在有 dataIndex 的时候忽略
    name?: string,
    // 本次显示 tooltip 的位置。只在本次 action 中生效。
    // 缺省则使用 option 中定义的 tooltip 位置。
    position: Array.<number>|string|Function,
})

2）hideTip 隐藏提示框

dispatchAction({
















    type:'hideTip'
})

5.数据区域缩放组件、视觉映射组件、时间轴组件、工具栏组件相关行为

1. 数据区域缩放组件,必须引入数据区域缩放组件之后才能使用（dataZoom）

dispatchAction({
















    type: 'dataZoom',
    // 可选，dataZoom 组件的 index，多个 dataZoom 组件时有用，默认为 0
    dataZoomIndex: number,
    // 开始位置的百分比，0 - 100
    start: number,
    // 结束位置的百分比，0 - 100
    end: number,
    // 开始位置的数值
    startValue: number,
    // 结束位置的数值
    endValue: number
})

2.关闭或启动toolbox中的dataZoom的刷选状态（takeGlobalCursor）

myChart.dispatchAction({
    type: 'takeGlobalCursor',

    key: 'dataZoomSelect',
    // 启动或关闭
    dataZoomSelectActive: true
});

3.视觉映射组件，只能在引入视觉映射组件之后才能使用（visualMap）
选取映射的数值范围：selectDataRange

dispatchAction({
















    type: 'selectDataRange',
    // 可选，visualMap 组件的 index，多个 visualMap 组件时有用，默认为 0
    visualMapIndex: number,
    // 连续型 visualMap 和 离散型 visualMap 不一样
    // 连续型的是一个表示数值范围的数组。
    // 离散型的是一个对象，键值是类目或者分段的索引。值是 `true`, `false`
    selected: Object|Array
})

4.时间轴组件，同理引入之后才能使用
1）设置当前的时间点：timelineChange

dispatchAction({
















    type: 'timelineChange',
    // 时间点的 index
    currentIndex: number
})

2)切换时间轴的播放状态：timelinePlayChange

dispatchAction({
















    type: 'timelinePlayChange',
    // 播放状态，true 为自动播放
    playState: boolean
})

5.工具栏组件相关行为，同理引入之后才能使用
重置option：restore

dispatchAction({
















    type: 'restore'
})

6.饼图、地图组件、地图图表、关系图、区域选择相关行为
1）饼图

• 选中指定的饼图扇形（pieSelect）
• 取消选中指定的饼图扇形（pieUnSelect）
• 切换指定的选中的饼图扇形状态（pieToggleSelect）

dispatchAction({
















    type: 'pieSelect | pieUnSelect | pieToggleSelect',
    // 可选，系列 index，可以是一个数组指定多个系列




    seriesIndex?: number|Array,




    // 可选，系列名称，可以是一个数组指定多个系列




    seriesName?: string|Array,




    // 数据的 index，如果不指定也可以通过 name 属性根据名称指定数据


    dataIndex?: number,




    // 可选，数据名称，在有 dataIndex 的时候忽略


    name?: string




})

2)地图组件

• 选中指定的地图区域（geoSelect）
• 取消选中的指定地图区域（geoUnSelect）
• 切换指定的地图区域的选中状态（geoToggleSelect）

dispatchAction({
















    type: 'geoSelect | geoUnSelect | geoToggleSelect',
    // 可选，系列 index，可以是一个数组指定多个系列




    seriesIndex?: number|Array,




    // 可选，系列名称，可以是一个数组指定多个系列




    seriesName?: string|Array,




    // 数据的 index，如果不指定也可以通过 name 属性根据名称指定数据


    dataIndex?: number,




    // 可选，数据名称，在有 dataIndex 的时候忽略


    name?: string




})

3)地图图表组件
同地图组件类似，也有三个行为，如下：

• 选中指定的地图区域（mapSelect）
• 取消选中的指定地图区域（mapUnSelect）
• 切换指定的地图区域的选中状态（mapToggleSelect）

dispatchAction({
















    type: 'mapToggleSelect',
    // 可选，系列 index，可以是一个数组指定多个系列




    seriesIndex?: number|Array,




    // 可选，系列名称，可以是一个数组指定多个系列




    seriesName?: string|Array,




    // 数据的 index，如果不指定也可以通过 name 属性根据名称指定数据


    dataIndex?: number,




    // 可选，数据名称，在有 dataIndex 的时候忽略


    name?: string




})

4)关系图
关系图行为使用，也得引入关系图

• focusNodeAdjacency 将指定的节点以及其周边相邻的节点高亮
• unFocusNodeAdjacency 将指定的节点以及其周边相邻的节点取消高亮

5）区域选择相关的行为

• brush：触发此action可设置或删除chart中的选框
• takeGlobalCursor：刷选模式的开关。使用此Action可将当前鼠标变为刷选状态

dispatchAction({
















    type: 'takeGlobalCursor',

    // 如果想变为“可刷选状态”，必须设置。不设置则会关闭“可刷选状态”。
    key: 'brush',
    brushOption: {
        // 参见 brush 组件的 brushType。如果设置为 false 则关闭“可刷选状态”。
        brushType: string,
        // 参见 brush 组件的 brushMode。如果不设置，则取 brush 组件的 brushMode 设置。
        brushMode: string
    }
});

参考文章

【简书-Apple_ufo】www.jianshu.com/p/18c0782f2…

【CSDN-tfjy1997】blog.csdn.net/wgf1997/art…

结语

又是码代码的一天~

如果有任何疑问欢迎评论和私信；

伙计们如果觉得有用，别忘了三连呀~对我至关重要；