echarts图例全选功能实现

需求说明

图标涉及图例较多，为方便操作，故新增全选/全取消功能，通过全选框控制全选/全取消

 

实现思路

主要用到echarts > legend > selected属性以及legendselectchanged方法。当全选/全取消时通过selected属性动态赋值，改变图例选中状态。legendselectchanged方法用来动态监听单个图例点击状态，使得图例选中状态与全选框状态保持一致：若至少有一个图例没选中，则全选框不勾选，若所有图例均选中，则全选框勾选。

 

开发须知

selected属性对应值为json对象，例：

{ 图例名称：true/false // 是否选中}

selected属性默认所有图例均选中，若需展示指定图例，可将其他不需展示的图例设置为false，例：

// 不展示图例1-3
{
  图例1: false,
  图例2: false,
  图例3: false
}

 

核心代码

// 全选框html片段（本例采用vue开发）
<p><input type="checkbox"  :checked="checkAll" @change="selectAll"/> 全选</p>

 

// 对selected动态赋值
    selectAll() {
      this.checkAll = !this.checkAll; // 全选框状态取反
      // 获取图列数据
      const legendData = this.legendArr; // 本例legendArr为动态赋值的图例数组
      let checkData = {} // 中转空对象，用来存放最新状态的selected值
      for (let key in legendData) {
        checkData[legendData[key]] = this.checkAll // 将全选框状态赋值给每个图例
      }

      this.options.legend.selected = checkData; // 动态赋值selected值
      this.chartLine.setOption(this.options); 
  }

 

// 绑定legendselectedchanged方法到图表实例，以便对单个图例选中状态发生变化时修改全选框勾选状态
  this.chartLine.on('legendselectchanged', obj => {
        const { selected, name } = obj; // selected：包含所有图例的状态，name：当前点击图例的名称
        if (selected){
          // 如果当前图例为false，设置全选状态为false
          if (selected[name] === false) {
            this.checkAll = false;
          } else {// 否则对所有图例做遍历，若图例为true的个数=图例总数，设置全选状态为true
            let flagnum = 0; // 标记图例为true的个数
            if (this.legendArr && this.legendArr.length > 0) {// legendArr为图例数组，因本例中图例为动态数组且已赋值，所以直接可用
              this.legendArr.forEach(key => {
                if (selected[key] === true) {
                  flagnum += 1;
                }
              });
              if (flagnum === this.legendArr.length) {
                this.checkAll = true;
              }
            } 
          }
        }
      });