Vue中ECharts 响应式改变

在使用echarts时，因为绘制完成的canvas大小不能随着浏览器窗口大小在动态改变，目前我的解决方案是在挂载的时候监听窗口大小改变

 mounted() {
    window.onresize = () => {
         
    }
 }

然后在初始化echarts时将echartsInstance保存

 // ...省略配置
 const iaChart = this.iaChart = echarts.init(this.$refs.IdentifyAreas);
 iaChart.setOption(option);

echarts对实例化对象提供了resize方法

Vue中ECharts 响应式改变

在之前的挂载监听的onsize方法中调用即可。

window.onresize = () => {
   this.iaChart.resize();
}

不过也存在一个问题，就是旭日图文字和图形有点不同步

Vue中ECharts 响应式改变