在Vue-watch中，echarts.resize()不起作用

Question

在vue中，我观察了宽度（侧边菜单flex的原因），当值改变时，它会调用resize方法，但它不起作用。

watch: {
    mainWidth: {
      handler (val) {
        console.log('watch: ', val)
          this.chart.resize()
      }
    }
  }

我可以捕捉到值的变化，但图表没有调整大小

我尝试了nextTick和setTimeout，但失败了。我希望调整大小方法会起作用。

Answer 1

我不知道你是如何实现 echart 的，无论你使用的是 npm vue 包还是 core js，但如果问题与容器更改侦听器有关 你可以使用ResizeObserver

将监听器绑定到保存echart的容器上，并在其中调用resize。

类似这样的：

const container = document.getElementById("containerId");

var chart = echarts.init(container);

const resizeObserver = new ResizeObserver(entries => {
  chart.resize();  
});

resizeObserver.observe(container)