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可视化效果

目录
相关文章
|
搜索推荐 前端开发 数据可视化
【优秀python web毕设案例】基于协同过滤算法的酒店推荐系统,django框架+bootstrap前端+echarts可视化,有后台有爬虫
本文介绍了一个基于Django框架、协同过滤算法、ECharts数据可视化以及Bootstrap前端技术的酒店推荐系统,该系统通过用户行为分析和推荐算法优化,提供个性化的酒店推荐和直观的数据展示,以提升用户体验。
1110 1
【优秀python web毕设案例】基于协同过滤算法的酒店推荐系统,django框架+bootstrap前端+echarts可视化,有后台有爬虫
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
16274 23
|
前端开发 数据可视化 JavaScript
前端echarts加标记点及标记线和提示框
通过本文的介绍,希望您能够深入理解和掌握如何在ECharts中添加标记点、标记线和提示框,并在实际项目中灵活运用这些功能,提升数据可视化效果。
2359 4
|
搜索推荐 前端开发 数据可视化
基于Python协同过滤的旅游景点推荐系统,采用Django框架,MySQL数据存储,Bootstrap前端,echarts可视化实现
本文介绍了一个基于Python协同过滤算法的旅游景点推荐系统,该系统采用Django框架、MySQL数据库、Bootstrap前端和echarts数据可视化技术,旨在为用户提供个性化的旅游推荐服务,提升用户体验和旅游市场增长。
2348 9
基于Python协同过滤的旅游景点推荐系统,采用Django框架,MySQL数据存储,Bootstrap前端,echarts可视化实现
|
前端开发 Java Maven
【前端学java】全网最详细的maven安装与IDEA集成教程!
【8月更文挑战第12天】全网最详细的maven安装与IDEA集成教程!
922 2
【前端学java】全网最详细的maven安装与IDEA集成教程!
|
Web App开发 数据可视化 前端开发
ECharts 教程
ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求。
878 10
|
前端开发 数据挖掘 关系型数据库
基于Python的哔哩哔哩数据分析系统设计实现过程,技术使用flask、MySQL、echarts,前端使用Layui
本文介绍了一个基于Python的哔哩哔哩数据分析系统,该系统使用Flask框架、MySQL数据库、echarts数据可视化技术和Layui前端框架,旨在提取和分析哔哩哔哩用户行为数据,为平台运营和内容生产提供科学依据。
1485 9
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(10)--- 基于vue-echarts处理各种图表展示
循序渐进VUE+Element 前端应用开发(10)--- 基于vue-echarts处理各种图表展示
|
前端开发 JavaScript
轻松上手:基于single-spa构建qiankun微前端项目完整教程
轻松上手:基于single-spa构建qiankun微前端项目完整教程
1004 0

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    1354
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    630
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    499
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    491
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    600
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    786
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1546
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    359
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    1258
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    603