首页 前端知识 echarts折线图大量数据使用dataZoom进行缩放不起效果

echarts折线图大量数据使用dataZoom进行缩放不起效果

2024-09-04 23:09:45 前端知识 前端哥 800 337 我要收藏

问题描述

在这里插入图片描述
vite+vue3+ts项目,echarts大量数据展示使用dataZoom进行区域缩放,拖动上图案例红色区域,数据展示无变化,区域缩放功能失效。

问题解决

通过查询,发现是vue3的问题。
vue2可以把chart定义在data里,但在vue3中提供了ref、reactive等。
原先我封装echaert组件时,在setup中定义echarts使用的是ref,如下:

const chart = ref();

通过网上查询,发现是ref的问题,要修改成shallowRef如下:

const chart = shallowRef();

标注

ref很容易理解,使用ref创建的对象,里面任意深度的属性与视图都是响应性的
与ref不同,shallowRef修改深层属性时,并不会更新视图,因为ref方法会递归遍历对象的所有属性,使所有属性都具备响应性,所以,当对象很复杂且庞大时,过多的监听会导致性能上的损耗,也会对echarts页面渲染出现问题。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/17630.html
标签
评论
发布的文章

关于HTML的知识

2024-09-18 23:09:36

js简单实现轮播图效果

2024-09-18 23:09:36

CSS3美化网页元素

2024-09-18 23:09:27

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!