ECharts前端教程

简介: ECharts前端教程


Apache ECharts

Apache ECharts(incubating),下文简称ECharts,是由百度捐献给Apache开源软件基金会的一个开源可视化工具,目前广泛应用于PC端和移动端的大部分浏览器。截至本书完稿时,该项目正在Apache开源软件基金会下孵化,因此项目名称中带着incubating(孵化)。

自问世以来,ECharts帮助大量开发者快速实现了可视化需求。它使用方便,学习成本较低,得到很多使用者的青睐。同时,ECharts官网上有大量的ECharts可视化案例和配置项手册,可以供读者参考、学习。但是,对于大多数没有前端或编程基础的初学者来说,资料太多,会感到无从下手,也很难把握从零开始的学习路径,于是这本书应运而生。

ECharts概述

ECharts作为一种商业级数据图表,是一个开源的数据可视化工具,可在PC端和移动端的大部分浏览器上使用,由JavaScript实现,底层依赖轻量级的矢量图形库ZRender,在提供多种可视化图表的基础上,让用户可以个性化定制所需图表。

除了百度,使用ECharts的机构和企业还有很多,包括国家统计局、国家电网、中国石化、新华社、阿里巴巴、腾讯、小米、凤凰网、网易、新浪、华为、联想、用友、携程、滴滴、唯品会等

2012年,当时的百度凤巢前端技术负责人林峰在项目中使用Canvas制作图表,编写出ZRender。ZRender在当时是一种全新的轻量级Canvas类库(ECharts正是源自ZRender),最开始是为了满足百度公司内部商业报表需求而设计的。

之后,百度组建了百度商业前端通用技术组,而数据可视化成为该技术组的重要研究内容,并在内部成立了可视化团队。

ECharts官网至今仍展示着那些在ECharts背后贡献巨大的贡献者们,包括沈毅、宿爽、羡辙、德清、王俊婷、林峰、董睿、黄后锦、苏思文、王忠祥、巫枫等。

2013年6月30日,ECharts发布1.0版本,并入选“2013年国产开源软件10大年度热门项目”,同时在“2013年度最新的20大热门开源软件”中排到第一名。它支持折线图(区域图)、柱状图(条状图)、饼图(环形图),具有图表混搭、拖曳重计算、数据视图、动态类型切换、图例开关、数据区域选择、标线辅助、多维度堆积等特性。

2014年,ECharts推出“ECharts数说世界杯”,通过多图连动,多维度、多视角对世界杯数据进行可视化分享。同年6月,ECharts与百度地图合作,推出合作项目“百度人气”,使用的是当时尚未发布的ECharts 2.0版本。

2014年6月30日,ECharts发布2.0大版本。新版本对近5万行代码进行了全面重构,从底层的ZRender到整个ECharts,使性能得到3倍以上的提升,内存消耗明显降低,更适用于大数据和多图场景,在当时的浏览器大数据场景下测试得到20万数据秒级成图。同时,2.0版本支持状态过渡动画,新增了时间轴、仪表盘、漏斗图这类常用的商业BI类图表。

2014年8月26日,百度基于Web的可视化数据分享平台“百度图说”内测版上线,限量500个体验名额,当天即发放完毕。“百度图说”突出所见即所得的编程环境,便捷的分享和协同编辑能力是这个平台的主要亮点,并且极大降低了可视化制作的学习成本。当时的ECharts已经为除百度外超过100家企业上千个项目提供数据可视化能力支持

ECharts 2.2.0发布

2015年1月30日,ECharts 2.2.0发布,修复与升级近50项反馈内容,优化了大量移动设备性能和用户体验,同时ECharts第一个官方分支版本ECharts Mobile(ECharts-m)1.0.0发布。

2015年4月30日,ECharts 2.2.2版本发布,新增韦恩图、矩形树图。值得特别指出的一点是,团队发布了ECharts在线构建工具,实现个性化定制需要的图表代码从而解决了使用全部代码导致体积过于庞大的问题。

ECharts 2.2.3版本

2015年6月1日,ECharts 2.2.3版本发布,新增词云图、树图,上线了地图数据在线生成是继ECharts 2017年和阿里DataV宣布合作后的又一重要战略合作。

2018年1月16日,ECharts发布4.0版本,全新8项新特征,包括千万级数据可视化渲染能力、SVG+Canvas双引擎、全新旭日图、数据与样式分离、更扁平的配置项、无障碍访问支持、微信小程序支持、PowerPoint插件。同一天,ECharts GL 1.0正式版发布,极大提升了稳定性、易用性,更加丰富的功能,轻松满足数据大屏、智慧城市、VR、AR等高质量展示需求。同时,全新品牌“百度数据可视化实验室”正式成立。

2018年3月,全球著名开源社区Apache基金会宣布“百度开源的ECharts项目全票通过进入Apache孵化器”。

2019年12月7日,ECharts首场线下交流会在上海举办。

2020年5月26日,ECharts 4.8.0版本发布。作为连续3年(2017—2019年)荣获最受欢迎中国开源软件之一,ECharts的应用会更加广泛。

ECharts的特性

ECharts有很多优秀特性,这也是ECharts能够如此受欢迎的原因。具体总结如下。

(1)可视化类型丰富

ECharts提供了很多图的实现方式,包括折线图、柱状图、散点图、饼图、K线图、箱线图、地图、热力图、线图、关系图、矩形树图、旭日图、漏斗图、仪表盘等。

除此之外,ECharts还提供了自定义系列,从而能扩展出不同的图表。

(2)支持多种数据格式

在ECharts 4.0以上版本,ECharts的dataset属性支持传入的数据格式除了二维表,还有键值对等。

(3)千万数据前端流畅展现

ECharts 4.0以上版本的增强渲染技术实现了千万数据量展现时仍然可流畅交互,如缩放和平移等操作。对流加载的支持使数据可以分块加载与渲染,用户体验更佳。

(4)动态数据的动画展示

当数据变化时,ECharts通过内部合适的动变化展现出新数据的可视化,常常配合时间序列数据展现

(5)更多、更强大的三维可视化

ECharts提供了ECharts GL,可以实现三维地球、建筑等可视化效果,可应用在VR、大屏场景中,效果更加酷炫(6)跨平台适用

ECharts具有不同的渲染方案,可以在不同平台良好适配。例如,ECharts 4.0以上版本的SVG渲染使得移动端无须担忧内存,Canvas渲染使PC端可以展现大数据量的特效,且ECharts 4.0开始适配微信小程序。

(7)数据深度探索

ECharts支持用户交互挖掘数据中的信息,同时提供图例、视觉映射、数据区域缩放等便捷的交互组件,使用户可以从总览开始挖掘数据展示的细节。

(8)无障碍访问

ECharts 4.0遵从W3C制定的无障碍富互联网应用规范集,支持对可视化生成描述,使盲人可以通过语音了解图表的内容。

官网提供的ECharts GL可视化效果

目录
相关文章
|
2月前
|
前端开发 JavaScript BI
Django教程第5章 | Web开发实战-数据统计图表(echarts、highchart)
使用echarts和highcharts图表库实现折线图、柱状图、饼图和数据集图
64 2
|
5月前
|
前端开发
【前端图表】echarts散点图鼠标划过散点显示信息
【前端图表】echarts散点图鼠标划过散点显示信息
58 0
|
1月前
|
数据可视化 前端开发
web前端-Echarts-5.3高级可视化和图表组合布局
web前端-Echarts-5.3高级可视化和图表组合布局
|
1月前
|
前端开发 JavaScript Apache
web前端-Echarts-5.3安装配置和案例
web前端-Echarts-5.3安装配置和案例
|
1月前
|
编解码 数据可视化 前端开发
ECharts 对比 Highcharts 使用教程
ECharts 对比 Highcharts 使用教程
35 1
|
3月前
|
前端开发
elementui-upload组件自定义样式上传(upload中常用的属性,但是网络上却找不到教程)(解决bug删除之后再次上传会上传删除的图片)专注后端工程师的前端速成
elementui-upload组件自定义样式上传(upload中常用的属性,但是网络上却找不到教程)(解决bug删除之后再次上传会上传删除的图片)专注后端工程师的前端速成
68 0
|
3月前
|
前端开发 数据可视化 开发工具
前端新人入职必备清单,保姆级教程!(下)
前端新人入职必备清单,保姆级教程!(下)
|
3月前
|
JavaScript 前端开发 开发工具
前端新人入职必备清单,保姆级教程!(上)
前端新人入职必备清单,保姆级教程!
|
4月前
|
移动开发 前端开发 决策智能
从0到前端大佬终极完全教程-找工作这一篇就够了
从0到前端大佬终极完全教程-找工作这一篇就够了
64 0
|
4月前
|
移动开发 前端开发 JavaScript
零基础带你飞web前端教程带你探究web前端趋势
零基础带你飞web前端教程带你探究web前端趋势
35 0