JavaScript图表组件-ECharts
2013-07-30 15:48:56 
阿炯
ECharts开源来自百度商业前端数据可视化团队，基于html5 Canvas，是一个纯Javascript图表库，提供直观、生动、可交互、可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。采用MIT授权协议。
ECharts (Enterprise Charts 商业产品图表库)
底层基于ZRender(一个轻量级的canvas基础类库)，创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、饼图(环形图)、地图、力导向布局图，同时支持任意维度的堆积和多图表混合展现。
特点
推荐翻阅这份在线文档 《 Why ECharts ? 》，从中可以更直观的体验到ECharts的特性以及快速浏览到所有图表类型。文档中展现的个别特性在IE8-中并没有得到支持，所以建议使用IE9+、chrome、safari、firefox或opear等浏览器阅读这份文档。
混搭
混搭情况下一个标准图表：包含唯一图例、工具箱、数据区域缩放、值域漫游模块，一个直角坐标系(可包含一条或多条类目轴线，一条或多条值轴线，最多上下左右四条)
混搭的图表会更具表现力也更有有趣味，ECharts提供的图表(共7类11种)支持任意混搭：折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、饼图(环形图)、地图、力导布局图。
拖拽重计算
拖拽重计算特性(专利)带来了数据统计图表从未有过的用户体验，允许用户对统计数据进行有效的提取、整合，甚至在多个图表间交换数据，赋予了用户对数据进行挖掘、整合的能力。
数据视图
如果你所呈现的数据足够让用户所关心，那么他们将不满足于查看可视化的图表，要去逐一迎合他们下载保存，数据分享，加工整合已有数据等等需求？或许你只要给予一个“,”分隔的数据文本他们就懂了，这就是ECharts的数据视图！当然，你可以重载数据视图的输出方法，用你独特的方式去呈现数据。如果你的用户足够的高端，你甚至可以打开数据视图的编辑功能，跟拖拽重计算相比，这可是批量的数据修改！
动态类型切换
很多图表类型本身所表现的能力是相似的，但由于数据差异、表现需求和个人喜好的不同导致最终图表所呈现的张力又大不一样，比如折线图和柱状图的选择总是让人头疼。ECharts提供了动态类型切换，让用户随心所欲的切换到他所需要的图表类型。
图例开关
多系列数据的同时展现呈现出丰富内容，但如何让用户切换到他所关心的个别系列上？ECharts提供了方便快捷的图例开关，可以随时切换到你所关心的数据系列。
数据区域选择
数据可以是无限的，但显示空间总是有限的，数据区域选择组件提供了大数据量中漫游的能力，让用户选择并呈现他所关心的数据区域。
值域漫游
基于坐标的图表(如地图、散点图)通过色彩变化表现数值的大小能直观形象的展示数据分布。但如何聚焦到我所关心的数值上？我们创造了称为值域漫游的功能，让你可以轻松进行数值筛选。
大规模散点图
如何展现成千上百万的离散数据从而找出他们的分布和聚类？貌似除了用专业的统计工具(如MATLAB)外别无选择？不，ECharts发明了基于像素的大规模散点图(专利)，一个900 x 400的散点区域就能够毫不重复的呈现35万组数据，这对于常规的应用，用现代浏览器就足以轻松展现百万级的散点数据！
标线辅助
趋势线？平均线？上升通道？支持位？专业的你自然知道该怎么用，提供标线辅助在K线图中可是必要的功能！当然，ECharts中的任何图表都可以使用。
多维度堆积
支持多系列，多维度的数据堆积，配合自动伸缩的图形实体和直角坐标系，能呈现出更有内涵的统计图表。
个性化定制
近300个可配置选项结合多级控制设计满足高度定制的个性化需求。
事件交互
可以捕获的用户交互和数据变化事件实现图表与外界的联动。
最新版本：3.0
更小体积的文件，满足更轻便的使用需求
更灵活的打包方式，可自由选择你需要的图表和组件
移动端强势来袭，良好的自适应效果
专属的移动端交互体验，更丰富的可视化效果
新增更多图表类型，更好的满足不同数据的处理需求 更多的搭配方案让你的数据呈现方式更个性和完美。
最新版本：4.0
2018年1月16日，百度EFE团队正式发布了旗下知名开源产品 ECharts 的最新大版本 4.0，新版本在产品的性能、功能、易用性等各个方面进行了全面提升。ECharts 4.0 最大的亮点是带来了 8 项堪称“黑科技”的全新特性：
千万级数据可视化的无阻塞体验
图表界第一个双引擎发动机，首创同时使用 Canvas 与 SVG，支持 SVG 渲染，可自由切换，内存占用更少
新增旭日图，为多层数据带来更酷的展现方式
数据与样式分离让数据传入变得更加方便
更扁平的配置项层级，更便捷的书写
首创数据可视化产品的无障碍访问支持
即将可以在微信小程序中使用 ECharts
可以在 PPT 中使用 ECharts
和 ECharts 4.0 一起发布的还有 ECharts GL 1.0 正式版、ZRender 4.0 全新版本、WebGL 框架 ClayGL、深度学习框架 Visual DL 等，可谓是一次百度在数据可视化领域的大阅兵。伴随这些产品的发布，百度也发布了全新升级的数据可视化品牌 —— “百度数据可视化实验室”，标志着百度在数据可视化领域将开启一番大的动作。新版本主要的升级点包括：
带给用户更强大的性能和功能
千万级数据可视化的无阻塞体验
渲染引擎 ZRender 全面升级，正式支持 SVG
新增了旭日图类型
让开发者使用 ECharts 变得更加轻松：数据与样式分离让数据传入变得更加方便；更扁平的配置项层级，更便捷的书写
让更多的人在更多的场景都能访问使用 ECharts 制作的可视化产品：首创数据可视化产品的无障碍访问支持；新增对于微信小程序的支持
具体改进记录如下：
[+] 支持最高达千万级数据量渲染。ECharts4 变更为流式结构，并且配合各种细致的优化，支持增量加载数据和渐进渲染。几千万的地理坐标数据就算使用二进制存储也要占上百 MB 的空间，增量加载数据可以使用户能使用 WebSocket 或者对数据分块后加载，从而能很快的渲染出结果并且阻塞浏览器。参见 scatterGL-gps、linesGL-ny。 ECharts 使用了渐进渲染来支持大数据场景下的平移缩放等交互，参见 lines-airline 的缩放平移。而 ECharts GL 下则会有效果好的交互体验。
[+] zrender SVG 渲染引擎发布，从而支持 Canvas / SVG 双引擎渲染，可进按照场景所需进行切换。例如，SVG 可适用于移动端、单页多图表等场景，Canvas 适用于大数据量、视觉特效需求等场景。Canvas 渲染引擎仍为默认引擎。
[+] 发布旭日图（sunburst），高效表达带有层次结构的数据占比情况，并有良好的交互体验。参见 旭日图。
[+] 新增 dataset 组件，从而能够数据与样式分离，便于单独管理数据，支持数据映射到视觉配置，可以多个系列共享数据，也省去数据分割处理的步骤。
[+] 支持无障碍富互联网应用规范集（WAI-ARIA，the Accessible Rich Internet Applications Suite），致力于使得网⻚内容和网⻚应，用能够被更多残障人士访问。
[+] ECharts 4 开始，label、itemStyle 等配置被扁平化了，去掉了原先的 normal 层级，使得 option 更为清爽。原先的配置方式也向后兼容。
[+] 新增了两套内置的颜色主题，名为 'light', 'dark'，可通过 echarts.init(dom, themeName); 来使用它们。
[+] 支持 legend.data 不指定时，自动根据系列生成。
[+] 支持类目轴（axis.type: 'category'）中 axis.data 不指定时，自动根据数据生成。
新增的旭日图
全新团队品牌“百度数据可视化实验室”，在发布各个新产品的同时，ECharts 团队宣布团队品牌升级为“百度数据可视化实验室”。从单一的技术产品研发团队进化为从各个方面联合各种伙伴推进可视化工作的联盟组织。新成立的百度数据可视化实验室，希望能够依托完善的产品支撑及丰富的经验，致力于提供更强大的数据可视化产品、参与数据可视化规范的制定、积极参与可视化基础知识的推广、传播数据可视化学术界及业界的研究成果及解决方案，和广大伙伴一同推动数据可视化行业的发展。
最新版本：5.2
Apache ECharts 5.2.0 于 2021年9月初正式发布，在这个版本中引入了非常酷炫的全局过渡动画，并且对调色盘取色策略、极坐标柱状图标签等做了很多优化和增强。
全局过渡动画
在 Apache ECharts 中我们一直把自然流畅的过渡动画作为一个重要特性。通过避免数据带来的突变，不仅仅可以改善视觉效果，更为表达数据的关联和演变提供了可能。因此，在 5.2.0 中，我们进一步将过渡动画从表现系列内部数据的变化，泛化到全局能力。接下来，我们会看到这种全局过渡动画 Universal Transition 是如何为图表增加表现力和叙事能力的。在之前的版本中，过渡动画有一定的局限性：只能用于相同类型的图形的位置、尺寸、形状，而且只能作用在相同类型的系列上。
跨系列的形变动画
在设置universalTransition: true开启全局过渡动画后，从饼图切换成柱状图，或者从柱状图切换成散点图，甚至旭日图和矩形树图这类复杂的图表之间，都可以通过形变的方式自然的进行动画过渡。
数据的分裂和合并动画
除了常见的数据值的更新，有时候我们还会碰到数据的聚合、下钻等交互后的更新，这个时候我们就不能直接应用一对一的动画过渡，而需要使用更多像分裂、合并这样的动画效果，来通过正确的图形动画表达出数据的变换。为了能够表达数据之间可能存在的多对多联系，在 5.2.0 中我们新引入了一个数据组groupId的概念，我们可以通过 series.dataGroupId 设置整个系列所属的组，或者更细粒度的通过 series.data.groupId 设置每个数据所属的组。如果你使用了dataset管理数据则更方便了，可以使用encode.itemGroupId来指定一个维度编码成groupId。
调色盘的取色策略
在上面全局过渡动画的示例中，大家可能有注意到我们使用了一个之前版本没有的colorBy配置项，这个配置项也是我们这个版本新增加的一个特性，用来给系列配置不同粒度的调色盘取色。
极坐标柱状图的标签
这个版本中我们实现了极坐标上的柱状图的标签，并且支持丰富的标签定位配置。
空数据的饼图样式
在之前的版本中，如果饼图没有数据，画面中可能就是完全空白的。因为没有任何的视觉元素，所以用户会疑惑是不是出现了 bug 导致图中没有内容。为了解决这个问题，这个版本我们会默认在无可显示数据的时候显示一个灰色的占位圆以防止画面中完全空白。可以通过emptyCircleStyle配置这个占位圆的样式。
高维数据的性能增强
从 4.0 开始引入了 dataset 用来管理图表的数据，通常情况下dataset提供了更方便的数据管理方式而且跟传统的方式不会有什么性能上的差别。在新版本中我们对这个问题做了优化，所有系列都尽可能共享 dataset 的数据（能否共享取决于系列怎么使用这份数据）存储而非每个系列都处理并存储一次，并且只处理和存储了使用到的维度。这些优化保证了内存不会随着 dataset 维度和系列的增长而爆炸，大幅度的提升了极端场景下的初始化性能。刚才例子的渲染耗时也从卡住降低到了可接受的 300 毫秒以下。这次优化带来收益的还不只是这种高维的场景，在使用维度不高但是数据量很大的 dataset 的时候，因为数据的共享所以多个系列只处理了一遍数据，因此也可以带来显著的性能提升。
自定义系列的类型优化
自定义系列提供了非常灵活的创建系列图形的方式，相对于其它系列，自定义系列的学习曲线可能有些陡峭，而且容易出错。因此在这个版本中，我们进一步的优化了自定义系列中的核心方法renderItem的类型，对于renderItem的参数和返回值类型做了更精确的推断，从而可以根据返回的图形类型推断出可以设置该图形的哪些属性。
项目主页：https://echarts.apache.org/zh/index.html
ECharts (Enterprise Charts 商业产品图表库)
底层基于ZRender(一个轻量级的canvas基础类库)，创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、饼图(环形图)、地图、力导向布局图，同时支持任意维度的堆积和多图表混合展现。
特点
推荐翻阅这份在线文档 《 Why ECharts ? 》，从中可以更直观的体验到ECharts的特性以及快速浏览到所有图表类型。文档中展现的个别特性在IE8-中并没有得到支持，所以建议使用IE9+、chrome、safari、firefox或opear等浏览器阅读这份文档。
混搭
混搭情况下一个标准图表：包含唯一图例、工具箱、数据区域缩放、值域漫游模块，一个直角坐标系(可包含一条或多条类目轴线，一条或多条值轴线，最多上下左右四条)
混搭的图表会更具表现力也更有有趣味，ECharts提供的图表(共7类11种)支持任意混搭：折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、饼图(环形图)、地图、力导布局图。
拖拽重计算
拖拽重计算特性(专利)带来了数据统计图表从未有过的用户体验，允许用户对统计数据进行有效的提取、整合，甚至在多个图表间交换数据，赋予了用户对数据进行挖掘、整合的能力。
数据视图
如果你所呈现的数据足够让用户所关心，那么他们将不满足于查看可视化的图表，要去逐一迎合他们下载保存，数据分享，加工整合已有数据等等需求？或许你只要给予一个“,”分隔的数据文本他们就懂了，这就是ECharts的数据视图！当然，你可以重载数据视图的输出方法，用你独特的方式去呈现数据。如果你的用户足够的高端，你甚至可以打开数据视图的编辑功能，跟拖拽重计算相比，这可是批量的数据修改！
动态类型切换
很多图表类型本身所表现的能力是相似的，但由于数据差异、表现需求和个人喜好的不同导致最终图表所呈现的张力又大不一样，比如折线图和柱状图的选择总是让人头疼。ECharts提供了动态类型切换，让用户随心所欲的切换到他所需要的图表类型。
图例开关
多系列数据的同时展现呈现出丰富内容，但如何让用户切换到他所关心的个别系列上？ECharts提供了方便快捷的图例开关，可以随时切换到你所关心的数据系列。
数据区域选择
数据可以是无限的，但显示空间总是有限的，数据区域选择组件提供了大数据量中漫游的能力，让用户选择并呈现他所关心的数据区域。
值域漫游
基于坐标的图表(如地图、散点图)通过色彩变化表现数值的大小能直观形象的展示数据分布。但如何聚焦到我所关心的数值上？我们创造了称为值域漫游的功能，让你可以轻松进行数值筛选。
大规模散点图
如何展现成千上百万的离散数据从而找出他们的分布和聚类？貌似除了用专业的统计工具(如MATLAB)外别无选择？不，ECharts发明了基于像素的大规模散点图(专利)，一个900 x 400的散点区域就能够毫不重复的呈现35万组数据，这对于常规的应用，用现代浏览器就足以轻松展现百万级的散点数据！
标线辅助
趋势线？平均线？上升通道？支持位？专业的你自然知道该怎么用，提供标线辅助在K线图中可是必要的功能！当然，ECharts中的任何图表都可以使用。
多维度堆积
支持多系列，多维度的数据堆积，配合自动伸缩的图形实体和直角坐标系，能呈现出更有内涵的统计图表。
个性化定制
近300个可配置选项结合多级控制设计满足高度定制的个性化需求。
事件交互
可以捕获的用户交互和数据变化事件实现图表与外界的联动。
最新版本：3.0
更小体积的文件，满足更轻便的使用需求
更灵活的打包方式，可自由选择你需要的图表和组件
移动端强势来袭，良好的自适应效果
专属的移动端交互体验，更丰富的可视化效果
新增更多图表类型，更好的满足不同数据的处理需求 更多的搭配方案让你的数据呈现方式更个性和完美。
最新版本：4.0
2018年1月16日，百度EFE团队正式发布了旗下知名开源产品 ECharts 的最新大版本 4.0，新版本在产品的性能、功能、易用性等各个方面进行了全面提升。ECharts 4.0 最大的亮点是带来了 8 项堪称“黑科技”的全新特性：
千万级数据可视化的无阻塞体验
图表界第一个双引擎发动机，首创同时使用 Canvas 与 SVG，支持 SVG 渲染，可自由切换，内存占用更少
新增旭日图，为多层数据带来更酷的展现方式
数据与样式分离让数据传入变得更加方便
更扁平的配置项层级，更便捷的书写
首创数据可视化产品的无障碍访问支持
即将可以在微信小程序中使用 ECharts
可以在 PPT 中使用 ECharts
和 ECharts 4.0 一起发布的还有 ECharts GL 1.0 正式版、ZRender 4.0 全新版本、WebGL 框架 ClayGL、深度学习框架 Visual DL 等，可谓是一次百度在数据可视化领域的大阅兵。伴随这些产品的发布，百度也发布了全新升级的数据可视化品牌 —— “百度数据可视化实验室”，标志着百度在数据可视化领域将开启一番大的动作。新版本主要的升级点包括：
带给用户更强大的性能和功能
千万级数据可视化的无阻塞体验
渲染引擎 ZRender 全面升级，正式支持 SVG
新增了旭日图类型
让开发者使用 ECharts 变得更加轻松：数据与样式分离让数据传入变得更加方便；更扁平的配置项层级，更便捷的书写
让更多的人在更多的场景都能访问使用 ECharts 制作的可视化产品：首创数据可视化产品的无障碍访问支持；新增对于微信小程序的支持
具体改进记录如下：
[+] 支持最高达千万级数据量渲染。ECharts4 变更为流式结构，并且配合各种细致的优化，支持增量加载数据和渐进渲染。几千万的地理坐标数据就算使用二进制存储也要占上百 MB 的空间，增量加载数据可以使用户能使用 WebSocket 或者对数据分块后加载，从而能很快的渲染出结果并且阻塞浏览器。参见 scatterGL-gps、linesGL-ny。 ECharts 使用了渐进渲染来支持大数据场景下的平移缩放等交互，参见 lines-airline 的缩放平移。而 ECharts GL 下则会有效果好的交互体验。
[+] zrender SVG 渲染引擎发布，从而支持 Canvas / SVG 双引擎渲染，可进按照场景所需进行切换。例如，SVG 可适用于移动端、单页多图表等场景，Canvas 适用于大数据量、视觉特效需求等场景。Canvas 渲染引擎仍为默认引擎。
[+] 发布旭日图（sunburst），高效表达带有层次结构的数据占比情况，并有良好的交互体验。参见 旭日图。
[+] 新增 dataset 组件，从而能够数据与样式分离，便于单独管理数据，支持数据映射到视觉配置，可以多个系列共享数据，也省去数据分割处理的步骤。
[+] 支持无障碍富互联网应用规范集（WAI-ARIA，the Accessible Rich Internet Applications Suite），致力于使得网⻚内容和网⻚应，用能够被更多残障人士访问。
[+] ECharts 4 开始，label、itemStyle 等配置被扁平化了，去掉了原先的 normal 层级，使得 option 更为清爽。原先的配置方式也向后兼容。
[+] 新增了两套内置的颜色主题，名为 'light', 'dark'，可通过 echarts.init(dom, themeName); 来使用它们。
[+] 支持 legend.data 不指定时，自动根据系列生成。
[+] 支持类目轴（axis.type: 'category'）中 axis.data 不指定时，自动根据数据生成。
新增的旭日图
全新团队品牌“百度数据可视化实验室”，在发布各个新产品的同时，ECharts 团队宣布团队品牌升级为“百度数据可视化实验室”。从单一的技术产品研发团队进化为从各个方面联合各种伙伴推进可视化工作的联盟组织。新成立的百度数据可视化实验室，希望能够依托完善的产品支撑及丰富的经验，致力于提供更强大的数据可视化产品、参与数据可视化规范的制定、积极参与可视化基础知识的推广、传播数据可视化学术界及业界的研究成果及解决方案，和广大伙伴一同推动数据可视化行业的发展。
最新版本：5.2
Apache ECharts 5.2.0 于 2021年9月初正式发布，在这个版本中引入了非常酷炫的全局过渡动画，并且对调色盘取色策略、极坐标柱状图标签等做了很多优化和增强。
全局过渡动画
在 Apache ECharts 中我们一直把自然流畅的过渡动画作为一个重要特性。通过避免数据带来的突变，不仅仅可以改善视觉效果，更为表达数据的关联和演变提供了可能。因此，在 5.2.0 中，我们进一步将过渡动画从表现系列内部数据的变化，泛化到全局能力。接下来，我们会看到这种全局过渡动画 Universal Transition 是如何为图表增加表现力和叙事能力的。在之前的版本中，过渡动画有一定的局限性：只能用于相同类型的图形的位置、尺寸、形状，而且只能作用在相同类型的系列上。
跨系列的形变动画
在设置universalTransition: true开启全局过渡动画后，从饼图切换成柱状图，或者从柱状图切换成散点图，甚至旭日图和矩形树图这类复杂的图表之间，都可以通过形变的方式自然的进行动画过渡。
数据的分裂和合并动画
除了常见的数据值的更新，有时候我们还会碰到数据的聚合、下钻等交互后的更新，这个时候我们就不能直接应用一对一的动画过渡，而需要使用更多像分裂、合并这样的动画效果，来通过正确的图形动画表达出数据的变换。为了能够表达数据之间可能存在的多对多联系，在 5.2.0 中我们新引入了一个数据组groupId的概念，我们可以通过 series.dataGroupId 设置整个系列所属的组，或者更细粒度的通过 series.data.groupId 设置每个数据所属的组。如果你使用了dataset管理数据则更方便了，可以使用encode.itemGroupId来指定一个维度编码成groupId。
调色盘的取色策略
在上面全局过渡动画的示例中，大家可能有注意到我们使用了一个之前版本没有的colorBy配置项，这个配置项也是我们这个版本新增加的一个特性，用来给系列配置不同粒度的调色盘取色。
极坐标柱状图的标签
这个版本中我们实现了极坐标上的柱状图的标签，并且支持丰富的标签定位配置。
空数据的饼图样式
在之前的版本中，如果饼图没有数据，画面中可能就是完全空白的。因为没有任何的视觉元素，所以用户会疑惑是不是出现了 bug 导致图中没有内容。为了解决这个问题，这个版本我们会默认在无可显示数据的时候显示一个灰色的占位圆以防止画面中完全空白。可以通过emptyCircleStyle配置这个占位圆的样式。
高维数据的性能增强
从 4.0 开始引入了 dataset 用来管理图表的数据，通常情况下dataset提供了更方便的数据管理方式而且跟传统的方式不会有什么性能上的差别。在新版本中我们对这个问题做了优化，所有系列都尽可能共享 dataset 的数据（能否共享取决于系列怎么使用这份数据）存储而非每个系列都处理并存储一次，并且只处理和存储了使用到的维度。这些优化保证了内存不会随着 dataset 维度和系列的增长而爆炸，大幅度的提升了极端场景下的初始化性能。刚才例子的渲染耗时也从卡住降低到了可接受的 300 毫秒以下。这次优化带来收益的还不只是这种高维的场景，在使用维度不高但是数据量很大的 dataset 的时候，因为数据的共享所以多个系列只处理了一遍数据，因此也可以带来显著的性能提升。
自定义系列的类型优化
自定义系列提供了非常灵活的创建系列图形的方式，相对于其它系列，自定义系列的学习曲线可能有些陡峭，而且容易出错。因此在这个版本中，我们进一步的优化了自定义系列中的核心方法renderItem的类型，对于renderItem的参数和返回值类型做了更精确的推断，从而可以根据返回的图形类型推断出可以设置该图形的哪些属性。
项目主页：https://echarts.apache.org/zh/index.html
该文章最后由 阿炯 于 2021-09-03 11:49:32 更新，目前是第 3 版。