Vue中实现通过外部的CheckedBox对echarts（legend）进行动态显示/隐藏

Posted 2021-09-12 萌萌的DDD

需求原型

 开发工作中有一项，需使用复选框控制echarts的显隐，找了很多办法没有实现

直到看到一篇文章，echarts配置项中自带legend可以控制图标的数据显示隐藏

因此我们可以通过checkBox的来对selected对象进行操作来修改图标的状态

首先配置legend并让他不显示 

  legend: {
          data: ['水位', '流量', '温度'],
          show: false
        },

其次通过组件的checkBox组件的click方法获得所有选中内容

  legendToggle(names) {
      const legendSelects = {}
      //如果包含相应选中值则配置为true
      this.options.legend.data.forEach(item => {
        if (names.includes(item)) {
          legendSelects.[item] = true
        } else {
          legendSelects.[item] = false
        }
      })
      // 添加到echarts中
      this.options.legend.selected = legendSelects
      // 渲染刷新
      this.$nextTick(() => {
        setTimeout(() => {
          this.init()
        }, 500)
      })
    }

需求不难，但是可能对配置项了解较少得人，会找不到实现的方法