ECharts 全新大版本 4.0 正式发布！百度数据可视化实验室成立

2018年1月16日，百度发布了旗下知名开源产品 ECharts （echarts.baidu.com）的最新大版本 4.0，新版本在产品的性能、功能、易用性等各个方面进行了全面提高。和 ECharts 4.0 一块儿发布的还有 ECharts GL 1.0正式版，ZRender 4.0全新版本，WebGL 框架 ClayGL、深度学习框架Visual DL等，可谓是一次百度在数据可视化领域的大阅兵。伴随这些产品的发布，百度也发布了全新升级的数据可视化品牌----“百度数据可视化实验室”，标志着百度在数据可视化领域将开启一番大的动做。

首先欢迎一波star！

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中插入图表的更好的选择。以电脑端浏览器中典型的图表尺寸（1280x600）为例，导出图片的文件尺寸分别为：

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 了解项目详情

下方为产品示例：

3. 全新团队品牌“百度数据可视化实验室”

在发布各个新产品的同时，ECharts 团队宣布团队品牌升级为“百度数据可视化实验室”（vis.baidu.com）。从单一的技术产品研发团队进化为从各个方面联合各类伙伴推动可视化工做的联盟组织。

新成立的百度数据可视化实验室，但愿可以依托完善的产品支撑及丰富的经验，致力于提供更强大的数据可视化产品、参与数据可视化规范的制定、积极参与可视化基础知识的推广、传播数据可视化学术界及业界的研究成果及解决方案，和广大伙伴一同推进数据可视化行业的发展。