最近做项目，使用的是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. J.U.C并发框架源码阅读（十二）ConcurrentHashMap

    基于版本jdk1.7.0_80 java.util.concurrent.ConcurrentHashMap 代码如下 /* * ORACLE PROPRIETARY/CONFIDENTIAL. Us ...

  2. HDU 2546.饭卡-动态规划0-1背包

    饭卡 Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submissi ...

  3. hdu6035（树形DP）

    hdu6035 题意 给出一棵树,现在定义两点之间距离为两点间最短路径上颜色集合的大小.问任意两点间距离之和. 分析 换个方向,题目其实等价于求每种颜色在多少条路径上出现过(每种颜色对于答案的贡献), ...

  4. hiho一下第130周 后缀自动机二·重复旋律7

    后缀自动机四·重复旋律7 时间限制:15000ms 单点时限:3000ms 内存限制:512MB 描述 小Hi平时的一大兴趣爱好就是演奏钢琴.我们知道一段音乐旋律可以被表示为一段数构成的数列. 神奇的 ...

  5. InputSplit—>RecordReder—>map(key,value,context)的过程解析

    上图首先描述了在TaskTracker端Task(MapTask.ReduceTask)的执行过程,MapTask(org.apache.hadoop.mapred)首先被TaskRunner调用,然 ...

  6. session的作用范围（转）

    session是在服务器端建立的,浏览器访问服务器会有一个jsessionid,浏览器端通过 jsessionid定位服务器端的session,session的创建和销毁由服务器端控制.当浏览器关闭后 ...

  7. [转载]Linux 卸载JDK并安装新版本JDK (rpm,tar)

    FROM:http://josh-persistence.iteye.com/blog/1908549 一.查看Jdk的安装路径: whereis javawhich java (java执行路径)e ...

  8. ASP.NET MVC学习---（三）EF简单增删改查

    那么现在我们已经大概从本质上了解了ef 巴拉巴拉说了一大堆之后 总算要进入ef的正题了 总在口头说也太不行了是吧~ 没错,现在要用ef进行一些实际的操作 做什么呢? 就做一个入门级的增删改查操作吧 废 ...

  9. 不删除记录的表CRUD的常见处置

    为什么不删除记录,因为这些记录只是暂时不用了,以后还是有可能会用到的,比如说统计:另外一些主键外键依赖级联删除的场合也不好真删的,容易批量删除.真删了就不容易恢复回来了. 一般做法是,增加一个avai ...

  10. Nginx限制连接和请求

    一.ngx_http_limit_conn_module对同一个ip/server的连接数做限制.配置指令:limit_conn_zone语法: limit_conn_zone $variable z ...