最近做项目，使用的是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. 洛谷 P1181 数列分段Section I【贪心/最少分成多少合法的连续若干段】

    题目描述 对于给定的一个长度为N的正整数数列A[i],现要将其分成连续的若干段,并且每段和不超过M(可以等于M),问最少能将其分成多少段使得满足要求. 输入输出格式 输入格式: 输入文件divide_ ...

  2. SQL 存储过程入门（事务）

    本篇我们来讲一下事务处理技术. 为什么要使用事务呢,事务有什么用呢,举个例子. 假设我们现在有个业务,当做成功某件事情的时候要向2张表中插入数据,A表,B表,我们插入的顺序是先插入A,再插入B表,如果 ...

  3. linux之ls指令的关键字过滤显示

    假设~/admin的文件夹下面有几个文件: a.pm b.pm c.pl d.pl e.pml 想只显示.pm结尾的可以用: ls *.pm 或者 ls | grep .pm,两者等价. 想显示b.开 ...

  4. 如何在AutoCAD中将卫星底图变为有坐标参考信息的

    这篇博文首先没有图,主要是博主太懒了,不想再截图,我把过程说清楚也可以的.特此说明. (1)将下载好的瓦片拼接好大的地图 (2)将其导入到ArcGIS中,定义其地理坐标,如WGS84:然后将其其投影为 ...

  5. linux MySQL Cluster MySQL集群

    原文:http://lizhenliang.blog.51cto.com/7876557/1290451  官方下载地址 http://dev.mysql.com/downloads/cluster/ ...

  6. 阅读 Android源码的一些姿势

    日常开发中怎么阅读源码 找到正确的源码 IDE 是日常经常用的东西,Eclipse 就不说了,直接从 Android Studio(基于 IntelliJ Community 版本改造)开始. 我们平 ...

  7. 【Mysql】字段排序中文排序

    在mysql中 如果字段的值是中文的话,排序结果往往不符合人意. 所以如果要中文排序正常的话,可以使用如下函数 SELECT huayangare0_.id AS id1_0_, huayangare ...

  8. Linux下安装Eclipse的PHP插件（PHPEclipse）

    下载: Eclipse: http://www.eclipse.org/downloads/       (本人用的Ubuntu,直接在SoftWare Center中下载的) (选择适合你系统的相应 ...

  9. Microsoft-PetSop4.0(宠物商店)-数据库设计-Oracle

    ylbtech-DatabaseDesgin:Microsoft-PetSop4.0(宠物商店)-数据库设计-Oracle DatabaseName:PetShop(宠物商店) Model:宠物商店网 ...

  10. README.md文档

    大标题 =================================== 大标题一般显示工程名,类似html的\<h1\> 你只要在标题下面跟上=====即可 中标题 ------- ...