Vue3中Echart挂在全局报错问题 dataSample.js:104 Uncaught TypeError: Cannot read properties of undefined (readi

原因

Proxy 应用到了整个 ECharts 实例上的问题，不太建议把整个 ECharts 实例这样的对象放到 ref 里，容易影响到实例底层的运行。可以使用 shallowRef 替代，这样 Proxy 不会应用到 ECharts 实例底下的各个属性上。

解决方法

使用shallowRef

//原报错代码
initChart() {
    this.chart = echarts.init(this.$refs.chart, "", {
        renderer: this.type
    });
    this.chart.setOption(this.chartOption);
    this.chart.on("click", this.handleClick);
},

//修改后属性
import {shallowRef} from 'vue'

initChart() {
let chart = echarts.init(this.$refs.chart, "", {
    renderer: this.type
});
this.chart = shallowRef(chart)
chart.setOption(this.chartOption);
chart.on("click", this.handleClick);
},