解决vue中使用echarts,大量数据缩放卡顿的问题

简介: 问题在echarts官网的demo中,k线图的缩放是很流畅的,但是在项目中实现之后,缩放时分的卡,有时间根本缩放不动最开始想的是可能是数据量太大了,然后将api返回的数据进行了打印,发现数据不到300条,所以和数据量没有关系。

问题

在echarts官网的demo中,k线图的缩放是很流畅的,但是在项目中实现之后,缩放时分的卡,有时间根本缩放不动

最开始想的是可能是数据量太大了,然后将api返回的数据进行了打印,发现数据不到300条,所以和数据量没有关系。

将官网demo重新在项目中实现,发现也没有卡顿的现象。

将代码进行对比,发现没有什么不同

唯一不同的就是我在初始化echarts之后,使用了一个变量接收了一下

 var myChart = echarts.init(this.$refs.echartContainer);
 this.Chart = myChart;

把变量的接收去掉。

问题没有了,
但是其他地方还需要对这个echarts实例项进行操作,比如setOption,与clean,所以还是需要一个中间变量接收一下。

在script中定义一个变量用来接收,而不是在vue的data中

var charts="";
export default {
}

完美解决echarts在vue中的卡顿问题,到现在都还没有明白出现这个问题的原因。希望有知道原理的大神告知一下。

目录
相关文章
|
21天前
|
JavaScript 定位技术
echarts地图数据信息流向图效果
本文介绍了如何使用 ECharts 创建一个地图数据信息流向图效果,包括设置地理坐标、线条动画和流向图的实现方法,并通过 Vue.js 封装了一个可重用的 ECharts 地图组件。
86 23
echarts地图数据信息流向图效果
|
1月前
|
JavaScript
Vue组件传值异步问题--子组件拿到数据较慢
Vue组件传值异步问题--子组件拿到数据较慢
110 58
|
19天前
|
JavaScript
Vue+element_Table树形数据与懒加载报错Error in render: “RangeError: Maximum call stack size exceeded“
本文讨论了在使用Vue和Element UI实现树形数据和懒加载时遇到的“Maximum call stack size exceeded”错误,指出问题的原因通常是因为数据中的唯一标识符`id`不唯一,导致递归渲染造成调用栈溢出。
32 1
Vue+element_Table树形数据与懒加载报错Error in render: “RangeError: Maximum call stack size exceeded“
|
3天前
|
JavaScript
vue3,使用watch监听props中的数据
【10月更文挑战第3天】
109 2
在 Vue3 中,如何使用 setup 函数创建响应式数据?
在 Vue3 中,如何使用 setup 函数创建响应式数据?
|
3天前
|
JavaScript 索引
vue 表格数据上下移动并增加背景色
vue 表格数据上下移动并增加背景色
11 0
|
7天前
|
JavaScript 前端开发 API
vue尚品汇商城项目-day03【20.获取Banner轮播图的数据+21.使用swiper轮播图插件】
vue尚品汇商城项目-day03【20.获取Banner轮播图的数据+21.使用swiper轮播图插件】
18 0
|
8天前
|
JavaScript API
vue尚品汇商城项目-day06【37.获取交易数据+38.用户地址信息展示+39.交易信息展示及交易页面完成+40.提交订单+41.支付组件内获取订单号与展示支付信息】
vue尚品汇商城项目-day06【37.获取交易数据+38.用户地址信息展示+39.交易信息展示及交易页面完成+40.提交订单+41.支付组件内获取订单号与展示支付信息】
20 0
|
1月前
|
JavaScript
vue学习(8)数据代理
vue学习(8)数据代理
31 1
|
2月前
|
JavaScript
Vue学习之--------深入理解Vuex之多组件共享数据(2022/9/4)
这篇文章通过一个实际的Vue项目案例,演示了如何在Vuex中实现多组件间共享数据。文章内容包括在Vuex的state中新增用户数组,创建Person.vue组件用于展示和添加用户信息,以及在Count组件中使用Person组件操作的数据。通过测试效果展示了组件间数据共享和状态更新的流程。
Vue学习之--------深入理解Vuex之多组件共享数据(2022/9/4)