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