最近做项目，使用的是echarts显示图表数据，但是数据量比较多的时候，有卡顿的情况。后来同事拿echarts和HighCharts做了对比，仅供大家参考。同时感谢同事做的工作。

一、查询1天的源数据，属性1、属性2、属性3、属性4

Echarts查询3.61s，渲染0.786s（约8.6M数据）

HighCharts查询3.10s，渲染0.768s（约8.7M数据）

二、查询7天的源数据，属性1、属性2、属性3、属性4

Echarts查询21.67秒，渲染5.38秒。（约60.7M数据）。渲染完成后

HighCharts查询22.18s，渲染5.39s。（约60.5M数据）

三、查询14天的源数据，属性1、属性2、属性3、属性4

Echarts渲染不出来，浏览器崩溃。

HighCharts查询41.42s，渲染10.82s。（约121M数据）

四、内存占用对比：7天数据

Echarts渲染后浏览器占用内存约3280M。

HighCharts渲染后浏览器占用内存约637M。

五、操作对比

图表类型

1天数据

7天数据

14天数据

Echarts

卡顿

无法操作

浏览器崩溃

HighCharts

流畅

流畅

流畅

云端操作系统：http://www.ineuos.net

实际项目中，看 ECharts 和 HighCharts 渲染性能对比，表面看衣装，本质看内功！！！的更多相关文章

  1. 在react项目中使用ECharts

    这里我们要在自己搭建的react项目中使用ECharts,我们可以在ECharts官网上看到有一种方式是在 webpack 中使用 ECharts,我们需要的就是这种方法. 我们在使用ECharts之 ...

  2. Vue+Typescript项目中使用echarts

    方案一:推荐 在typescript+Vue的项目中引用echarts,为了加强引用,引入echarts和@types/echarts两个包,一个是工程依赖,一个是声明依赖. npm install ...

  3. 在vue项目中封装echarts的正确姿势

    为什么需要封装echarts 每个开发者在制作图表时都需要从头到尾书写一遍完整的option配置,十分冗余 在同一个项目中,各类图表设计十分相似,甚至是相同,没必要一直做重复工作 可能有一些开发者忘记 ...

  4. 在ASP.NET MVC 项目中 使用 echarts 画统计图

    echarts 官方地址:http://echarts.baidu.com/ 一.根据图中的数据怎么从数据库中获取并组装成对应格式: 从数据库中获取对应数据,然后在项目中引用Newtonsoft.Js ...

  5. angular6项目中使用echarts图表的方法（有一个坑，引用报错）

    1.安装相关依赖(采用的webpack) npm install ecahrts --save npm install ngx-echarts --save 2.angular.json 配置echa ...

  6. vue项目中引用echarts的几种方式

    准备工作: 首先我们初始化一个vue项目,执行vue init webpack echart,接着我们进入初始化的项目下.安装echarts, npm install echarts -S //或   ...

  7. 在vue-cli项目中使用echarts

    这个示例使用 vue-cli 脚手架搭建 安装echarts依赖 npm install echarts -S 或者使用国内的淘宝镜像: 安装 npm install -g cnpm --regist ...

  8. Vue系列——在vue项目中使用echarts

    该示例使用 vue-cli 脚手架搭建 安装echarts依赖 npm install echarts -S 或者使用国内的淘宝镜像安装 npm install -g cnpm --registry= ...

  9. 在OAF页面中集成ECharts以及highcharts用于显示图表

    历史博文中有讲解在请求中输出基础图表的方式,见地址:EBS 请求输出Html报表集成Echarts 本文讲述在OAF中集成这两类图表. 集成的基本思路:在OAF页面中加入一个rawText组件,在ra ...

随机推荐

  1. luogu P1195 口袋的天空

    题目背景 小杉坐在教室里,透过口袋一样的窗户看口袋一样的天空. 有很多云飘在那里,看起来很漂亮,小杉想摘下那样美的几朵云,做成棉花糖. 题目描述 给你云朵的个数N,再给你M个关系,表示哪些云朵可以连在 ...

  2. Java字符串(String)

    从表面上看,字符串就是双引号之间的数据,例如“微学苑”.“http://www.weixueyuan.net”等.在Java中,可以使用下面的方法定义字符串:    String stringName ...

  3. Systemd入门教程：命令篇（转）

    作者: 阮一峰 日期: 2016年3月 7日 Systemd 是 Linux 系统工具,用来启动守护进程,已成为大多数发行版的标准配置. 本文介绍它的基本用法,分为上下两篇.今天介绍它的主要命令,下一 ...

  4. Uprobes: userspace probes >= Linux 3.5

    https://lwn.net/Articles/499190/ https://github.com/andreoli/fulltrace Prominent features in Linux 3 ...

  5. 分布式数据库以及OS

    http://blog.csdn.net/longronglin/article/category/230501

  6. js常用函数和常用技巧

    学习和工作的过程中总结的干货,包括常用函数.常用js技巧.常用正则表达式.git笔记等.为刚接触前端的童鞋们提供一个简单的查询的途径,也以此来缅怀我的前端学习之路. PS:此文档,我会持续更新. Aj ...

  7. cocurrent包 原子性数据类型

    22. 原子性布尔 AtomicBoolean AtomicBoolean 类为我们提供了一个可以用原子方式进行读和写的布尔值,它还拥有一些先进的原子性操作,比如 compareAndSet().At ...

  8. Vue.js常用指令汇总（v-if//v-show//v-else//v-for//v-bind//v-on等）

    有时候指令太多会造成记错.记混的问题,所以本文在记忆的时候会采用穿插记忆的方式,交叉比对,不易出错. 本文主要讲了一下六个指令: v-if//v-show//v-else//v-for//v-bind ...

  9. util.date.js

    ylbtech-JavaScript-util: util.date.js 日期处理工具 1.A,JS-效果图返回顶部   1.B,JS-Source Code(源代码)返回顶部 1.B.1, m.y ...

  10. Makefile学习之显示命令与出错命令

    显示命令: 1.在makefile中 如果在命令行下添加“@”符号,则只执行,不显示命令: 2.在执行make时,make -n 表示只显示命令而不执行: make -s 表示只执行命令而不显示: 3 ...