Echarts柱状图例--手写实现legend图例支持多选、单选、联动、滚动等功能

Echarts柱状图例–手写实现legend图例

目的

官网给的图例支持的翻页、滚动等功能，在样式方便一般都无法更改，实际开发时很难满足UI样式需求。

主要实现功能

1. 图例可分列排布
2. 可实现全选/反全选
3. 图例点击事件可与echarts图形可联动
4. 可滚动翻页

主要实现效果

主要思想

利用官方给的legend的selected配置项，来控制图例选择状态表。
官方的表述如下：

意思为当给某一个系列设置为true时，则能控制对应的图为展示状态，本例中对应的数据系列为：

其中参数名与legend的data相互对应，即可控制对应系列展示隐藏。

主要方法

1. Legend配置

 legend: {
          show: false,//隐藏默认图例
          selected: legendData.selected,
          data: legendData.data
         }

2. 点击选择

// 图例自定义点击事件
    toggleItem(item, index, type) {
    //this.legendData.checkList[index].checks是为了控制手写legend的css样式
      this.legendData.checkList[index].check =
        !this.legendData.checkList[index].check;
    //  this.legendData.selected 是为了控制饼图的图块与legend的点击联动
      this.legendData.selected[item.name] =
        !this.legendData.selected[item.name];
     // this.selectAll判断是否全选   
      this.selectAll = this.legendData.checkList.every((item) => item.check);
      this.reloadChart(type);
    },

3. 全选与反全选

    toggleAll(type) {
      this.selectAll = !this.selectAll;
      for (const key in this.legendData.selected) {
        // hasOwnProperty 方法来确保遍历的属性是 this.legendData.selected 自身的属性
        if (this.legendData.selected.hasOwnProperty(key)) {
          this.legendData.selected[key] = this.selectAll; // 将每一项设为this.selectAll的值
        }
      }
      this.legendData.checkList.forEach((item) => {
        item.check = this.selectAll;
      });
    },

4. 手动生成legend图例

//legendItem就是上述的this.legendData.checkList数组
    <div class="legend_column_content">
            <div class="legend_column">
              <div class="legend_body">
                <div
                  v-for="(item, index) in legendItem"
                  :key="item.name"
                  @click="toggleItem(item, index, 'pie')"
                  class="legend_item"
                >
                  <div
                    class="legend_item_circle"
                    :style="{
                      backgroundColor: item.check ? getColor(index) : '#CCCCCC',
                    }"
                  ></div>
                  <div
                    class="legend_item_label"
                    :style="{
                      color: item.check ? '#5c5c5c' : '#CCCCCC',
                    }"
                  >
                    <span class="legend_item_labe_text" :title="item.name">
                      {{ item.name }}</span
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>

通过上述一系列操作即可实现手写legend并支持反选全选等操作，在此基础上还能实现一下翻页、更改滚动条样式等操作，并且测试过对于线形图与柱状图同样适用。手写legend主要基于div盒子模型遍历生成，图例部分自己维护，避免了官网配置项使用的局限性，能完成很多操作。
如有不对的情况欢迎大家指正。

源码

源码部分已上传，基于vue2+js+antd完成，有需要的朋友们可自行下载