ECharts 全新大版本 4.0 正式发布 即将支持微信小程序中使用ECharts

2018年1月16日，ECharts （echarts.baidu.com）发布了最新大版本 4.0，新版本在产品的性能、功能、易用性等各个方面进行了全面提升。和 ECharts 4.0 一起发布的还有 ECharts GL 1.0正式版，ZRender 4.0全新版本，WebGL 框架 ClayGL、深度学习框架Visual DL等，可谓是一次ECharts团队在数据可视化领域的大阅兵。

1. 全新 ECharts 4.0

本次 ECharts 4.0 新版本主要的升级点包括：

带给用户更强大的性能和功能

• 千万级数据可视化的无阻塞体验
• 渲染引擎 ZRender 全面升级，正式支持SVG
• 新增了旭日图类型

让开发者使用ECharts变得更加轻松

• 数据与样式分离让数据传入变得更加方便
• 更扁平的配置项层级，更便捷的书写

让更多的人在更多的场景都能访问使用ECharts制作的可视化产品

• 首创数据可视化产品的无障碍访问支持
• 新增对于微信小程序的支持
• 基于Gallery研发出了PowerPoint插件

下面分别为大家详细介绍其中的重点升级功能：

1.1 千万级数据可视化的无阻塞体验

ECharts 作为一个通用的数据可视化解决方案，能够稳定高效的展示几百到十万量级的数据集一直是 ECharts 引以为豪的一个特性。而在 4.0 中，ECharts 把这一数量级又进行了大幅度提升。

在 4.0 中，ECharts通过以下手段：

• 数据的流加载支持
• 增量渲染
• 内存优化、
• WebGL绘制优化

克服了以下各种难题：

• 大体积文件的传输耗时、
• 几千万的数据处理导致的浏览器卡顿阻塞
• 无法实时重绘所有图形、
• 大数据存储在浏览器上后过高的内存占用会导致 GC

把性能量级提升到了千万级别，在部分场景下测试数据能够到达亿级别，把ECharts的性能能力再一次提升到业界领先水平。后续会有专门的技术文章详细分享 ECharts 团队是如何在性能上做到极致。

1.2 支持SVG渲染，内存占用更少，可导出高清矢量图片

ECharts 4.0 支持以Canvas、SVG、VML的形式渲染图表，不同的渲染方式提供了更多选择，使得在各种场景下都有更好的表现。

新增的SVG渲染方式，在内存占用方面有很好的表现，以折线图、柱状图、饼图为例，SVG渲染占用的内存是Canvas渲染的十分之一。这意味着，对于移动端场景，尤其是配置较为低端的安卓手机而言，在原先使用Canvas会造成卡顿甚至页面崩溃的情况下，SVG也能顺滑地完成渲染工作。

渲染性能针对不同类型的图表和运行平台有较大差异，有些场景下SVG优于Canvas，有些则次于，用户可以根据自己的使用场景选择更合适的渲染方式。通常来说，SVG渲染折线图和饼图的效率更高，而由于Canvas渲染矩形的效率很高，所以柱状图使用Canvas渲染的效率高于SVG。另一方面，IE对于SVG的支持较差，因而性能一般比Canvas差；而Chrome上的SVG则有很好的表现。对于性能敏感的需求，用户可以测试特定图表的性能表现，并决定在各种平台上分别使用哪种渲染方式。

此外，有用户反馈需要在PDF报表中加入ECharts图表的图片，之前使用Canvas渲染的文件尺寸很大。而现在使用SVG渲染可以将图表导出为矢量图片，文件尺寸更小，并且永远不会产生锯齿，是在PDF中插入图表的更好的选择。以电脑端浏览器中典型的图表尺寸（1280×600）为例，导出图片的文件尺寸分别为：

1.3 新增旭日图，为多层数据带来更酷的展现方式

每次大版本升级一定会伴随着新的强大图表的支持，4.0 也不例外，ECharts 在本次升级中新增了一种叫做旭日图的图表类型。旭日图可以理解为多个层次的饼图，内圈是外圈的父元素，通过这样的形式，可以很直观高效地展现带有层次结构的数据占比情况，并且具有很好的视觉效果。

ECharts 为旭日图提供了非常丰富的配置项。以文字为例，提供了径向、切向、水平、或任意的旋转⻆度，并且可以在图形元素的内侧或外侧，以多种对⻬方式显示文字。实现了旭日图的数据下钻功能，点击一个数据后，可以展现表示其后代元素的旭日图，并且使用优雅的动画进行过度。在这些强大的功能帮助之下，用户可以使用旭日图，轻松创建出艺术品级别的可视化作品。

1.4 数据与样式分离让数据传入变得更加方便

让开发者简便地进行图表开发是ECharts的设计初衷，之前 ECharts 一直采用的声明式的图表配置，数据一直声明在各个“系列”中，这种方式易于直观理解。但是一些实践场景中，使用者更倾向于，把数据这种大体量的信息，单独配置，从而便于管理，以及能够被多个组件复用。

从4.0开始，ECharts支持了单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以自由指定数据到视觉的映射。这在不少场景下能带来使用上的方便。有了数据表之后，使用者可以灵活得配置：数据如何对应到轴和图形系列，可以改变图表对于行列的理解，也可以指定坐标轴对应的行列。

示例：

				
					{
					dataset: {
					source: [
					['product', '2015', '2016', '2017'],
					['Matcha Latte', 89.3, 95.8, 97.7],
					['Milk Tea', 92.1, 89.4, 83.1],
					['Cheese Cocoa', 94.4, 91.2, 92.5],
					['Walnut Brownie', 85.4, 76.9, 78.1]
					]
					},
					xAxis: {type: 'category'},
					yAxis: {}
					series: [
					{type: 'bar'},
					{type: 'bar'},
					{type: 'bar'}
					]
					}
				
			

1.5 更扁平的配置项层级，更便捷的书写

在 3.0 版本中，ECharts 已经做了一次 Option 扁平化的尝试，减少了样式设置的层级，这次更进一步去掉了normal这个层级，样式可以像下面这样直接写在itemStyle，label层级下！

				
					series: [{
					type: 'bar',
					itemStyle: {
					color: '#ff00ff',
					opacity: 0.5
					}
					}]
				
			

而所有的高亮的配置都会统一放在一个emphasis的大结构下

				
					series: [{
					type: 'bar',
					emphasis: {
					itemStyle: {
					color: '#ff00ff'
					},
					label: {
					show: true
					}
					}
					}]
				
			

更扁平的层级可以让配置项更加干净，书写也更加便捷！

1.6 首创数据可视化产品的无障碍访问支持

当我们说到“可视化”的时候，往往很自然地将它与“看得见”联系在一起，但其实这是片面的。W3C制定了无障碍富互联网应用规范集（WAI-ARIA，the Accessible Rich Internet Applications Suite），致力于使得网页内容和网页应用能够被更多残障人士访问。

ECharts 4.0 遵从这一规范，支持自动根据图表配置项智能生成描述，使得有视力障碍的人可以在朗读设备的帮助下了解图表内容，让图表可以被更多人群访问。通过增加严格遵循 W3C 规范的 aria-label 属性，针对大部分图表类型进行智能语音描述生成，也支持开发者自定义设置该属性，以最合理的方式进行无障碍的访问。

举例来说，对于下面一个饼图，在配置了aria.show = true 的前提下，图表DOM会增加一个aria-label属性（W3C规范中，该属性会被朗读设备认为是该DOM节点的描述），其值是：

这是一个关于“某站点用户访问来源”的表示访问来源的饼图，包括5个数据项。其数据是——直接访问的数据是335，占13.08%；邮件营销的数据是310，占12.1%；联盟广告的数据是234，占9.13%；视频广告的数据是135，占5.27%；搜索引擎的数据是1548，占60.42%。

ECharts 希望在无障碍访问的探索和尝试，能够帮助更广泛的用户能够了解真实，探索世界。

1.7 马上就可以在微信小程序中使用ECharts了！

很多微信小程序开发者表示他们强烈需要像ECharts这样的可视化工具。但是微信小程序是不支持DOM操作的，Canvas接口也和浏览器不尽相同。

因此，ECharts团队和微信小程序官方团队合作，提供了ECharts的微信小程序版本。开发者可以通过熟悉的ECharts配置方式，快速开发图表，满足各种可视化需求。

目前项目已完成了开发和内测工作，目前正在等待微信小程序开发工具的更新上线，敬请期待！

1.8 以后可以在 PPT 里使用 ECharts 了

在 PPT 中插入 ECharts 一直是许多PPTer反馈最多的需求，如今，终于可以在 PPT 里使用 ECharts 了！你可以在 Gallery 里创建你自己的图表作品后保存。然后在 PPT 里插入 ECharts 组件，选择你刚保存的图表，马上你就可以在 PPT 里拥有一个丰富的样式，动画和交互的图表展示了！

目前该插件已经在等待微软商店审核，相信不需要多久，用户进行该功能的试用。

2. 其它重量产品

除了 ECharts 4.0，还发布了

• ECharts GL 1.0 正式版

ZRender 4.0

• WebGL 框架 Clay GL
• Visual DL

2.1 ECharts GL 1.0正式版

去年发布的 ECharts GL（欢迎star） 引起了可视化届一片惊呼，如今该产品的 1.0 正式版正式发布，在正式版中，修复了大量的稳定性问题，完善了文档，同时，新增了以下强大的功能：

• 集成 Mapbox 地理可视化组件

• 支持洋流风场等向量场的可视化

• 新增了建筑群可视化的组件

• 加入了更多的二维加速组件去优化交互的重绘

2.2 ZRender 4.0 版本升级

作为ECharts的底层渲染库，ZRender承担起了抹平平台差异、封装技术细节、提高渲染性能等责任。在此次发布的4.0版本中，SVG渲染的支持使得ZRender的渲染能力有了进一步提升。

ZRender以基本图形元素为核心，提供了矩形、圆形、扇形、多边形、折线段、贝赛尔曲线等十多种基本图形，并支持图形直接的组合与剔除，最终以Canvas、SVG或VML的形式输出，并且支持交互处理。ZRender封装了不同平台的事件处理机制，将诸如底层鼠标事件映射到图形层面的事件（例如能够获取到鼠标悬停在图形上的事件），方便开发者处理事件。因此，对于与图形元素强相关的需求，用户可以考虑使用ZRender矢量化的逻辑对图形进行管理，能够方便高效地完成渲染和交互任务。

在此之前，ZRender主要是作为ECharts的底层渲染库存在的，随着ZRender的直接用户越来越多，团队在ZRender官网开放了ZRender的API文档，并且给出了教程和例子，帮助大家更方便地学会使用。

2.3 高性能渐进式 WebGL 框架 ClayGL

除了 ZRender，ECharts团队这次也发布了 ECharts GL 底层所使用的 WebGL 框架： ClayGL。ClayGL 是一个渐进式的高性能 WebGL 框架（这里感谢 Vue 提出的渐进式框架的概念），能够帮助用户快速创建一个 Web3D 应用，在 ECharts GL 中的应用已经证明了其能力之强大。

在去年，ClayGL 已经在手机百度这样拥有上亿用户的产品中落地了三维模型展示的应用，充分验证了产品的可靠性。

团队后续将围绕 ClayGL 打造一系列的可视化工具及 Web3D 产品。

2.4 深度学习可视化平台 Visual DL

从去年开始，团队和百度PaddlePaddle深度合作，打造了一款深度学习可视化平台 Visual DL，也在这次一同发布，希望通过可视化的方法将模型训练过程中的各个参数以及计算的数据流图实时地展现出来，以帮助模型训练者更好的理解、调试、优化模型。用户只需要通过 Visual DL 提供的接口将模型相关的各种参数数据写入日志中，然后Visual DL 会读取日志中的模型相关数据将其展示出来，这些数据包括模型训练过程中的各种定量的度量、用户传入的或者中间训练过程生成的各种图片、以及神经网络训练过程中的计算数据流图。

访问 Visual DL Github 了解项目详情

下方为产品示例：

相关文章：

ECharts, PHP, MySQL, Ajax, JQuery 实现前后端数据可视化

Flask+Echarts 实现动图图表

DataV接入ECharts图表库 可视化利器强强联手

ECharts又搞大动作！3.5 版本提供更多数据可视化图表

ECharts 3 测试版发布，焕然一新的面貌

Echarts在数据新闻上的应用

关于数据可视化商业图表工具ECharts背后那些事儿

End.

转载请注明来自36大数据（36dsj.com)： 36大数据 » ECharts 全新大版本 4.0 正式发布 即将支持微信小程序中使用ECharts