数据可视化 --- eCharts 4.0 新特性
2019-06-26 09:42 *奋斗* 阅读(274) 评论(0) 编辑 收藏 举报eCharts 4.0 的 8 大新特性：
1）千万级数据可视化渲染能力；
2）SVG + Canvas 双引擎；
3）全新旭日图；
4）数据与样式分离；
5）更扁平的配置项；
6）无障碍访问支持；
7）微信小程序支持；
8）PowerPoint 插件。
基于场景的优化 --- 当实际缩放到一定程度时，将这些图形简化成线，则会较大提高渲染效率。
程序层面的优化 --- 例如，合并路径，在处理大数据量的时候，主要使用 canvas。canvas 提供的 API 比较底层，需要进行抽象后，才能构筑复杂的、易维护的应用。eCharts 的底层库 Zrender，用面向对象的方式把被渲染和管理的实体，抽象成为图形元素，每个图形元素自己负责自己的渲染。
关于内存的占用，优化手段是重用对象，减少老生代对象的频繁回收。也可以用 Typed Array 或定长 Array，从而降低内存占用，减少 reallocation。
用户感官的优化 --- eCharts 的渲染流程图，从左到右：数据处理->布局->渲染。如果出现了交互，就需要重走这个流程。在 eCharts 4 中会自动进行 chunk 分片，每一个 chunk 走完整的渲染流程，走完后直接在 SVG 或者 Canvas 中被渲染出来。然后按时间线往下走，下一个 chunk 继续走。这样，将任务分片进行而非整块阻塞，使用户觉得并没有卡顿。
数据加载的优化 --- 直接使用 Typed Array 直接存成二进制文件而非文本文件，这样可以极大压缩数据文件的体积。在网络上展示，不宜在数据全部下载完成才开始渲染，eCharts 支持增量渲染后，使用者可以将文件分片加载，加载的文件直接传入 eCharts 进行渲染。
eCharts 解决方案 --- Zrender 提供三种渲染器，分别是 Canvas、Svg、VML。利用 PathProxy 来支持多种渲染方式，它记录了底层的绘制指令，会根据不同的渲染器，进行不同的底层实现。为了不同的渲染器有相同的事件处理机制，我们对整个图表容器绑定了事件。如何判断鼠标点击？先根据包围盒做粗劣的判断，再根据路径做精确的判断。
SVG 渲染如何部分更新？
canvas 在渲染的时候，会完全重绘，但是它的效率很高。而对于 svg 而言，比如有一千个点的散点图，在dom中就有一千个对应的节点，效率会很低。因此，我们维护一个渲染对象列表，每帧将新的渲染对象列表与上一帧进行 diff，获得新增、修改、删除的渲染对象列表，再根据列表对 dom 相关节点进行调整。
SVG 渲染如何优化渲染效率？
定义可复用的类；每一个渐变对象共享dom；
WebGL 给 eCharts 带来了什么？
eCharts GL 的底层 WebGL 框架 ClayGL。ClayGL 是 eCharts GL 的底层实现引擎，是一个渐进式的高性能 WebGL 开发框架。它易于使用，提供了非常丰富的功能。基于微内核机制，可以保证打包的体积足够小，可扩展至高质量的渲染。