最近做项目，使用的是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. CF985A Chess Placing【思维】

    [链接]:CF985A [题意]:给你n和n/2个数ai,每个ai和奇数.偶数比较距离(注意选了奇数,偶数的距离就不要算了,反之同理),求最小的答案. [代码]: #include <iostr ...

  2. 51nod 1413 权势二进制【进制思维】

    1413 权势二进制 题目来源: CodeForces 基准时间限制:1 秒 空间限制:131072 KB 分值: 10 难度:2级算法题  收藏  关注 一个十进制整数被叫做权势二进制,当他的十进制 ...

  3. Codeforces 626F Group Projects （DP）

    题目链接  8VC Venture Cup 2016 - Elimination Round 题意  把$n$个物品分成若干组,每个组的代价为组内价值的极差,求所有组的代价之和不超过$k$的方案数. ...

  4. ACM中的正则表达式

    layout: post title: ACM中的正则表达式 author: "luowentaoaa" catalog: true mathjax: true tags: - 正 ...

  5. java collection get 方法

    Collections unmodifiableList

  6. POJ 2739：Sum of Consecutive Prime Numbers（Two pointers）

    [题目链接] http://poj.org/problem?id=2739 [题目大意] 求出一个数能被拆分为相邻素数相加的种类 [题解] 将素数筛出到一个数组,题目转化为求区段和等于某数的次数,尺取 ...

  7. 【CodeForces 830C】奇怪的降复杂度

    [pixiv] https://www.pixiv.net/member_illust.php?mode=medium&illust_id=60638239 description 有n棵竹子 ...

  8. 【微信】微信小程序 新建页面目录后，怎么自动生成目中的的四个基本文件呢？ 新建目录报错如下VM458:2 未找到 app.json 中的定义的 pages "pages/module/module" 对应的 WXML 文件

    如下图,在使用微信开发者工具过程中,新创建了页面目录,想要页面文件夹中自动生成四个基本文件 但是新创建了一个页面文件夹,里面的四个基本文件并没有展示出来 然后在app.json添加这个路径,ctrl+ ...

  9. Struts2实现登录权限访问控制

    目录: Ⅰ 条件 Ⅱ 目的 Ⅲ 分析 Ⅳ 实现 Ⅴ 具体代码实现 ------------------------------------------------------------------- ...

  10. ECSHOP热门搜索关键词随机显示

    实现ECSHOP热门搜索关键词随机显示,需要修改ECSHOP模板和ECShOP程序,按照步骤修改即可. 一.打开 include/lib_main.php 文件,找到下面这段代码,删除之(大概在165 ...