vue2 + echarts 几百条length 自定义切换, length多行多列同时切换

效果如下:
当图例大于指定条数, 即可展示切换按钮;

主要是这3个方法: this.updateChart();this.updateChart();this.updateChart();

<template>
  <!-- 设备监测 -->
  <div id="option_modes">
    <line-chart :option="optionChart" :height="'100%'"></line-chart>
  </div>
</template>
<script>
import lineChart from "@/components/Charts/LineChart";
const fn5 = function() {
  var colorValue = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";
  var colorArray = colorValue.split(",");
  var color = "#";
  for (var i = 0; i < 6; i++) {
    color += colorArray[Math.floor(Math.random() * 16)];
  }
  return color;
};
export default {
  components: {
    lineChart
  },
  props: {},
  computed: {
    echartsData() {
      return this.$parent.echartsData || {};
    }
  },
  watch: {
    echartsData: {
      handler(val) {
        // console.log('valval',val)
        if (val && JSON.stringify(val) != "{}") {
          this.getDataAnalysis(val);
        }
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      loading: true,
      optionChart: {},
      currentPage: 0,
      itemsPerPage: 20,
      totalItems: 0,
      seriesData: [],
      legendData: [],
      yAxisDatas: [],
      xAxisDatas: [],
      unitLists: [],
      unitDatas: [],
      chartObj: {}
    };
  },
  created() {},
  methods: {
    getDataAnalysis(obj) {
      this.chartObj = obj;
      let seriesData = [],
        yAxisDatas = [],
        xAxisDatas = [],
        unitLists = [],
        unitDatas = [];
      let subtypeLists = this.uniqueQc(obj.subType); //获取所有的不同单位名称，用于设置y轴的数量
      subtypeLists.forEach((ele_two, ind_two) => {
        let uIndex = obj.subType.findIndex(item => item == ele_two); //获取当前子类型在查询参数中的下标位置
        let uName = obj.units[uIndex]; //获取对应下标位置的单位
        let unitInd = unitLists.find(item => item.name == uName); //去重当前展示的子类型中单位，获取不重复的子类型单位（同单位的y轴设置刻度一样）
        if (!unitInd) {
          let obj = {
            name: uName,
            arrs: [] //同单位的数值集合
          };
          unitLists.push(obj); //获取去重后的单位列表
        }
        unitDatas.push(uName);
        let posType = "left",
          offset = 0;
        offset = ind_two * 42;
        yAxisDatas.push({
          name: ele_two + " (" + uName + ")",
          nameLocation: "center",
          nameGap: 23,
          type: "value",
          alignTicks: true,
          position: posType,
          offset: offset,
          axisLabel: {
            textStyle: {
              color: "#b2b8bf"
            }
          },
          // 分割线
          splitLine: {
            lineStyle: {
              color: "rgba(229,233,237,1)"
            }
          }
        });
      });
      obj.dataVals.forEach((data, index) => {
        // 取相同单位的子类型测点，保持同单位的y轴坐标相等（获取所有同单位的数组，取合集中最大值）
        let findUnit_ind = unitLists.findIndex(
          item => item.name == obj.units[index]
        );
        if (findUnit_ind != -1) {
          unitLists[findUnit_ind].arrs = unitLists[findUnit_ind].arrs.concat(
            data
          );
        }
        // 循环查询获取值得数组，渲染页面折线图数据
        let colorInd = fn5();
        seriesData.push({
          name: obj.names[index],
          type: "line",
          connectNulls: true,
          showSymbol: false,
          lineStyle: {
            normal: {
              color: colorInd
            }
          },
          itemStyle: {
            normal: {
              color: colorInd
            }
          },
          data: data
        });
        let yName = obj.subType[index] + " (" + obj.units[index] + ")";
        let yIndex = yAxisDatas.findIndex(item => item.name == yName);
        if (yIndex != -1) {
          this.$set(seriesData[index], "yAxisIndex", yIndex);
        } else {
          this.$set(seriesData[index], "yAxisIndex", 0);
        }
        if (obj.earlywarningvalues[index]) {
          seriesData[index].markLine = {
            data: [
              {
                yAxis: obj[index].earlywarningvalues,
                label: {
                  position: "end",
                  formatter: function(para) {
                    return para.value;
                  },
                  overflow: "break"
                }
              }
            ]
          };
        }
      });
      unitLists.forEach((ele_one, ele_ind) => {
        let arr = ele_one.arrs || [];
        let maxV = Number(arr[0]);
        for (let i = 0; i < arr.length - 1; i++) {
          maxV = maxV < Number(arr[i + 1]) ? Number(arr[i + 1]) : maxV;
        }
        yAxisDatas.forEach((ele_two, ind_two) => {
          if (ele_one.name == unitDatas[ind_two]) {
            ele_two.max = maxV;
          }
        });
      });

      obj.times.forEach(ele_three => {
        xAxisDatas.push(this.$dayjs(ele_three).format("YYYY-MM-DD HH:mm:ss"));
      });

      this.seriesData = seriesData;
      this.legendData = seriesData.map(item => item.name);
      this.totalItems = seriesData.length;
      this.yAxisDatas = yAxisDatas;
      this.xAxisDatas = xAxisDatas;
      this.unitLists = unitLists;
      this.unitDatas = unitDatas;

      this.updateChart();
    },
    updateChart() {
      const { currentPage, itemsPerPage, legendData } = this;
      const displayedItems = legendData.slice(
        currentPage * itemsPerPage,
        (currentPage + 1) * itemsPerPage
      );

      var option = {
        legend: {
          top: 0,
          padding: [10, 60, 10, 0],
          height: 100,
          itemGap: 10, //图例之间的间距
          data: displayedItems
        },
        toolbox: {
          // show: true,
          show: this.totalItems > this.itemsPerPage ? true : false,
          color: "#b2b8bf",
          right: "0", // 工具箱距离容器左侧的距离，也可以使用像素值，例如 '50px'
          top: "20",
          feature: {
            myprev: {
              show: true,
              title: "Previous Page",
              icon:
                "M65.582671 735.208665l446.417329-446.41733 446.417329 446.41733z",
              onclick: this.prevPage
            },

            mynext: {
              show: true,
              title: "Next Page",
              icon:
                "M65.582671 288.791335l446.417329 446.41733 446.417329-446.41733z",
              onclick: this.nextPage
            }
          }
        },
        // 其他配置项
        tooltip: {
          trigger: "axis",
          formatter: function(params) {
            let html = "";
            html += `<div><span>${params[0].axisValue}</span></div>`;
            params.forEach(v => {
              html += `<div style="color: #666;font-size: 14px;">
                        <span style="display:inline-block;margin-right:5px;color:${
                          v.color
                        }">${v.seriesName}</span>

                        <span style="display:inline-block;text-align:right;font-weight:700;font-size: 18px;color:${
                          v.color
                        }">${Number(v.value).toFixed(2)} ${
                this.chartObj.units[v.seriesIndex]
              }</span></div>`;
            });
            return html;
          },
          extraCssText:
            "background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;"
        },
        grid: {
          top:
            Math.ceil(this.chartObj.dataVals.length / 6) * 50 > 150
              ? 150
              : Math.ceil(this.chartObj.dataVals.length / 6) * 50,
          left: 25 * this.yAxisDatas.length,
          right: "2%",
          bottom: "5%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLabel: {
              textStyle: {
                fontSize: "14px",
                color: "#b2b8bf"
              }
            },
            axisLine: {
              lineStyle: {
                color: "#D9D9D9"
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(229,233,237,1)"
              }
            },
            data: this.xAxisDatas
          }
        ],
        yAxis: this.yAxisDatas,
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: 100
          },
          {
            start: 0,
            end: 100,
            handleIcon:
              "M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
            handleSize: "80%",
            handleStyle: {
              color: "#fff",
              shadowBlur: 3,
              shadowColor: "rgba(0, 0, 0, 0.6)",
              shadowOffsetX: 2,
              shadowOffsetY: 2
            }
          }
        ],
        series: this.seriesData
      };
      this.optionChart = option;
    },

    prevPage() {
      console.log(this.currentPage);
      if (this.currentPage > 0) {
        this.currentPage--;
        this.updateChart();
      }
    },
    nextPage() {
      if ((this.currentPage + 1) * this.itemsPerPage < this.totalItems) {
        this.currentPage++;
        this.updateChart();
      }
    },
    // 利用ES6 Set去重
    uniqueQc(arr) {
      return Array.from(new Set(arr));
    }
  }
};
</script>
<style lang="scss" scoped>
@import "~@/styles/index.scss";
#option_modes {
  width: 100%;
  height: calc(100% - 16px);
  margin-top: 16px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  background: #fff;
  min-height: 400px;
  .content_sel {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 16px;
    .sel_name {
      font-size: 14px;
      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
      color: #666666;
    }
    ::v-deep .el-checkbox {
      margin-right: 20px;
    }
    ::v-deep .el-checkbox__label {
      font-size: 14px;
      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
      font-weight: 400;
      color: #999999;
    }
  }
  .content_echart {
    width: 100%;
    height: 95%;
    overflow: auto;
  }
}
</style>