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

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

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

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

posted @ 2023-07-21 10:15  西塞山前白鹭飞  阅读(518)  评论(0编辑  收藏  举报