Vue3中echarts无法缩放如何解决
导读:本文共1256.5字符,通常情况下阅读需要4分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 问题描述官网示例正常1、打开echarts官网示例:https://echarts.apache.org/examples/zh/editor.html?c=area-rainfall这个示例的缩放功能是正常的。如下图:官网示例在本地缩放异常把上面这个demo的option复制到本地环境,运行效果:初始渲染正常,拖动缩放把手就报js错误。如下图:点击进入错误堆栈... ...
目录
(为您整理了一些要点),点击可以直达。问题描述
官网示例正常
1、打开echarts官网示例:https://echarts.apache.org/examples/zh/editor.html?c=area-rainfall
这个示例的缩放功能是正常的。如下图:
官网示例在本地缩放异常
把上面这个demo的option复制到本地环境,运行效果:初始渲染正常,拖动缩放把手就报js错误。如下图:
点击进入错误堆栈,发现报seriesModel的coordinateSystem这个属性为undefined
开始以为是echarts版本与官网的版本不一致引起,结果更新本机的echarts跟官网的echarts版本一致。下载官网的echarts跟本机的echarts进行文件比对,发现一模一样。
灵光乍现
重点就是两句话,如下图:
问题解决
找到解题思路之后修改代码,由于我的代码是vue2升级到vue3。vue2的版本中myChart对象是放在data里面的,升级到vue3只是简单的代码改写,myChart仍然放在data里面。代码如下:
constdata=ref({dataDriver:null,chartConfig:null,myChart:null});
vue3中ref绑定的对象都是响应式的对象,对象中的属性值变动都经过vue3的proxy拦截处理。
因此如果是跟页面内容进行响应式绑定的值应该放在data里面,而我的图表用的是原生的echarts api自己绘制的,因此不需要做响应式绑定,如果绘制图表的数据发生变化,我自己会手工调用echarts进行重绘。因此我只需要把myChart从data中删除放到外面即可。如下图:
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
Vue3中echarts无法缩放如何解决的详细内容,希望对您有所帮助,信息来源于网络。