最近做项目，使用的是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. (7)C#流程控制

    一.判断语句 if if可以单独使用,else不能单独使用 ; ) { Console.WriteLine("aaa); } Console.WriteLine("xxx" ...

  2. Python_Tips[3] -> sort/sorted 排序函数

    排序函数 / Sort Function list自带的sort函数可以实现对列表的排列功能,具有同样功能的还有sorted函数. 基本形式 列表有自己的sort方法,其对列表进行原址排序,既然是原址 ...

  3. idea点击RUN启动报错: Broken configuration due to unavailable plugin or invalid configuration dat

    今天照常打开idea,突然发现之前的启动配置出问题了,随后报了一个这个错: Run Configuration Error: Broken configuration due to unavailab ...

  4. iOS 耳机线控

    当你使用iphone的时候听音乐的时候,播放器在后台运行的时候,你仍然可以通过耳机来进行操作,完成曲目切换,快进,快退等功能!当然你的程序不一定是播放器应用,但是我们仍然可以让它具有这个功能,让用户通 ...

  5. 面试题：Add Two Numbers（模拟单链表）

    题干: You are given two non-empty linked lists representing two non-negative integers. The digits are ...

  6. ISP基础一

    1.专业术语 [ColorTemp] 色温 所谓色温,简而言之,就是定量地以开尔文温度(K)来表示色彩.英国著名物理学家开尔文认为,假定某一黑体物质,能够将落在其上的所有热量吸收,而没有损失,同时又能 ...

  7. 2017.8.5 Linux达人养成计划 I （上）

    参考来自:http://www.imooc.com/learn/175 1 linux简介 1.1 linux简介 linux分为了内核版本和发行版本. 二者的区别:内核版本是由官方提供,而不同的发行 ...

  8. 一扫天下——ZXing使用全解析

    一扫天下--ZXing使用全解析 二维码如今已经烂App了,无论什么App.没有二维码就好像低人一等了. 所以,在自己的项目中集成二维码功能还是非常有必要的. 网上非常多都是基于ZXing2.3的.可 ...

  9. react-native 常用组件的用法(二)

    ScrollView组件 能够调用移动平台的ScrollView(滚动视图)的组件,同时还集成了触摸锁定的“响应者”系统.注意一定要给scrollview一个高度,或者是他父级的高度. 常用方法 on ...

  10. cocos2d-x 3.0 场景切换特效汇总

    cocos2d-x 3.0中场景切换特效比較多,并且游戏开发中也常常须要用到这些特效.来使场景切换时不至于那么干巴,遂这里汇总一下,开发中使用. 场景切换用到导演类Directory,大多数用的都是替 ...