共计 3827 个字符，预计需要花费 10 分钟才能阅读完成。
在 Apache ECharts 5 系列教程（2）视觉设计中，咱们理解到，通过在视觉设计方面的调整，咱们心愿可能让读者更关注图表中重要的信息。而接下来咱们要介绍的多状态设计则更进一步地让读者参加交互，交互的丰富性和流畅性使得用户更深刻理解数据之间的关联。
交互能力
状态治理
在 ECharts 中，所有系列的图形和文本都领有高亮和一般两个交互的状态，咱们能够别离设置这两个状态的图形和文本的款式。
一般状态就是图表默认所出现的样子，而高亮状态会在在鼠标移入或者图例联动的时候触发达到提醒用户的成果，就像下图演示的一样，鼠标移到两头柱子上进入高亮状态变成设置的黄色，移出后回到一般状态的蓝色。
而在一部分交互更加丰盛的系列中，还存在着更多的交互状态。比方饼图或者地图中能够点击抉择数据，而选中的图形会进入选中态。
或者在夕阳图，关系图，桑基图中在高亮一个数据的时候，不相干的数据会进入淡出状态，从而达到聚焦指标数据的成果。
然而这个淡出和选中态在 ECharts 4 及之前的版本中，只在局部系列中提供，而且无奈配置这两个状态的款式。所以咱们常常会碰到这样的需要，柱状图是否能够像饼图一样提供点击选中的性能，是否给关系图的节点配置淡出时候的不透明度？
为了满足这些需要，咱们在 ECharts 5 中对状态治理做了全面的重构，从而可能为所有的系列提供了点击选中以及聚焦淡出其它数据的交互。
并且比方像色彩、暗影、边框，不透明度等高亮状态中能够配置的款式，在选中状态和淡出状态中都能够配置。
跟饼图一样，在其它系列中咱们能够通过 selectedMode 配置项来开启数据单选，多选的性能，而后能够通过点击选中数据，选中的数据会被利用设置的选中款式。除此之外，咱们能够通过监听 selectedchanged 事件，拿到以后所有选中的数据，从而进行更深度的展示。
ECharts 5 中能够在任意系列上通过设置 focus 来开启系列的聚焦外淡出性能。
比方这个柱状图在鼠标高亮一个数据的时候，其它不想关的系列都会进入淡出状态并且利用设置的淡出款式，被聚焦的系列就能够更分明的呈现出数据的比照。或者配合咱们新的文本优化，也能够实现鼠标移到标签上后聚焦显示该数据的成果。
开发者能够通过不同的 focus 和 blurScope 去灵便的配置聚焦的粒度。focus 用来配置相干的聚焦数据，比方是整个系列，亦或是只是以后数据。如果不心愿聚焦淡出的成果影响到其它坐标系的数据，则须要设置 blurScope 来限度淡出的范畴。如果设置为 global 则是淡出图表中所有的其它数据。
focus 也能够通过数组更灵便的去指定每一个须要联动聚焦的数据，从而在 circle packing 这样的自定义系列实现的层级图上实现更丰盛的交互成果。
性能晋升
刚刚咱们介绍了 Apache ECharts 5 中新增的交互性能，除此之外，咱们在性能上也做了优化去保障交互的流畅性。
性能，始终是 Apache ECharts 十分重要的一个方向，在之前的版本里，咱们别离引入了渐进渲染，独立的高亮层，WebGL 渲染等优化技术来晋升大数据中交互的流畅性，也通过新增 SVG 模式来晋升挪动端上的性能，这些技术别离有各自的优劣以及其实用的场景。
在 5 中，咱们将引入一个新的技术—— 脏矩形渲染 ，来更全面的晋升 Apache ECharts 5 的交互性能。
脏矩形渲染
在理解脏矩形渲染之前，咱们须要对 ECharts 是如何渲染出一个图表的有一个粗略的理解。
咱们对外提供了各种图表类型，比方柱状图、折线图、饼图等等，这些图表类型会被拆解成不同的图形，比方柱状图是多个矩形组成的，折线图是多个线段组成的，饼图是多个扇形组成的等等。而这些图形将被进一步地拆解成画线，画圆弧这样单位的门路操作。为了保障下层绘图接口的简略统一，咱们应用了一层代理去隔离门路操作和底层不同渲染引擎的实现。最初到浏览器图形接口这一层，Canvas 会调用相应的绘制指令，SVG 则是更新 DOM 去做最终的绘制。
其中 Canvas 的劣势是重绘快，所以适宜大数据量。而 SVG 的劣势则是内存占用低，更适宜挪动端。咱们这次新增的脏矩形优化，是心愿把 Canvas 的大数据量重绘性能持续晋升一个台阶。为更多场景提供更晦涩的交互体验。
对于 Canvas 渲染引擎，在鼠标 hover 高亮这样的交互导致图形发生变化时，ECharts 就会对整个画布进行重绘。也就是擦除整个画布，而后顺次绘制所有元素。这种形式很简略牢靠，而且在几百甚至上千个图形的时候能放弃十分晦涩的交互。
然而如果图形再多一点，比方像这样有上万个图形的热力求，因为每帧全部重绘的工夫过长，就有可能产生交互的卡顿。
在之前版本，咱们采纳了一个额定的 Canvas 层作为高亮层来解决渲染性能的问题。也就是将鼠标高亮引起扭转的图形放到一个独自的层中进行渲染。这种形式非常简单粗犷地解决了大数据下的交互流畅性。
然而它也不是银弹，也存在一些问题。
首先，这个额定的 Canvas 层会带来额定的内存耗费；其次，因为这种算法并没有擦除原先的元素，所以并不适宜简单的款式变动，比方不透明度或者暗影产生扭转的时候就会露馅。另外，有的平台并不适宜多层 Canvas 叠加，比方 Node.js 或者小程序。
因而在 ECharts 5 中，咱们引入了脏矩形渲染这个更加通用的技术计划来补救这些问题。通过每次只擦除和重绘画面中有批改的局部来缩小每次重绘的图形，晋升交互晦涩度。
脏矩形的开启非常简单，只须要在 init 创立图表的时候把 useDirtyRect 参数设置为 true 就行了。
首先，咱们用一个非常简单的例子来看下脏矩形是怎么做到晋升重绘性能的。假如画面中有这样四个矩形。
其中两个当初扭转了色彩，因而须要从新绘制。
ECharts 会追踪到这两个产生扭转的图形并计算出突围盒失去须要更新的区域，并擦除这个重绘区域。
而后在这个范畴内，顺次绘制在这个重绘区域内的元素。这样只须要绘制这两个变动的就能够失去更新后的画面。
如果画面中有十分多的元素而只有少部分才产生了变动，脏矩形渲染就能够无效缩小每次须要重绘的内容。
当然这只是最简略的一个演示，理论算法解决的场景是会更简单的，咱们做了很多工作保障了脏矩形算法在各个场景的正确和高效。
咱们再来看在理论场景中脏矩形的利用。大家在咱们新的示例页上的渲染设置中抉择开启脏矩形优化就能够十分不便的看到成果。
这是一个在日历上每天绘制饼图的的例子，红色的框框标出了每次重绘的内容。在进行交互的时候每次都只重绘了其中一个饼图，重绘的效率天然也是大大的进步了。
除此之外，当初的绝大多数古代浏览器也会通过脏矩形技术只对画面改变局部做重绘和合成，这个额定的加成更进一步的晋升了咱们的重绘性能。下图绿色的框示意了 Chrome 中重绘的区域。
最初咱们通过一个例子来直观得看看脏矩形所带来的性能晋升。
这是一个带了暗影，半透明成果，比较复杂的矩形树图。鼠标移到图形上的时候会有一个暗影放大的上浮动画成果。在敞开脏矩形的时候，这个动画是十分卡的，均匀只有 10 帧，曾经重大的影响到了整个交互的流畅性。图中底部大量红色的帧就代表了这个动画曾经重大阻塞了整个页面。
在开启脏矩形后，帧数有了十分大的晋升，只管两头还有一些大量的卡顿，然而整体的交互曾经十分晦涩了。
下面介绍了脏矩形渲染在 ECharts 5 中的利用，如果你在本人简单的图表中碰到了交互上的性能问题，就无妨试试开启咱们脏矩形渲染。
折线图优化
在 ECharts 中，折线图经常会被用来可视化 CPU，内存这样的实时时序数据，这些数据往往更新频率很高，几百毫秒甚至几十毫秒就须要更新一次，而且每次更新的数据量都往往很大。之前 ECharts 的折线图对这种高频大量的数据的优化并不是很好，所以常常会有开发者反馈折线图更新重绘会卡顿，而且内存占用高。
因而在 ECharts 5 中，咱们对于折线图中做了集中的优化去升高内存占用和初始化的耗时。
咱们将外部图形数据的存储都从原先的动静数组改为应用 TypedArray 来做动态存储，从而能够大幅度降低浏览器的堆内存占用以及垃圾回收的工夫，进一步无效升高初始化开销，从这两张图能够看出，这一优化在数据量越大的时候，对初始化工夫和内存占用的晋升越显著，在百万数据量的级别下能够达到 10x 甚至更多的晋升。
同时，咱们也在原先降采样的性能上新增了采纳 LTTB 算法的降采样，LTTB 算法可能做到在保留折线图部分趋势和极值的前提下，将须要绘制的点升高到只须要几千个，从而进一步缩小折线图的初始化工夫。而咱们原先应用的平均值，最大值等降采样策略则会失落过多的数据信息。
再加上一系列对外部代码粗疏的性能调优，配合浏览器的 JIT，对于百万级别的数据，ECharts 能够做到 30ms 内实现一次数据的更新和从新渲染，从而满足实时更新的需要。
当然这些性能晋升并不只是针对于时序数据，所有类型的大数据量折线图都能够从中取得性能优化所带来的收益。
而对于更极其的千万数据的场景，ECharts 能够做到 0.76s 渲染完一个领有一千万数据的折线图，内存占用仅为 370MB，并且仍旧能够已 60fps 的帧率晦涩得进行 tooltip 等交互。
可能你在本人的利用中并不一定会碰到这么极其量级的数据，然而置信这个优化后的成果能够让你在用 ECharts 实现大数据折线图时更加熟能生巧。
其余
除了用户体验之外，咱们也非常重视开发者的体验。在下一篇文章中，咱们将会介绍 Apache ECharts 5 在开发者体验晋升方面的致力。
