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

原因

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);
},
posted @ 2022-12-02 13:16  小诸葛kl  阅读(1186)  评论(0)    收藏  举报