vue+antdv 用多选框自定义ecahrts折线的显示和隐藏前言目前在项目中遇到一个看似有难度实际很简单的需求，用

前言

目前在项目中遇到一个看似有难度实际很简单的需求，用多选框自定义ecahrts折线的显示和隐藏。

设计图如下：

开源链接

思路

使用过的echarts的同志看到这个需求相比可能会觉得很棘手，但如果能够熟练echarts的配置项，会发现简单的直拍大腿。我们知道echarts是只能用legend来显示和隐藏曲线的。那我们能不能通过控制legend来间接的控制折线的显示和隐藏？让我们认真看一下echarts的配置项，我们找到这样一个配置项可以符合我们的思路。

因此，只需要通过多选框控制selected就可以实现这个功能了。

It's time to show code

html

 <a-checkbox
      :indeterminate="indeterminate"
      @change="onCheckAllChange"
      :checked="checkAll"
    >
      全部
    </a-checkbox>
    <a-checkbox-group
      class="checkbox"
      v-model="checkedList"
      @change="changeCheckbox"
      :options="plainOptions"
    />

data

const plainOptions = ['IN平均值', 'OUT平均值', 'IN最大值', 'OUT最大值'];
const defaultCheckedList = ['IN平均值', 'OUT平均值', 'IN最大值', 'OUT最大值'];
const defaultSelected = { IN平均值: true, OUT平均值: true, IN最大值: true, OUT最大

option: {},   　　　　　　　　　　　　//echarts的option
checkedList: defaultCheckedList,
indeterminate: false,
checkAll: true,
plainOptions,
selected: defaultSelected,

methods

onCheckAllChange(e) {
      Object.assign(this, {
        checkedList: e.target.checked ? plainOptions : [],
        indeterminate: false,
        checkAll: e.target.checked,
      });
      let legendSelecteds = {};
      this.option.legend.data.map(item => {
        if (this.checkedList.includes(item)) {
          legendSelecteds[item] = true;
        } else {
          legendSelecteds[item] = false;
        }
      });
      this.selected = legendSelecteds;
      //赋值后要重新渲染折线
      this.$nextTick(() => {
        setTimeout(() => {
          this.initLine();
        }, 500);
      });
    },
    changeCheckbox(checkedList) {
      console.log(checkedList);
      this.indeterminate = !!checkedList.length && checkedList.length < plainOptions.length;
      this.checkAll = checkedList.length === plainOptions.length;
      let legendSelecteds = {};
      this.option.legend.data.map(item => {
        if (checkedList.includes(item)) {
          legendSelecteds[item] = true;
        } else {
          legendSelecteds[item] = false;
        }
      });
      this.selected = legendSelecteds;
      
      this.$nextTick(() => {
        setTimeout(() => {
          this.initLine();
        }, 500);
      });
    },