data() {
return {
chartInstance: ''
}
},
mounted() {
if(!this.chartInstance) this.chartInstance = echarts.init(this.$refs.myChart)
this.chartInstance.setOption(option)
}
如图,我将echarts实例赋值给了响应式的变量this.chartInstance,这便是在vue3中出错的原因,即不能将echarts实例赋值给响应式变量。
解决办法:
①
this.$echarts.init(this.$refs.myChart).setOption(option)
②如果我们需要多次在一个dom元素上绘制echarts,又不想让元素多次echarts实例化,可以使用getInstanceByDom方法
let el = this.$refs.myChart
if(this.$echarts.getInstanceByDom(el)) this.$echarts.getInstanceByDom(el).setOption(option)
else this.$echarts.init(el).setOption(option)