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
2018年1月16日，百度EFE团队正式发布了旗下知名开源产品 ECharts 的最新大版本 4.0，新版本在产品的性能、功能、易用性等各个方面进行了全面提升。ECharts v4.0 最大的亮点是带来了 8 项堪称“黑科技”的全新特性：
千万级数据可视化的无阻塞体验
图表界第一个双引擎发动机，首创同时使用 Canvas 与 SVG，支持 SVG 渲染，可自由切换，内存占用更少
新增旭日图，为多层数据带来更酷的展现方式
数据与样式分离让数据传入变得更加方便
更扁平的配置项层级，更便捷的书写
首创数据可视化产品的无障碍访问支持
即将可以在微信小程序中使用 ECharts
可以在 PPT 中使用 ECharts
和 v4.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
Apache ECharts v5.2.0 于 2021年9月初正式发布，在这个版本中引入了非常酷炫的全局过渡动画，并且对调色盘取色策略、极坐标柱状图标签等做了很多优化和增强。
全局过渡动画
在 Apache ECharts 中我们一直把自然流畅的过渡动画作为一个重要特性。通过避免数据带来的突变，不仅仅可以改善视觉效果，更为表达数据的关联和演变提供了可能。因此，在 5.2.0 中，我们进一步将过渡动画从表现系列内部数据的变化，泛化到全局能力。接下来，我们会看到这种全局过渡动画 Universal Transition 是如何为图表增加表现力和叙事能力的。在之前的版本中，过渡动画有一定的局限性：只能用于相同类型的图形的位置、尺寸、形状，而且只能作用在相同类型的系列上。
跨系列的形变动画
在设置universalTransition: true开启全局过渡动画后，从饼图切换成柱状图，或者从柱状图切换成散点图，甚至旭日图和矩形树图这类复杂的图表之间，都可以通过形变的方式自然的进行动画过渡。
数据的分裂和合并动画
除了常见的数据值的更新，有时候我们还会碰到数据的聚合、下钻等交互后的更新，这个时候我们就不能直接应用一对一的动画过渡，而需要使用更多像分裂、合并这样的动画效果，来通过正确的图形动画表达出数据的变换。为了能够表达数据之间可能存在的多对多联系，在 v5.2.0 中新引入了一个数据组groupId的概念，我们可以通过 series.dataGroupId 设置整个系列所属的组，或者更细粒度的通过 series.data.groupId 设置每个数据所属的组。如果你使用了dataset管理数据则更方便了，可以使用encode.itemGroupId来指定一个维度编码成groupId。
调色盘的取色策略
在上面全局过渡动画的示例中，大家可能有注意到我们使用了一个之前版本没有的colorBy配置项，这个配置项也是我们这个版本新增加的一个特性，用来给系列配置不同粒度的调色盘取色。
极坐标柱状图的标签
这个版本中实现了极坐标上的柱状图的标签，并且支持丰富的标签定位配置。
空数据的饼图样式
在之前的版本中，如果饼图没有数据，画面中可能就是完全空白的。因为没有任何的视觉元素，所以用户会疑惑是不是出现了 bug 导致图中没有内容。为了解决这个问题，这个版本我们会默认在无可显示数据的时候显示一个灰色的占位圆以防止画面中完全空白。可以通过emptyCircleStyle配置这个占位圆的样式。
高维数据的性能增强
从 v4.0 开始引入了 dataset 用来管理图表的数据，通常情况下dataset提供了更方便的数据管理方式而且跟传统的方式不会有什么性能上的差别。在新版本中我们对这个问题做了优化，所有系列都尽可能共享 dataset 的数据（能否共享取决于系列怎么使用这份数据）存储而非每个系列都处理并存储一次，并且只处理和存储了使用到的维度。这些优化保证了内存不会随着 dataset 维度和系列的增长而爆炸，大幅度的提升了极端场景下的初始化性能。刚才例子的渲染耗时也从卡住降低到了可接受的 300 毫秒以下。这次优化带来收益的还不只是这种高维的场景，在使用维度不高但是数据量很大的 dataset 的时候，因为数据的共享所以多个系列只处理了一遍数据，因此也可以带来显著的性能提升。
自定义系列的类型优化
自定义系列提供了非常灵活的创建系列图形的方式，相对于其它系列，自定义系列的学习曲线可能有些陡峭，而且容易出错。因此在这个版本中，我们进一步的优化了自定义系列中的核心方法renderItem的类型，对于renderItem的参数和返回值类型做了更精确的推断，从而可以根据返回的图形类型推断出可以设置该图形的哪些属性。
最新版本：6
包含 12 项重大升级的新版本 Apache ECharts v6.0 Beta 于2025年7月上旬发布！从最初的图表工具，到如今成长为支撑百万级开发者的可视化巨擘；从单一的前端图表库，演进为支持移动端、大屏、服务端渲染等全场景的技术体系。这 12 年间，我们见证了 ECharts 在技术方面的持续突破，更欣喜地看到全球开发者用 ECharts 创造出无数惊艳的数据故事。作为 ECharts 12 岁生日的献礼，我们呈上诚意满满的 12 项升级，只为百尺竿头，更进一步。
功能概览
12 年的沉淀只为更极致的可视化表达。Apache ECharts 的核心力量，始终源于对开发者真实挑战的深刻理解。当为 v6.0 定义方向时，问题很清晰：如何让复杂数据的呈现既足够强大，又足够优雅？
这驱使我们围绕三个核心维度进行深度进化：
更专业的可视化呈现：从精心打磨的默认主题，到响应系统深色的智能切换，确保图表具备专业质感，无缝融入现代应用体验。
拓展数据表达的边界：新增更多图表类型与功能，构建完整复杂场景应对体系，实现深度数据的直觉化表达。
释放组合编排的自由：从革命性的矩阵坐标系，到可复用的自定义系列生态，再到坐标轴标签优化 —— 赋予开发者更自由编排的能力，将创意映射为无拘束的可视化作品。
在这三个核心维度上做了 12 项升级。这些升级并非简单的功能叠加，而是为构建下一代数据驱动应用，铺设的坚实能力基座。它们共同指向一个目标：让 ECharts 强大、可靠、稳定地服务于后台，把舞台和聚光灯留给你的创造性表达。
下文将针对这十二项升级分别展开介绍：
更专业的可视化呈现
1. 全新默认主题：采用更符合现代审美的设计语言，以专业设计赋能数据表达
2. 动态主题切换：支持运行时无缝切换主题，适配多主题场景
3. 深色模式响应：自动适配系统深色/浅色模式，提升用户体验
拓展数据表达的边界
4. 新增和弦图：拓展复杂关系与分布数据的呈现方式
5. 新增蜂群图：通过动态分布算法，将重叠数据点智能展开为蜂窝状排列
6. 新增抖动散点图：通过增加散点图分布范围，增强高密度数据的可读性
7. 新增断轴：表达数据断层，轻松呈现量级悬殊的数据对比
8. 升级股市交易类图表：增强标签能力，更多开箱即用的交易类图表
释放组合编排的自由
9. 新增矩阵坐标系：各种图表类型和组件像表格一样自由组合，灵活布局
10. 升级自定义系列：支持 npm 发布与动态注册使用，实现自定义系列代码复用
11. 新增多款自定义图表：小提琴图、轮廓图、阶段图、范围柱状图、范围折线图
12. 坐标轴标签优化：新版智能优化坐标标签布局，默认防溢出防重叠
希望通过 Apache ECharts v6.0 的全新升级，帮助用户更灵活方便地创建更多图表，实现真正的 “前图无量”！
功能介绍
1. 全新默认主题
在 ECharts v6.0 的开发过程中深入分析了用户的真实使用场景，发现超过七成的开发者直接采用默认主题。这让我们意识到：一个优秀的默认主题不仅要具备美学价值，更要符合各个业务场景的通用需求。新版主题系统内部使用了设计令牌（design token）对颜色、距离等设计元素进行重构，使得不同图表类型和组件之间更和谐一致。
虽然 6.0 的主题在 5.x 版本上有非常大的调整，但是我们提供了一个 v5.js 主题文件，对于希望使用新版本功能但保留原有样式的开发者，可以实现快速迁移。
2. 动态主题切换
在之前的版本中，如果想要改变一个图表的主题，就必须注销图表实例后重新初始化，二次的初始动画可能对用户体验带来负面影响。在新版本中，我们实现了主题的动态切换能力，显著地提升用户体验。
3. 深色模式响应
在实现主题的动态注册和切换之后，一个典型场景是监听系统是否使用深色模式，并动态调整图表的深色与浅色主题。
这对于支持深色模式的业务场景至关重要，可以确保应用界面与系统主题风格一致，显著提升用户体验的流畅性和专业性。
4. 新增和弦图
和弦图直观展现复杂关系网络中的流量与权重，特别适合金融交易、社交网络等场景的多维度关系分析。ECharts 创新性地支持使用出节点和入节点的渐变色作为边的颜色，呈现独特的视觉美感。
5. 新增蜂群图
传统的散点图在类目轴下如果数据过于密集，蜂群图（Beeswarm）通过将数据在非数值维度上的偏移，在保持数值轴准确性的前提下，实现散点图的无重叠分布。
6. 新增抖动散点图
抖动散点图（Scatter Jittering）采用随机扰动策略，在非数据维度上添加固定范围的随机偏移，解决数据过于密集的问题。
从下图可以看到，在未使用抖动的情况下，如果数据过于密集，很难看清数据的分布情况。
而在开启了数据抖动之后，可以更清楚地看到数据分布最密集的范围是 6-8 之间。并且，相比蜂群图，抖动散点图具有更高的处理性能。
7. 新增断轴
断轴（Broken Axis）是一种通过坐标轴断层展现悬殊量级数据的可视化手段。在 ECharts 6.0 中，我们创新性地实现了模拟撕纸效果的断轴，使得断轴的含义能被更直观地传递，并且支持点击展开的效果，还原到真实数据比例。
8. 升级股市交易类图表
ECharts 6.0 针对金融交易场景深度优化，增强了标签针对坐标系的相对定位能力，助力开发者快速构建专业级行情分析工具。
下图展示了一个使用 ECharts 实现的股市交易图的综合应用场景，结合了分时图、MACD、成交量、买卖盘口、深度图：
这些实例可以帮助开发者快速实现金融交易场景的需求。
9. 新增矩阵坐标系
上述例子也用到了 v6.0 新增的矩阵坐标系，它的功能十分强大。不仅可以用来做协方差矩阵图：
元素周期表：
作为一种布局，它还允许开发者将各种图表类型和组件结合，创造出灵活复杂的可视化作品：
10. 升级自定义系列
过去，使用 ECharts 自定义系列意味着开发者必须从零手写 renderItem 复杂逻辑，即使是复用，也只是复制粘贴代码。现在，ECharts 6.0 带来标准化可复用方案：
自定义系列的注册机制：和主题注册类似，自定义系列也可以动态注册和使用，使用方式和内置图表系列一样简单方便
官方自定义系列项目：官方在 https://github.com/apache/echarts-custom-series 发布了多个自定义系列，在正式版本发布后，开发者可以通过 npm 等方便地获取
发布自己的自定义系列：可以向上述项目提 Pull Request 或发布到自己的仓库，实现自定义系列的复用
11. 新增多款自定义图表
本次发布，自定义系列项目提供了 6 款实用的图表。包括小提琴图：
轮廓图：
睡眠阶段图：
分段环形图：
范围柱状图：
范围折线图：
发挥你的创意，快来和我们一起创造更多自定义图表吧！
12. 坐标轴标签优化
在之前的版本中，直角坐标系的 axisLabel 和 axisName 在数据比较长时容易超出屏幕，以及重叠。数据变化时使用者并不总能准确预估空间来完全避免它们。在这个版本中我们优化了防止超出屏幕以及防止重叠的策略，并成为默认。
升级指南
v6.0 目前已发布 beta 版本，可以通过 npm install echarts@6.0.0-beta.1 抢先体验并反馈问题。正式发布后，原有项目可以通过 npm install echarts@6 升级。届时官网将同步更新升级指南、文档及教程。前往 GitHub Release 查看更多信息。
前图无量・与君同行
ECharts MCP 开源在即
在 AI 重塑数据洞察的今天，即将开源一个 ECharts Model Context Protocol (MCP) 项目，用大模型能力重新定义数据表达的终极形态，完成数据可视化的最后一公里，助你轻松实现前图无量。将在未来几个月逐步揭晓更多技术细节，以及如何利用 MCP 构建企业级智能图表服务的完整指南。请持续关注我们，获取最新技术解析和最佳实践案例。
接下来的几个月会持续输出更多教程，详细地介绍 v6.0 的各大新功能，敬请关注！十二年前的星星之火，借开源的力量，已成今日之炬。v6.0 的每一行代码、每一个新功能，都凝聚着社区开发者的智慧与付出。
项目主页：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
2018年1月16日，百度EFE团队正式发布了旗下知名开源产品 ECharts 的最新大版本 4.0，新版本在产品的性能、功能、易用性等各个方面进行了全面提升。ECharts v4.0 最大的亮点是带来了 8 项堪称“黑科技”的全新特性：
千万级数据可视化的无阻塞体验
图表界第一个双引擎发动机，首创同时使用 Canvas 与 SVG，支持 SVG 渲染，可自由切换，内存占用更少
新增旭日图，为多层数据带来更酷的展现方式
数据与样式分离让数据传入变得更加方便
更扁平的配置项层级，更便捷的书写
首创数据可视化产品的无障碍访问支持
即将可以在微信小程序中使用 ECharts
可以在 PPT 中使用 ECharts
和 v4.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
Apache ECharts v5.2.0 于 2021年9月初正式发布，在这个版本中引入了非常酷炫的全局过渡动画，并且对调色盘取色策略、极坐标柱状图标签等做了很多优化和增强。
全局过渡动画
在 Apache ECharts 中我们一直把自然流畅的过渡动画作为一个重要特性。通过避免数据带来的突变，不仅仅可以改善视觉效果，更为表达数据的关联和演变提供了可能。因此，在 5.2.0 中，我们进一步将过渡动画从表现系列内部数据的变化，泛化到全局能力。接下来，我们会看到这种全局过渡动画 Universal Transition 是如何为图表增加表现力和叙事能力的。在之前的版本中，过渡动画有一定的局限性：只能用于相同类型的图形的位置、尺寸、形状，而且只能作用在相同类型的系列上。
跨系列的形变动画
在设置universalTransition: true开启全局过渡动画后，从饼图切换成柱状图，或者从柱状图切换成散点图，甚至旭日图和矩形树图这类复杂的图表之间，都可以通过形变的方式自然的进行动画过渡。
数据的分裂和合并动画
除了常见的数据值的更新，有时候我们还会碰到数据的聚合、下钻等交互后的更新，这个时候我们就不能直接应用一对一的动画过渡，而需要使用更多像分裂、合并这样的动画效果，来通过正确的图形动画表达出数据的变换。为了能够表达数据之间可能存在的多对多联系，在 v5.2.0 中新引入了一个数据组groupId的概念，我们可以通过 series.dataGroupId 设置整个系列所属的组，或者更细粒度的通过 series.data.groupId 设置每个数据所属的组。如果你使用了dataset管理数据则更方便了，可以使用encode.itemGroupId来指定一个维度编码成groupId。
调色盘的取色策略
在上面全局过渡动画的示例中，大家可能有注意到我们使用了一个之前版本没有的colorBy配置项，这个配置项也是我们这个版本新增加的一个特性，用来给系列配置不同粒度的调色盘取色。
极坐标柱状图的标签
这个版本中实现了极坐标上的柱状图的标签，并且支持丰富的标签定位配置。
空数据的饼图样式
在之前的版本中，如果饼图没有数据，画面中可能就是完全空白的。因为没有任何的视觉元素，所以用户会疑惑是不是出现了 bug 导致图中没有内容。为了解决这个问题，这个版本我们会默认在无可显示数据的时候显示一个灰色的占位圆以防止画面中完全空白。可以通过emptyCircleStyle配置这个占位圆的样式。
高维数据的性能增强
从 v4.0 开始引入了 dataset 用来管理图表的数据，通常情况下dataset提供了更方便的数据管理方式而且跟传统的方式不会有什么性能上的差别。在新版本中我们对这个问题做了优化，所有系列都尽可能共享 dataset 的数据（能否共享取决于系列怎么使用这份数据）存储而非每个系列都处理并存储一次，并且只处理和存储了使用到的维度。这些优化保证了内存不会随着 dataset 维度和系列的增长而爆炸，大幅度的提升了极端场景下的初始化性能。刚才例子的渲染耗时也从卡住降低到了可接受的 300 毫秒以下。这次优化带来收益的还不只是这种高维的场景，在使用维度不高但是数据量很大的 dataset 的时候，因为数据的共享所以多个系列只处理了一遍数据，因此也可以带来显著的性能提升。
自定义系列的类型优化
自定义系列提供了非常灵活的创建系列图形的方式，相对于其它系列，自定义系列的学习曲线可能有些陡峭，而且容易出错。因此在这个版本中，我们进一步的优化了自定义系列中的核心方法renderItem的类型，对于renderItem的参数和返回值类型做了更精确的推断，从而可以根据返回的图形类型推断出可以设置该图形的哪些属性。
最新版本：6
包含 12 项重大升级的新版本 Apache ECharts v6.0 Beta 于2025年7月上旬发布！从最初的图表工具，到如今成长为支撑百万级开发者的可视化巨擘；从单一的前端图表库，演进为支持移动端、大屏、服务端渲染等全场景的技术体系。这 12 年间，我们见证了 ECharts 在技术方面的持续突破，更欣喜地看到全球开发者用 ECharts 创造出无数惊艳的数据故事。作为 ECharts 12 岁生日的献礼，我们呈上诚意满满的 12 项升级，只为百尺竿头，更进一步。
功能概览
12 年的沉淀只为更极致的可视化表达。Apache ECharts 的核心力量，始终源于对开发者真实挑战的深刻理解。当为 v6.0 定义方向时，问题很清晰：如何让复杂数据的呈现既足够强大，又足够优雅？
这驱使我们围绕三个核心维度进行深度进化：
更专业的可视化呈现：从精心打磨的默认主题，到响应系统深色的智能切换，确保图表具备专业质感，无缝融入现代应用体验。
拓展数据表达的边界：新增更多图表类型与功能，构建完整复杂场景应对体系，实现深度数据的直觉化表达。
释放组合编排的自由：从革命性的矩阵坐标系，到可复用的自定义系列生态，再到坐标轴标签优化 —— 赋予开发者更自由编排的能力，将创意映射为无拘束的可视化作品。
在这三个核心维度上做了 12 项升级。这些升级并非简单的功能叠加，而是为构建下一代数据驱动应用，铺设的坚实能力基座。它们共同指向一个目标：让 ECharts 强大、可靠、稳定地服务于后台，把舞台和聚光灯留给你的创造性表达。
下文将针对这十二项升级分别展开介绍：
更专业的可视化呈现
1. 全新默认主题：采用更符合现代审美的设计语言，以专业设计赋能数据表达
2. 动态主题切换：支持运行时无缝切换主题，适配多主题场景
3. 深色模式响应：自动适配系统深色/浅色模式，提升用户体验
拓展数据表达的边界
4. 新增和弦图：拓展复杂关系与分布数据的呈现方式
5. 新增蜂群图：通过动态分布算法，将重叠数据点智能展开为蜂窝状排列
6. 新增抖动散点图：通过增加散点图分布范围，增强高密度数据的可读性
7. 新增断轴：表达数据断层，轻松呈现量级悬殊的数据对比
8. 升级股市交易类图表：增强标签能力，更多开箱即用的交易类图表
释放组合编排的自由
9. 新增矩阵坐标系：各种图表类型和组件像表格一样自由组合，灵活布局
10. 升级自定义系列：支持 npm 发布与动态注册使用，实现自定义系列代码复用
11. 新增多款自定义图表：小提琴图、轮廓图、阶段图、范围柱状图、范围折线图
12. 坐标轴标签优化：新版智能优化坐标标签布局，默认防溢出防重叠
希望通过 Apache ECharts v6.0 的全新升级，帮助用户更灵活方便地创建更多图表，实现真正的 “前图无量”！
功能介绍
1. 全新默认主题
在 ECharts v6.0 的开发过程中深入分析了用户的真实使用场景，发现超过七成的开发者直接采用默认主题。这让我们意识到：一个优秀的默认主题不仅要具备美学价值，更要符合各个业务场景的通用需求。新版主题系统内部使用了设计令牌（design token）对颜色、距离等设计元素进行重构，使得不同图表类型和组件之间更和谐一致。
虽然 6.0 的主题在 5.x 版本上有非常大的调整，但是我们提供了一个 v5.js 主题文件，对于希望使用新版本功能但保留原有样式的开发者，可以实现快速迁移。
2. 动态主题切换
在之前的版本中，如果想要改变一个图表的主题，就必须注销图表实例后重新初始化，二次的初始动画可能对用户体验带来负面影响。在新版本中，我们实现了主题的动态切换能力，显著地提升用户体验。
3. 深色模式响应
在实现主题的动态注册和切换之后，一个典型场景是监听系统是否使用深色模式，并动态调整图表的深色与浅色主题。
这对于支持深色模式的业务场景至关重要，可以确保应用界面与系统主题风格一致，显著提升用户体验的流畅性和专业性。
4. 新增和弦图
和弦图直观展现复杂关系网络中的流量与权重，特别适合金融交易、社交网络等场景的多维度关系分析。ECharts 创新性地支持使用出节点和入节点的渐变色作为边的颜色，呈现独特的视觉美感。
5. 新增蜂群图
传统的散点图在类目轴下如果数据过于密集，蜂群图（Beeswarm）通过将数据在非数值维度上的偏移，在保持数值轴准确性的前提下，实现散点图的无重叠分布。
6. 新增抖动散点图
抖动散点图（Scatter Jittering）采用随机扰动策略，在非数据维度上添加固定范围的随机偏移，解决数据过于密集的问题。
从下图可以看到，在未使用抖动的情况下，如果数据过于密集，很难看清数据的分布情况。
而在开启了数据抖动之后，可以更清楚地看到数据分布最密集的范围是 6-8 之间。并且，相比蜂群图，抖动散点图具有更高的处理性能。
7. 新增断轴
断轴（Broken Axis）是一种通过坐标轴断层展现悬殊量级数据的可视化手段。在 ECharts 6.0 中，我们创新性地实现了模拟撕纸效果的断轴，使得断轴的含义能被更直观地传递，并且支持点击展开的效果，还原到真实数据比例。
8. 升级股市交易类图表
ECharts 6.0 针对金融交易场景深度优化，增强了标签针对坐标系的相对定位能力，助力开发者快速构建专业级行情分析工具。
下图展示了一个使用 ECharts 实现的股市交易图的综合应用场景，结合了分时图、MACD、成交量、买卖盘口、深度图：
这些实例可以帮助开发者快速实现金融交易场景的需求。
9. 新增矩阵坐标系
上述例子也用到了 v6.0 新增的矩阵坐标系，它的功能十分强大。不仅可以用来做协方差矩阵图：
元素周期表：
作为一种布局，它还允许开发者将各种图表类型和组件结合，创造出灵活复杂的可视化作品：
10. 升级自定义系列
过去，使用 ECharts 自定义系列意味着开发者必须从零手写 renderItem 复杂逻辑，即使是复用，也只是复制粘贴代码。现在，ECharts 6.0 带来标准化可复用方案：
自定义系列的注册机制：和主题注册类似，自定义系列也可以动态注册和使用，使用方式和内置图表系列一样简单方便
官方自定义系列项目：官方在 https://github.com/apache/echarts-custom-series 发布了多个自定义系列，在正式版本发布后，开发者可以通过 npm 等方便地获取
发布自己的自定义系列：可以向上述项目提 Pull Request 或发布到自己的仓库，实现自定义系列的复用
11. 新增多款自定义图表
本次发布，自定义系列项目提供了 6 款实用的图表。包括小提琴图：
轮廓图：
睡眠阶段图：
分段环形图：
范围柱状图：
范围折线图：
发挥你的创意，快来和我们一起创造更多自定义图表吧！
12. 坐标轴标签优化
在之前的版本中，直角坐标系的 axisLabel 和 axisName 在数据比较长时容易超出屏幕，以及重叠。数据变化时使用者并不总能准确预估空间来完全避免它们。在这个版本中我们优化了防止超出屏幕以及防止重叠的策略，并成为默认。
升级指南
v6.0 目前已发布 beta 版本，可以通过 npm install echarts@6.0.0-beta.1 抢先体验并反馈问题。正式发布后，原有项目可以通过 npm install echarts@6 升级。届时官网将同步更新升级指南、文档及教程。前往 GitHub Release 查看更多信息。
前图无量・与君同行
ECharts MCP 开源在即
在 AI 重塑数据洞察的今天，即将开源一个 ECharts Model Context Protocol (MCP) 项目，用大模型能力重新定义数据表达的终极形态，完成数据可视化的最后一公里，助你轻松实现前图无量。将在未来几个月逐步揭晓更多技术细节，以及如何利用 MCP 构建企业级智能图表服务的完整指南。请持续关注我们，获取最新技术解析和最佳实践案例。
接下来的几个月会持续输出更多教程，详细地介绍 v6.0 的各大新功能，敬请关注！十二年前的星星之火，借开源的力量，已成今日之炬。v6.0 的每一行代码、每一个新功能，都凝聚着社区开发者的智慧与付出。
项目主页：https://echarts.apache.org/zh/index.html
该文章最后由 阿炯 于 2025-07-03 15:35:26 更新，目前是第 3 版。