Echarts高级进阶教程:图表渲染大数据量导致卡顿加载时间慢等问题的解决方案_echarts折线图线较多时首次渲染慢-程序员宅基地

技术标签: echarts  php  javascript  

数据可视化从流程上来说,从数据采集→数据清洗→数据储存→数据读取→数据展示→数据筛选(分析)→数据报表,7个过程是一个比较完整的过程。每个过程都可能使用不同的技术和不同的工具,但是对于受众来说,这些都是计算机在处理的事情,只需要关心结果即可。
而对于数据可视化的开发人员来说,要出一个完美的结果,要有一个满意的展示速度,要有一个赏心悦目的UI界面…本次讨论,如何优化大数据量下的数据可视化展示技术和手段(基于echarts和php)。

项目需求

定义何为大量数据

在近期的Echarts数据可视化大屏的开发中,遇见了大量数据加载的情况。首先,定义何为大量数据?本文的大量数据是指10000+条数据或者10M+文件容积大小的数据。对于日常的Echarts渲染图表,无非是对接api接口→ajax获取数据→Echarts渲染图表,这样的流程。但是这么简单地过程中,遇见大量数据加载时,问题就变得复杂起来了。

产生的现象

  1. 首次加载时间过慢,友好性和体验性极差;
  2. 筛选条件,如默认1个小时,筛选24小时以上的数据时,加载数据过慢;
  3. 折线图拖动时,dataZoom组件使用时的卡顿;
  4. 浏览器大小变化时,windows监听myChart.resize()导致的重新加载,卡顿;

总之,在大数据量的数据可视化,原本一切都很美好的事情,都变得“拖拖拉拉”了。如何解决呢?

问题分析

加载时间慢,卡顿等现象表明的原因都是由于数据量大导致的,因此大数据量加载时,需要进行层次分析,只有逐层分析,才能对症下药。

解决思路

  1. 硬件环境:客观条件是解决问题的最佳方案,但不在本解决方案的讨论范围。毕竟,改变客观条件,不是每个人都能做到的。
  2. 软件环境:web服务器的配置,如gzip;
  3. 开发语言:流加载/分页懒加载方式;post/get请求方式;
  4. Echarts自身加载大量属性的使用和掌握;
  5. API接口的读取速度:mySql读取/Redis缓存读取;
  6. ajax获取数据和处理数据的方法;

测试环境

开发语言 环境部署 说明
后端 php phpstudy集成开发环境,php5.6+,MySql 5.6+,主要用于api数据接口的调用和调试
前端 html/jquery/echarts ajax异步获取数据,在echarts中进行加载渲染
硬件环境 win7操作系统 8G DDR,Chrome浏览器

Echarts高级进阶教程(测试教程非结论,仅供参考)

Echarts高级进阶教程(1):异步加载大量数据导致dataZoom组件拖动缩放时间轴卡顿的sampling降采样策略解决方案
Echarts高级进阶教程(2):appendData异步加载大数据量分片加载数据和增量渲染的解决方案
Echarts高级进阶教程(3):appendData大数据量分片加载数据增量渲染和常规思路异步加载数据的对比,对折线图是无效的

updating…

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_41290949/article/details/109020817

智能推荐

小程序开发者工具正常显示,但是真机调试和真机中安卓加载正常ios加载首页失败,首页的请求返回204_苹果 sec-fetch-dest-程序员宅基地

文章浏览阅读125次。检查请求头中的’sec-fetch-dest’: ‘document’ ,是否进行了特殊处理(node层)_苹果 sec-fetch-dest

ansible 批量安装zabbix-agent-程序员宅基地

文章浏览阅读321次。服务器初始化(这是在建立在新的服务器基础上做的初始化)关闭防火墙、selinux,添加epel常用源,安装常用工具、添加普通用户并禁止root1、服务器批量初始化[root@fwd ansible]# cat init.yml 系统初始化脚本---- hosts: all tasks: - name: disable selinux、firew..._ansible批量安装zabbix-agent

java日志系统--log4j配置解析过程,源码分析_log4j 源码分析 读取配置-程序员宅基地

文章浏览阅读1.4w次,点赞3次,收藏2次。Logger.getLogger(Test.class);从getLogger开始,就启动了log4j的整个工作流程,通过调用LogManager获取logger实例return LogManager.getLogger(clazz.getName());LogManager类里面有个静态块static{},【初始化重要信息】【root logger】,做一些配置,其中url = Loader.ge_log4j 源码分析 读取配置

心灵震撼《一个8岁女孩的遗书》看完能有几人不哭…-程序员宅基地

文章浏览阅读533次。无奈的父亲­有一个美丽的小女孩,她的名字叫余艳,她有一双亮晶晶的大眼睛她有一颗透明的童心.她是一个孤儿,她在这个世界上只活了8年,她留在这个世界上最后的一句话是“我来过,我很乖”她希望死在秋天,纤瘦的身体就像一朵花自然开谢的过程.在遍地黄花堆积,落叶空中旋舞的时候,她会看见横空远行的雁儿们.她自愿放弃治疗,把全世界华人捐给她的54万分成了7份,把生命当成希望的蛋糕分给了7个正徘徊在生死线上的小

C++音视频开发从放弃到入门 (基于FFmpeg+OpenCV)-程序员宅基地

文章浏览阅读1.1w次,点赞12次,收藏88次。音视频开发一定要学C++吗?答案是肯定的。虽然其它语言也能搞音视频开发,甚至使用起来更简单,但“语言越高级,离真相就越远”,当你的功能需求日益增多,程序的性能需求越来越迫切,你想进一步了解程序实现的细节时,使用其它语言往往会面临“无法解决”的困境,最后不得不使用C++来解决问题,我们何不从一开始就使用C++呢?FFmpeg及OpenCV是开源、跨平台的音视频开发SDK,搞音视频开发基本都需要用到它。_c++音视频开发

C# 爬虫 100个明星贴吧_如何用爬虫爬取百度贴吧的贴吧c#-程序员宅基地

文章浏览阅读2.8k次。每个吧 第一页 using System;using System.Collections.Generic;using System.IO;using System.Linq;using System.Net;using System.Text;using System.Text.RegularExpressions;namespace ConsoleApplication8{_如何用爬虫爬取百度贴吧的贴吧c#

随便推点

Ubuntu之apt命令_ubuntu18.04 atp命令使用技巧-程序员宅基地

文章浏览阅读134次。简介apt-cache和apt-get是apt包的管理工具,他们根据/etc/apt/sources.list里的软件源地址列表搜索目标软件、并通过维护本地软件包列表来安装和卸载软件。查看本机是否安装软件:whereis package_name 或者which package_name1.搜索软件sudo apt-cache search pa..._ubuntu18.04 atp命令使用技巧

查询Dynamics 365的Audit History_dynamics 审核历史记录如何查询-程序员宅基地

文章浏览阅读150次。【代码】查询Dynamics 365的Audit History。_dynamics 审核历史记录如何查询

python yield函数的用法-程序员宅基地

文章浏览阅读1.3w次,点赞15次,收藏66次。什么是yield函数?yield函数是python里面的关键字,带有yield的函数相当于一个生成器generator.当你使用一个yield的时候,对应的函数就是一个生成器在python里面类似于return函数,他们主要的区别就是:遇到return会直接返回值,不会执行接下来的语句.但是yield并不是,在本次迭代返回之后,yield函数在下一次迭代时,从上一次迭代遇到的yield后面的代码(下一行)开始执行下面是案例分析:案例一:def gen_generator(): yiel_yield函数

【QT笔记】QFile读文件问题_qfileread后指针会移动吗-程序员宅基地

文章浏览阅读917次。如果不用seek(0)的话,默认是自己会把读取文件的指针后移的,不用手动后移;_qfileread后指针会移动吗

dw8051基本测试示例_dw8051 part1-程序员宅基地

文章浏览阅读2.5k次。整理了网上一份简单的dw8051测试示例,共享到云盘:http://pan.baidu.com/s/1bnu9lZT1.目录如下:---dut ---rtl:DW8051的core文件 ---model:ROM和RAM的model文件---testbench ---rtl.f:filelist文件 ---test_top.v:仿真的top_dw8051 part1

ffmpeg裁剪合并视频_temp视频合成-程序员宅基地

文章浏览阅读1.2k次。这里裁剪是指时间轴裁剪,不是空间裁剪。 比如说,你想把视频的从一分20秒开始,30秒的视频裁剪出来,保存成一个视频。这是这个文章要讨论的问题。 一 裁剪视频 ffmpeg提供简单的命令参数:ffmpeg -ss START -t DURATION -i INPUT -vcodec copy -acodec copy OUTPUT对_temp视频合成