vue中使用echarts，数据更新后无法重新绘制图表？

Question

 getTransformerSubstation3 () {
        // this.myChart3.clear()
        this.myChart3 = this.$echarts.init(document.getElementById('oneChart3'))
        api
          .getTransformerSubstation3(this.bdzparams)
          .then(data => {

            this.transformerSubstationList3 = data
            let option = {
              yAxis: {
                type: 'category',
                data: this.transformerSubstationList3.data.Asix,
              },
              xAxis: {
                type: 'value',
              },
              series: [
                {
                  data: this.transformerSubstationList3.data.data0,
                  type: 'bar',
                  itemStyle: {
                    normal: {
                      color: '#32b16c',
                      label: {
                        show: true,
                        position: 'right',
                        textStyle: {
                          color: 'black',
                          fontSize: 10,
                        },
                      },
                    },
                  },
                  barWidth: 20,
                },
              ],
              grid: {
                x: '3%',
                y: '20%',
                bottom: '3%',
                containLabel: true,
              },
      
                },
              },
            }
            this.myChart3.setOption(option)
          })
      },

Answer 1

引用 皆我百晓生 小程序回复内容作答：
在Vue中使用echarts时，如果想要更新数据后重新绘制图表，可以先调用clear方法清空已有图表，并重新初始化myChart3。

下面是修改后的代码：

getTransformerSubstation3() {
  if (this.myChart3) {
    this.myChart3.clear();
  }
  this.myChart3 = this.$echarts.init(document.getElementById('oneChart3'));
  api.getTransformerSubstation3(this.bdzparams).then((data) => {
    this.transformerSubstationList3 = data;
    let option = {
      yAxis: {
        type: 'category',
        data: this.transformerSubstationList3.data.Asix,
      },
      xAxis: {
        type: 'value',
      },
      series: [
        {
          data: this.transformerSubstationList3.data.data0,
          type: 'bar',
          itemStyle: {
            normal: {
              color: '#32b16c',
              label: {
                show: true,
                position: 'right',
                textStyle: {
                  color: 'black',
                  fontSize: 10,
                },
              },
            },
          },
          barWidth: 20,
        },
      ],
      grid: {
        x: '3%',
        y: '20%',
        bottom: '3%',
        containLabel: true,
      },
    };
    this.myChart3.setOption(option);
  });
},

在每次更新数据之前，先判断myChart3是否存在，如果存在则调用clear方法清空已有图表。然后重新初始化myChart3并设置新的数据和配置项，最后调用setOption方法重新绘制图表。这样就可以实现数据更新后重新绘制图表了。