解决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中的卡顿问题,到现在都还没有明白出现这个问题的原因。希望有知道原理的大神告知一下。

目录
相关文章
|
12天前
|
JavaScript 定位技术
echarts地图数据信息流向图效果
本文介绍了如何使用 ECharts 创建一个地图数据信息流向图效果,包括设置地理坐标、线条动画和流向图的实现方法,并通过 Vue.js 封装了一个可重用的 ECharts 地图组件。
61 23
echarts地图数据信息流向图效果
|
10天前
|
JavaScript
Vue+element_Table树形数据与懒加载报错Error in render: “RangeError: Maximum call stack size exceeded“
本文讨论了在使用Vue和Element UI实现树形数据和懒加载时遇到的“Maximum call stack size exceeded”错误,指出问题的原因通常是因为数据中的唯一标识符`id`不唯一,导致递归渲染造成调用栈溢出。
23 1
Vue+element_Table树形数据与懒加载报错Error in render: “RangeError: Maximum call stack size exceeded“
在 Vue3 中,如何使用 setup 函数创建响应式数据?
在 Vue3 中,如何使用 setup 函数创建响应式数据?
|
24天前
|
JavaScript
vue学习(8)数据代理
vue学习(8)数据代理
29 1
|
2月前
|
JavaScript
Vue学习之--------深入理解Vuex之多组件共享数据(2022/9/4)
这篇文章通过一个实际的Vue项目案例,演示了如何在Vuex中实现多组件间共享数据。文章内容包括在Vuex的state中新增用户数组,创建Person.vue组件用于展示和添加用户信息,以及在Count组件中使用Person组件操作的数据。通过测试效果展示了组件间数据共享和状态更新的流程。
Vue学习之--------深入理解Vuex之多组件共享数据(2022/9/4)
|
2月前
|
JavaScript 数据可视化 BI
echarts的使用 超好用的报表制作、数据的图形化展示
您提供的链接是关于echarts使用的博客文章,它介绍了如何使用echarts进行数据的图形化展示,包括制作报表和图表。echarts是一个强大的数据可视化工具,能够创建折线图、柱状图、饼图等多种图表类型。文章还提供了一个Demo演示和项目结构的图片,以及官网链接供读者参考。
echarts的使用 超好用的报表制作、数据的图形化展示
|
9天前
|
JavaScript 前端开发 UED
组件库实战 | 用vue3+ts实现全局Header和列表数据渲染ColumnList
该文章详细介绍了如何使用Vue3结合TypeScript来开发全局Header组件和列表数据渲染组件ColumnList,并提供了从设计到实现的完整步骤指导。
|
9天前
|
开发框架 JavaScript 前端开发
手把手教你剖析vue响应式原理,监听数据不再迷茫
该文章深入剖析了Vue.js的响应式原理,特别是如何利用`Object.defineProperty()`来实现数据变化的监听,并探讨了其在异步接口数据处理中的应用。
|
22天前
|
JavaScript
Vue组件传值异步问题--子组件拿到数据较慢
Vue组件传值异步问题--子组件拿到数据较慢
23 0
|
2月前
|
JavaScript 前端开发
Vue学习之--------Vue中收集表单数据(使用v-model 实现双向数据绑定、代码实现)(2022/7/18)
这篇文章介绍了Vue中使用v-model实现表单数据收集的方法,包括基础知识、代码实例和测试效果,并提供了一些额外建议。
Vue学习之--------Vue中收集表单数据(使用v-model 实现双向数据绑定、代码实现)(2022/7/18)