echart图表清空上一次数据

问题描述：

后台接口查询数据

图表然后渲染出来

再次查询想要用新的数据重新渲染图表

问题它来了：图表一直保留老数据！！！但是神奇的是可以叠加。已经重新setOption了还是不行，在这里卡了许久找bug，我真的傻。

解决！！！

清空图表数据-----将option里的series里的data和name都删除！！（有些代码可忽略）

    clear () { // 清空上次echart数据
      for (var i = 0; i < this.option.series.length; i++) {  //置空关键！！！  清空名字和数据
        this.option.series[i].data = []
        this.option.series[i].name = ''   
      }
      this.myGridBarChart = echarts.init(this.$refs.gridBarChartElem)  //再次初始化
      this.myGridBarChart.setOption(this.option, true)  //重新setOption
      this.legendList = []  //清空之前
      this.dataList = [] //清空之前
    },

我这里是调用了图表组件，在这里用props接受后台查询的图表数据且用watch侦听变化，watch使用对象侦听形式,如下仅供参考 (option 为echart基本配置）

props:{
   barData: {
      type: Array,
      default: () => {
        return []
      }
    }
 },
watch：{
 'barData': {
      handler (newVal) {
        this.clear()
        newVal.forEach((item, i) => {
          this.legendList.push(item.card) 
          this.dataList.push(item.values)
        })
        this.option.yAxis[0].data = newVal[0].dates
        this.legendList.forEach((item, index) => {
          this.seriesData[index] = {
            name: item,
            type: 'bar',
            stack: 'num',
            emphasis: {
              focus: 'series' 
            },
            data: this.dataList[index]
          }
        })
        this.option.series = this.seriesData
        this.myGridBarChart.setOption(this.option) // 刷新图表
      },
      deep: true
    }
}