动态添加删除echarts的series

# 直接帖答案

主要是 updateSeries 方法，通过 setOption 的第二个参数来选择合并，具体说明看这里的替换合并案例，注意 id 为必填项

import * as echarts from "echarts";

var chartDom = document.getElementById("main");
var myChart = echarts.init(chartDom);
var option;

option = {
  title: {
    text: "Stacked Line",
  },
  tooltip: {
    trigger: "axis",
  },
  legend: {
    data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true,
  },
  toolbox: {
    feature: {
      saveAsImage: {},
    },
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      name: "Email",
      id: "email",
      type: "line",
      stack: "Total",
      data: [120, 132, 101, 134, 90, 230, 210],
    },
    {
      name: "Union Ads",
      id: "unionAds",
      type: "line",
      stack: "Total",
      data: [220, 182, 191, 234, 290, 330, 310],
    },
  ],
};

option && myChart.setOption(option);

function updateSeries() {
  const series = [
    {
      name: "Email",
      id: "email",
      type: "line",
      stack: "Total",
      data: [120, 132, 101, 134, 90, 230, 210],
    },
    {
      name: "Direct",
      id: "Direct",
      type: "line",
      stack: "Total",
      data: [320, 332, 301, 334, 390, 330, 320],
    },
  ];

  myChart.setOption(
    {
      series,
    },
    { replaceMerge: ["series"] }
  );
}

# 前言

今天接到一个需求，通过给表格的列名添加多选框，选择一列数据就给 echarts 添加一个 serie，来实现动态加载

# 实际操作

当我实际做的时候发现下面这样并不管用

myChart.setOption({
      series:newSeries,
    });

发现它可以新增但并不会删除，于是乎就想到了图例，通过图例的选中状态可以控制折线的显示跟隐藏，然后再通过修改 data 来删除图例。于是就有了下面的代码，这样做是可行的，但是在删除的时候折线虽然没有了，图例也没有了但是 series 的数据还是存在的，总觉得不合适

<template>
  <div class="data-display">
    <div v-if="showEchart" ref="echartRef" class="echart"></div>
    <div v-if="showTable" class="table" :style="{
      borderRadius: 'var(--el-border-radius-base)'
    }">
      <el-auto-resizer>
        <template #default="{ height, width }">
          <el-table-v2 :columns="columns" :data="tableData" :width="width" :height="height" fixed />
        </template>
      </el-auto-resizer>
    </div>
  </div>
</template>

<script setup lang="ts">
import { h, onMounted, ref } from 'vue';
import { init, EChartsType, EChartsOption, SeriesOption, DataZoomComponentOption } from 'echarts';
import { Column, ElCheckbox } from 'element-plus';
import { Alignment } from 'element-plus/es/components/table-v2/src/constants';

interface DataDisplay {
  times?: Array<string>;
  datas: Array<DisplayValue>;
}

interface DisplayValue {
  name: string;
  unit: string;
  values: number[];
  value: number;
}

interface ColumnsInfo {
  isChecked: boolean;
  max?: number;
  min?: number;
  difference?: number;
  unit?: string;
  name: string;
}

defineOptions({
  name: 'data-display'
});

const data: DataDisplay = {
  times: Array.from({ length: 21 }, (v, k) => k + 1),
  datas: [
    {
      name: 'test1',
      unit: 'u1',
      values: Array.from({ length: 21 }, () => Math.floor(Math.random() * 10000))
    },
    {
      name: 'test2',
      unit: 'u2',
      values: Array.from({ length: 21 }, () => Math.floor(Math.random() * 10))
    },
    {
      name: 'test3',
      unit: 'u3',
      values: Array.from({ length: 21 }, () => Math.floor(Math.random() * 1000))
    },
    {
      name: 'test4',
      unit: 'u4',
      values: Array.from({ length: 21 }, () => Math.floor(Math.random() * 10000))
    },
    {
      name: 'test5',
      unit: 'u5',
      values: Array.from({ length: 21 }, () => Math.floor(Math.random() * 100))
    },
    {
      name: 'test6',
      unit: 'u6',
      values: Array.from({ length: 21 }, () => Math.floor(Math.random() * 100))
    },
    {
      name: 'test7',
      unit: 'u6',
      values: Array.from({ length: 21 }, () => Math.floor(Math.random() * 100))
    },
    {
      name: 'test8',
      unit: 'u6',
      values: Array.from({ length: 21 }, () => Math.floor(Math.random() * 100))
    },
    {
      name: 'test9',
      unit: 'u6',
      values: Array.from({ length: 21 }, () => Math.floor(Math.random() * 100))
    },
    {
      name: 'test10',
      unit: 'u6',
      values: Array.from({ length: 21 }, () => Math.floor(Math.random() * 100))
    },
    {
      name: 'test11',
      unit: 'u6',
      values: Array.from({ length: 21 }, () => Math.floor(Math.random() * 100))
    },
    {
      name: 'test12',
      unit: 'u6',
      values: Array.from({ length: 21 }, () => Math.floor(Math.random() * 100))
    }
  ]
}

const echartRef = ref<HTMLDivElement | null>(null);
let echart: EChartsType | null = null;
let echartOptions: EChartsOption = {
  tooltip: {
    trigger: 'axis',
    formatter: params => {
      let str = '';
      params.forEach(item => {
        const rowData = tableData.find(s => s.time == item.name);
        const unit = columnsInfo.value.find(s => s.name === item.seriesName).unit;
        str += `${item.marker}${item.seriesName}: ${rowData[item.seriesName]} ${unit}<br/>`;
      });
      return str;
    }
  },
  legend: {
    itemGap: 10
  },
  grid: {
    top: '12%',
    left: '1%',
    right: '10%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: data.times
    }
  ],
  yAxis: [
    {
      type: 'value',
      max: 100,
      min: 0,
      axisLabel: {
        formatter: value => {
          // 保留小数点后两位
          return value.toFixed(2);
        }
      }
    }
  ],
  dataZoom: [
    {
      type: 'slider',
      show: true,
      start: 94,
      end: 100,
      handleSize: 8
    },
    {
      type: 'inside',
      start: 94,
      end: 100
    }
  ]
};

const showEchart = ref<boolean>(true);
const showTable = ref<boolean>(false);

const columns = ref<Array<Column>>([]);
const tableData = [];

const columnsInfo = ref<Array<ColumnsInfo>>([]);

let currentDisplayColumn = [];

function initEchart() {
  echart = init(echartRef.value);
  if (data.times.length <= 10) {
    echartOptions.dataZoom = null;
  } else {
    (echartOptions.dataZoom as DataZoomComponentOption[]).forEach(item => {
      item.start = 100 - (10 / data.times.length) * 100;
      item.end = 100;
    });
  }
  echart.setOption(echartOptions);
}

function updateEchartSerise() {
  const option = echart.getOption();
  const checkList = columnsInfo.value.filter(s => s.isChecked).map(s => s.name);

  const deleteList = currentDisplayColumn.filter(s => !checkList.includes(s));

  const selected = option.legend[0].selected;
  checkList.forEach(s => {
    selected[s] = true;
  });
  deleteList.forEach(s => {
    selected[s] = false;
  });

  currentDisplayColumn = checkList;

  const series: Array<SeriesOption> = data.datas
    .filter(s => checkList.includes(s.name))
    .map(data => {
      const option: SeriesOption = {
        name: data.name,
        type: 'line',
        data: data.values.map(val => {
          return ((val / columnsInfo.value.find(s => s.name === data.name).difference) * 100).toFixed(2);
        })
      };
      return option;
    });

  echart.setOption({
    series,
    legend: { data: checkList, selected }
  });
}

function initTable() {
  const propNames = [];
  const newData = data.datas.map(item => {
    columnsInfo.value.push({
      isChecked: false,
      name: item.name
    });

    propNames.push(item.name);
    return {
      title: `${item.name}(${item.unit})`,
      dataKey: item.name,
      width: 150,
      minWidth: 150,
      align: Alignment.CENTER
    };
  });
  columns.value = [
    {
      title: '时间',
      dataKey: 'time',
      width: 150,
      align: Alignment.CENTER
    },
    ...newData
  ];
  columns.value.forEach(item => {
    item.headerCellRenderer = ({ column }) => {
      if (column.dataKey === 'time') {
        return h('div', column.title);
      }
      return h(ElCheckbox, {
        modelValue: columnsInfo.value.find(s => s.name === column.dataKey).isChecked,
        label: column.title,
        onChange: val => {
          columnsInfo.value.find(s => s.name === column.dataKey).isChecked = val as boolean;
          updateEchartSerise();
        }
      });
    };
  });

  propNames.forEach((name, i) => {
    const columnInfo = columnsInfo.value.find(s => s.name === name);
    columnInfo.max = Math.max(...data.datas[i].values);
    columnInfo.min = Math.min(...data.datas[i].values);
    columnInfo.difference = Math.abs(columnInfo.max) + Math.abs(columnInfo.min);
    columnInfo.unit = data.datas[i].unit;
    data.times.forEach((time, index) => {
      let rowData;
      if (tableData.find(s => s.time === time)) {
        rowData = tableData.find(s => s.time === time);
      } else {
        rowData = {
          time
        };
        tableData.push(rowData);
      }
      rowData[name] = data.datas[i].values[index];
    });
  });

  showTable.value = true;
}

onMounted(() => {
  initTable();
  if (showEchart.value) {
    initEchart();
  }
});
</script>

<style lang="scss" scoped>
.data-display {
  height: 80vh;
  padding: 0.25rem 0.5rem;

  .echart {
    width: 100%;
    min-height: 18rem;
    height: 50%;
  }

  .table {
    width: 100%;
    height: 40%;
    border: 1px solid var(--el-border-color);
    border-radius: 0;
  }
}
</style>

于是就网上查怎么动态修改始终没有看到结果，还看到有说 series 数据没法删除，于是乎就去翻源码看看是不是真的，看源码才发现 setOption 方法有方法重载，第二个参数可以 SetOptionOpts 类型就去研究了一下，于是乎就有了下面的版本的 updateEchartSeries 方法，简简修改了两行配置代码就能删除一大堆逻辑代码，顿时间就舒服了😋

function updateEchartSeries() {
  const checkList = columnsInfo.value.filter(s => s.isChecked).map(s => s.name);
  const series: Array<SeriesOption> = data.datas
    .filter(s => checkList.includes(s.name))
    .map(data => {
      const option: SeriesOption = {
        name: data.name,
        type: 'line',
        id: data.name,
        data: data.values.map(val => {
          return ((val / columnsInfo.value.find(s => s.name === data.name).difference) * 100).toFixed(2);
        })
      };
      return option;
    });

  echart.setOption({
    series,
  }, { replaceMerge: ['series'] });

}