2018年1月16日，百度EFE团队即将发布旗下知名开源产品ECharts的最新大版本4.0。 新版本全面提升了产品的性能、功能、易用性，标志着百度在可视化领域的发展。 另一个突破性的里程碑已经到来。
3月31日，由百度开发者中心主办、极客帮科技主办、百度创新中心承办的第77届百度技术沙龙邀请了百度中级技术经理祖明、百度高级后端研发工程师苏爽、百度中级后端——终端研发工程师张文利、百度中级后端研发工程师王俊廷、百度高级后端研发工程师沉毅、百度中级后端研发工程师李德清共六位讲师，从ECharts产品功能、技术实现、可视化实践从四个维度出发，全面介绍了如何更好地利用ECharts让用户洞察数据，为观众带来一场深度了解ECharts的分享活动。
ECharts开源之路
百度中层技术经理祖明致开幕词。 他首先介绍了百度开源ECharts项目的发展历史。 从2013年6月发布ECharts 1.0到2018年1月发布ECharts 4.0的四年间，ECharts项目累计迭代发布64个版本，Github关注人数已达26530人，备受关注并受到行业权威人士的广泛好评。
2013年6月，ECharts发布1.0版本； 2014年6月，ECharts发布2.0版本，在1.0的基础上性能提升了3+倍，增加了全矩形图表，支持大范围数据，增加了时间轴、Dashboards、漏斗图、变化图支持svg扩张; 随后，团队根据后端技术的发展趋势和用户需求，对ECharts的整体技术架构进行了极大的优化，并于2016年1月发布了ECharts 3.0，3.0在功能和性能方面都有了很大的提升，包括产品风格和相互作用。
今年1月16日，ECharts 4.0诞生，八项新功能，让产品更上一层楼。 ECharts 4.0希望打造一个模型，让更多人在更多场景下享受数据可视化的乐趣。 帮助人们探索世界、了解真理的价值。
ECharts 4.0最大的亮点在于它带来了8项堪称“黑科技”的新功能：
ECharts的未来
近日，全球知名开源社区Apache基金会宣布“百度开源ECharts项目获得一致通过，进入Apache孵化器”。 这是百度第一个进入国际顶级开源社区的项目，也标志着百度开源即将步入开源发展的快车道。 未来，ECharts团队将继续维护，希望有更多人加入，为开发者提供更好的体验。
ECharts 4.0核心特性分析
ECharts的成功和广泛应用一定离不开其颠覆性的功能设计和技术特点。 ECharts高级研发工程师苏爽、张文利从ECharts 4.0的新技术特性入手，从大数据渲染、数据集、跨平台、无障碍访问等方面介绍了新版本的使用场景和设计原理。技术特点。
大数据量渲染
本文中的大数据量渲染是指浏览器中数千到千万级数据的渲染和交互。 ECharts4.0在优化这种事情上下了很大的功夫。 数据可视化使用浏览器作为重要的输出形式，但浏览器在性能上存在一定的局限性。 主要针对以下几个方面：
ECharts针对这些做了一系列的优化，包括：基于场景特征的优化、程序级的优化、用户感官的优化、加载的优化：
基于场景特征优化
以图形的简化为例，介绍了ECharts如何根据场景特征进行优化。 下图是K线图。 每个图结构复杂，渲染时间会比简单图更长，导致数据量大时交互滞后。 当实际缩放到一定程度时，将此类图形简化为线条，会大大提高渲染效率。
程序级优化
主要从程序结构和代码表达入手，从而优化程序运行效率。
比如合并路径的时候，处理大量数据的时候，主要使用Canvas。 Canvas提供的API比较底层，复杂且易于维护的应用程序需要可视化后才能构建。 ECharts 的底层库 Zrender 使用面向对象的方法将渲染和管理的实体可视化为图形元素，每个图形元素负责自己的渲染。 抽象的缺点是牺牲了一定的性能：渲染时，每个图形渲染都要先调用Canvas API设置样式，然后创建路径，频繁的状态切换带来性能损失。 因此，对于大数据场景，可以组合图形元素，一次设置样式，构建所有路径。
另外，关于显存的使用，程序的GC时间过长，可能会导致渲染卡顿。
如下图所示，浏览器执行了10兆字节的Minor GC花了5毫秒。 时间听起来并不长。 事实上，如果能够保证不卡顿，每一帧允许的时间只有几十毫秒，那么GC消耗的时间是比较可观的。 优化方法可以是重用对象，减少老年代大对象的频繁回收。 您还可以使用类型化数组或固定长度数组来减少视频内存的使用和重新分配。 但麻烦的是，需要管理数组长度，扩展容量，自动将多维链表缩减为一维。
因此，程序级优化很常见，但会导致可读性的破坏和程序健壮性的增加，所以这种优化只在必要时使用。
优化用户感知
看ECharts3的渲染流程图如下。 最右边的部分是原始数据。 经过从左到右的处理，数据被处理、布局、渲染，最后绘制到屏幕的前面。 如果有交互，就需要重新布局、重新渲染，重复这个过程。 在大数据下，完成整个过程的时间是相当可观的。 当时间难以减少时，通常的想法是流式渲染，或者增量渲染。
以下是ECharts4的管道图。 最右边是原始数据，会被ECharts手动分片。 每个Chunk从左到右都会经历一个完整的渲染过程，完成后直接渲染在SVG或Canvas中。 然后按照时间线往下走，下一个Chunk就继续走。 这样，任务就被分成了碎片，而不是被整体阻塞，让用户认为没有滞后。
优化数据加载
对于千兆字节的数据，文件大小可能是几十甚至几百MB。
优化的手段，首先，可以使用Typed Array直接保存为二进制文件，而不是文本文件，这样可以大大压缩数据文件的体积。 ECharts已经支持直接使用Typed Array传入数据。
另外，如果是在互联网上显示，则不宜在所有数据下载完毕后才开始渲染。 ECharts支持增量渲染后echarts重构，用户可以分片加载文件，加载的文件直接传输到ECharts进行渲染。
数据集
数据集为数据录入方式提供了新的选择：直接以二维表（二维数组或对象数组）的形式传入数据，然后配置可视化映射（即哪些行、列映射到哪个轴） 、颜色等）以可视化结果。 这更符合数据可视化生产和探索的操作思路：基于一条数据，改变映射规则，发现信息。 这也有利于数据和样式的分开管理，从而方便程序开发。
跨平台图形套接字 跨平台图形套接字是什么？
对于一个2D图形套接字来说，通常会包含一些图形元素如正方形、圆形、路径等，而图形元素中包含属性，图形元素与元素之间可以进行相互组合、笔画处理等。当我们说ECharts支持跨平台，那我们指的是什么平台呢？ 我们考虑了以下几个方面：第一，浏览器，它基于不同的方式进行渲染，比如Canvas、SVG、VML，在这样的场景下我们可能希望针对不同的帧率使用不同的布局形式，通过响应形式化的方法使得空间利用更加合理。 对于特殊平台，比如服务端渲染、陌陌小程序，也是兼容的。 此外，还为盲人使用的阅读设备提供无障碍通道设置。
为什么需要跨平台图形界面？
对于用户来说，虽然他并不关心图表是用Canvas还是SVG制作的。 对于他来说，良好的体验才是最重要的。 他只希望看到正常的图表，体验一下图形渲染结果。 至于图形如何渲染，他并不关心。 对于开发者来说，他需要将所有的平台一一实现。
基于这样的场景，就需要兼容不同的平台，而不同平台上的一些设备存在一些性能差异。
ECharts解决方案-ZRender提供三种渲染器
ECharts 使用 ZRender 底层渲染器。 ZRender提供了三种渲染器，分别是Canvas、SVG和VML。 上半部分提供与渲染平台无关的图形套接字，下半部分兼容不同平台的实现算法。
1、如何支持多种渲染方式？
百度中级前端工程师贤哲举了一个例子。 首先声明一个圆，你只需要告诉它X坐标、Y坐标、宽高信息，它的渲染引擎会根据具体的渲染平台做不同的渲染底层实现，底层是一个路径代理，叫做PathProxy类，它将负责记录低级绘图指令。 根据渲染器的不同，底层的实现也不同。 通过这样的形式，不仅可以使用统一的方法，还可以使用不同的渲染器进行渲染。 它还有另外一个用处，假设Web Worker是用来批量渲染的，也可以根据这个链表来渲染。
2. 如何支持风暴处理
为了使不同的渲染器具有相同的风暴处理机制，我们将风暴绑定到整个图表容器。 也就是说，对于SVG和VML，我们不会将storms绑定到DOM树下的每个元素。 这样才能和Canvas有统一的风暴处理机制。
当确定该图形元素将响应风暴时，我们将反转渲染列表，即首先判断键盘是否在屏幕上的图形中。 判断时，首先将键盘坐标转换为图形坐标系。 这是因为图形可以通过平移、旋转、甚至图形之间的组合变换来缩放。 将键盘变换到图形坐标系后，我们就可以知道两者的相对关系，然后根据包围盒进行简单的判断，再根据路径进行精确的判断。 如果键盘在图形中，则让图形分布并冒泡，如果没有，则一一判断屏幕后面的元素。
3. 如何部分更新SVG渲染
渲染时Canvas会完全重绘，但是效率很高。 对于SVG来说，例如，有一千个点的散点图，DOM中就有一千个对应的节点。 如果每一帧都需要删除所有 DOM 元素并重新添加，那么效率是非常低的。
因此，我们维护一个渲染对象列表，将每一帧新的渲染对象列表与前一帧进行 diff，得到新增、修改、删除的渲染对象列表，然后根据列表调整 DOM 相关节点。
4.如何优化SVG渲染效率
以梯度为例，采用重用梯度定义的实现方法
每个渐变对象共享一个 DOM 节点
何时更新渲染对象
如果是，则将 fill 或 Stroke 设置为 DOM id 对应的 url
如果没有，则生成一个新的 DOM 并在渐变对象中引用
何时更新渲染对象
ECharts解决方案-响应式设计支持
ECharts支持三种定位方式：
像素、百分比、位置描述定位
另外，ECharts还实现了响应式布局，即图表可以分为不同的配置和布局。 这是怎么实现的，见下右图，它由两部分组成，一是baseOption，二是media。 baseOption指的是所有码率都会用到的配置项，media是一个链表，每一个链表都包含一个代表一个码率的配置。 每一项包括一个查询和一个选项，查询是对每个码率采用该配置，选项是在该码率下使用该配置项。 查询可以包括它的长度、高度和长宽比，并且可以使用最大值和最小值。
ECharts解决方案-专用平台和专用设备
特殊平台的处理
无障碍
为了方便盲人使用朗读设备，W3C 制定了“无障碍互联网应用配置文件集”标准。 其目的是让残障人士更容易访问网络内容和应用程序。 对于ECharts来说，预期的效果就是根据一张图来生成这个图的数据，而这个描述并不是用户自己写的，而是根据它的配置项手动生成的。 它将绑定到属性 aria-label，盲人阅读设备将识别并朗读该属性。 但也存在很多困难：不同图表类型的描述方式不同，数字不同，描述数据的方式不同，生成的描述必须符合句型规范，图表内容需要简洁表达，语言不同需要支持。 最后是怎么发生的呢？ ECharts 实现了一组基于模板块的方法。 不同的图表类型、数据量和数据方法使用不同的模板。 用户还可以定制不同的语言。
ECharts教你如何选择和设计你的图表
百度中级后端研发工程师王俊婷基于可视化理论和ECharts数据可视化设计规范和项目经验，详细讲解了如何根据不同的需求和目的选择正确的可视化图表类型，以及如何使用图表正确解读以及合理的数据。 结合实际行业案例，总结了数据可视化工作设计的方法和原则，帮助您获得更好的数据，凸显疗效。
选择正确的图表
图表服务于数据，数据类型决定了可以选择的图表类型。 我们首先要从数据本身入手，选择能够满足其显示需求的图表类型。 根据各图表类型的功能和适合的数据类型，将图表分为比较、关系、比例、分布、趋势五类，并汇总显示各功能类型对应的图表。
重点
使用一些技术和设计方法让用户专注于可视化中最重要的区域。 您可以使用对比色、使用不同的形状、改变位置、添加动态效果等来关注关键数据。
合理适度
尽量避免在视觉图表中注入太多杂乱无意义的东西。 例如，防止过多的图形元素，避免过多的设计，防止使用不适当的方法来显示过多的数据，从而使数据难以清晰地分析。
确保可视化作品的空间平衡
考虑数据如何在图表上呈现，尽量注重视觉设计空间的有效和平衡利用，尽量保证重要元素位于中心区域，保证图表中元素的大小合理，图表元素之间的间隔合适。
例如，直方图的合理长度和列之间的间隙应使得单个列的长度不大于列之间间隙的两倍。
遵循习惯和常识
在使用图标显示数据时，应遵循一些视觉约定来排列或排列数据，以便用户能够更准确、更快速地分析数据，并应避免一些违反常识的数据显示方式。
利用情感共鸣和语义共鸣
颜色可以用来传达不同的情感，因此在可视化中为不同的数据主题选择匹配的颜色，例如甜点的销售比例。 使用与甜品和甜品用户群体相匹配的颜色，可以适当地引起用户热情的情感共鸣。
颜色的语音共鸣是基于“斯鲁普效应”的研究。 将固定颜色的事物与具有语义共鸣的颜色相匹配，可以有效提高阅读效率和准确性。 例如，要展示葡萄、香蕉、橙子、草莓等猕猴桃的销售情况，我们选择红、黄、橙、红四种颜色，这与我们对香蕉颜色的认知一致。 要解释四种猕猴桃的销售情况，我们只需要根据颜色快速定位并浏览数据即可。
请注意图表会“欺骗”
在制作和阅读可视化作品时，应注意防止不当的数据显示方式欺骗用户对数据的分析错误。
总结：
以上内容依次指导了如何选择合适的图表，如何获得更好的数据展示方式，如何利用用户的心理和用户习惯，总结出一些更好的数据展示方式，更好的提升用户体验从而更好的分析数据形态和建议。 这些建议和方法对于今后正确选择和设计可视化作品具有很大的指导意义。
主题配色
此外，王俊婷还分享了ECharts在设计主题配色方面的宝贵经验。 普通数据系列需要使用五到六种颜色，而为了满足大多数使用场景，ECharts颜色需要提供八到十二种颜色才能满足大多数需求。 并且考虑到不同数据系列的数量，为了获得更好的显示方式，在与配色方案一致的基础上，建议依次提供对应的九色方案和六色方案。 并且还提供冷色、暖色。 而梯度用来表示数据的增量变化。
需要关注的一件事是视障用户群体的需求。 我们必须保证可视化方案和视觉作品，让这部分视障群体能够准确阅读。
此外，王君婷还展示了一些颜色过于接近的不合理情况。 例如，第一个数据系列的颜色太接近，导致难以识别单个数据系列。 第二类数据的系列与背景颜色太接近，数据本身不容易突出。 三是坐标轴、显示标题、坐标轴和背景颜色太接近，难以识别具体数据的大小。
因此，建议在选择可视化颜色时色阶跨度应较大。 亮度和颜色跨度越大，可以承载的数据就越多。
对于个别特殊行业、民族、宗教的数据展示，比如股票数据的展示，红色和绿色有特殊的含义。 因此，在颜色等元素的使用上，需要保证严格遵循行业、民族或宗教的特点，适当合理地展示数据。
WebGL 给 ECharts 带来了什么
近年来，WebGL 变得越来越流行。 百度高级后端研发工程师沉毅分享了他在ECharts GL中使用WebGL的尝试，重点介绍了ECharts GL的底层WebGL框架ClayGL以及未来的一些计划。
粘土GL
ClayGL是ECharts GL的底层图形引擎，也是一个渐进的高性能WebGL开发框架。 ClayGL 易于使用，并提供丰富的功能，让您用最少的代码快速构建 3D 应用程序。 基于微内核机制，可以保证最小封装体积足够小，并且可以扩展到高质量的渲染。
便于使用
这段代码总共只有19行，还有空行和注释。 它加载一个歌唱机器人模型并创建一个带有灯光、阴影和动画的 3D 应用程序。
ClayGL核心模块实施例
ClayGL作为一个通用框架，需要满足各种场景的需求，比如实现像ECharts GL这样的可视化库，但是不同场景下可能用到的功能完全不同，比如可视化可能不需要这些3D模型加载模块。
在ClayGL中，核心模块是可视化的，这个核心模块与这些更加面向场景的模块解耦。
ClayGL 的核心功能包括：
数学图书馆
WebGL 是一个状态机套接字。 WebGL的socket大部分都是用来创建和提交上面提到的GPU资源，管理绘图的状态等，这个状态机的socket非常复杂，啰嗦。 如果绘制效果比较复杂，状态管理会比较困难。 。 经常我们写了一大段代码，然后刷新浏览器看里面什么都没有，也没有报错，只能一行行的过一遍代码，看看哪里有问题。
ClayGL最重要的任务就是解决这个资源和状态管理问题。 例如下面的主代码勾勒出一个三角形，第一行通过ES6语法引入了一些必要的模块，比如渲染器。 然后创建一个渲染器，它主要负责整个渲染的管理。 接下来的Geometry负责管理所有的顶点数据，比如顶点的位置。 下面的Material和Shader管理顶点着色器和像素着色器的代码，以及对外提供的一些制服。 最后一行就是把那些东西提交给整个渲染器，让渲染器处理各种复杂的事情，绘制图形。
最后，Webpack 4 打包后的代码在 gzip 后只有 22k，相比之下打包 THREE.js 后数百 K 的体积。
最常见场景的集成——App3D
对于很多开箱即用的3D应用来说，仅有上面提到的核心模块是远远不够的。 ClayGL提供了很多功能模块来快速解决场景中的具体问题，比如模型加载、阴影、相机控制、内置材质、骨骼动画等，其中App3D就是针对我们常见场景集成了这个模块。 上面机器人模型的加载使用了App3D模块。它提供了以下内容
诸如此类的功能区域可以帮助开发人员更轻松地开发 3D 应用程序。
ClayGL 高级渲染器
为了让渲染出来的画面拥有更丰富的光影、更丰富的材质、更抢眼的色彩、更真实的镜头、更流畅的画面。 ClayGL 提供高级渲染器。 下面是着色器图像，显示使用高级渲染器渲染的各种材质。
VisualDL — ECharts 和深度学习
VisualDL是百度发布的深度学习可视化工具。 它可以实时可视化模型训练过程中的各种参数和估计的数据流图（计算图），帮助模型训练者更好地理解和调试。 ，优化模型。 百度中级后端研发工程师李德清结合VisualDL项目的实践经验，介绍了深度学习领域如何利用可视化解决问题。
视觉DL
VisualDL主要解决深度学习训练过程的“黑箱”特性。 它采用可视化的方法帮助模型训练者理解和调试模型结构，并将模型训练过程中各种超参数的变化可视化。
VisualDL Scalar的四大功能
模型训练时echarts重构，可以将训练过程中形成的各种数值信息以折线图的形式进行解读，方便观察参数的整体变化趋势，并且可以在同一个可视化视图中呈现多条折线，方便供用户比较Parse多个参数。
下图是一个Scalar接口，其中包含了过滤功能。 因为一个大的模型可能有一千多个层，所以涉及到的参数会很多。 用户可能只想查看错误率或准确率。 VisualDL 为此提供了过滤功能。 另外，还有一个smooth函数可以在训练初期过滤掉有噪声的参数值。
图形
帮助用户理解和调试深度学习模型的网络结构。 Graph支持ONNX，间接支持不同深度学习框架的模型结构可视化功能，方便用户排查网络结构配置错误，帮助理解网络结构。
图像
用户可以轻松检查输入图像数据样本的质量，还可以轻松查看训练的中间结果，例如频域层的结果或GAN生成的图像。
直方图
直方图主要用于可视化参数随时间和训练次数的分布情况，如下图所示。
VisualDL 的未来
未来，VisualDL将实现Interactive Graph，加上模型可解释性、音频可视化、文本可视化等。同时ECharts与PaddlePaddle的合作将不断加大深度学习的开源领域，打造更丰富的可视化工具生态系统，为开发者提供真实、实用的帮助。
原来的
发表评论