在Vue3中,解决 Echart tooltip 不显示的问题

发布时间 2023-07-21 10:21:51作者: 西塞山前白鹭飞

为什么在 Vue 中使用 ECharts 时图表显示异常?
Vue3,中使用 reactive 及 ref 会导致 ECharts 的对象实例被代理成为响应式对象,影响 ECharts 对内部属性的访问,可能会导致图表无法正确显示等一系列意外问题,且会由于深度监听而极大地降低图表展示性能。

解决方案为:使用普通变量声明 ECharts 对象实例,或使用 shallowRef / shallowReactive / markRaw 等 API 防止 ECharts 对象实例被代理。

参见: https://github.com/apache/echarts/issues/17723#issuecomment-1268311307