Echarts移动端使用的优化建议

    近期做了两个移动BI项目，大量用到了Echarts来绘制图表，中间碰到一些实现上的问题，或者针对移动优化的经验，记录一下。1，按需加载    移动端相对PC，是一个更加性能敏感的环境，所以对于资源请求的频率和大小、动画和计算的消耗会要求更高。所以第一点就是，根据业务需要，按需加载Echarts组件，而不是整体引入。这个没什么好赘述的，可参考官方文档2，使用SVG渲染图形     Echarts在v4.0版本，在默认canvas绘制的基础上，新增了svg的图形渲染方式。在不少场景中，SVG 具有重要的优势：它的内存占用更低（这对移动端尤其重要）、渲染性能略高、并且用户使用浏览器内置的缩放功能时不会模糊。当然canvas的优势在于更复杂的图形或者炫酷的动效，这个主要还是需要根据业务场景来做选择。大部分情况来说，移动端用svg渲染，显然是更合理的选择。具体可参考官方说明。    但是，我自己项目在做整体替换svg渲染模式时，出现了一个小问题，那就是tooltip组件的背景色设置不生效了。找了文档并未发现什么说明，时间紧张于是又切回了canvas模式。3，移动端字号设置    因为移动端尺寸的限制，图表有时候会很紧凑，也就存在更小文本的需求。这里主要说的是，因为图形都是canvas或者svg来绘制的，所以，字号的设置不受浏览器的最小字号限制。我们可以随意设置更符合界面显示需要的字号。4，tooltip的显示位置优化    tooltip默认是出现在用户交互的数据点附近，这在PC端并不会产生什么问题。但移动端交互是手指触摸产生的，在触摸点展示会导致数据展示框会被手指挡住很大一部分，用户无法看全。因此基于良好的交互体验的前提下，应该动态计算tooltip的position，使其始终在触摸位置的左上角显示；    如下代码，建议是top值其实可以不用动态，让其始终在图形上方即可；left值根据当前触摸交互点的位置，减去一定的值就行，这个具体数值根据你图形的tooltip宽度，做一些相应的调整就行。    对了，为了防止图形溢出，应该设置tooltip的confine属性为trueposition: function(pos) {    var  obj = {         top: 10,         left: pos[0] - 130     }     return obj; }5，折线图-数轴最小值的优化建议    value类型的Y轴，如果数据整体差异较小，默认用0作为最小值的话，整体数据的波动性图形上就体现不太出来。因此，基于用户体验考虑，应该动态计算数据最小值作为min属性的值，以便图形能够更好的体现波动性。6，多图形重叠交叉图表的优化    单个图例中，如果存在多个series数据项，则存在图形交叉叠加的可能性。因此，也是基于用户体验的考虑，应该设置图形的层级，让更重要的数据展示在最上方，避免覆盖。可通过series中的z属性来设置优先级，数值越大优先级越高；7，tooltip默认自动显示    tooltip默认是基于用户交互，才会展示的；但根据不同业务需要，可能存在图形渲染完毕就展示tooltip的需求。这个echarts也有提供相应的api的。通过图形实例的dispatchActiopn方法，可以手动触发tooltip的显示。 手动触发tooltip的方式     这里有个要注意的点，当我们获取到图形数据，然后通过setOption把数据传入echart实例后，如果同步执行上述的方法，可能无法成功。因为此时option更新后，图形还未渲染完成，会导致tooltip无法成功显示。因为建议在setOption之后，通过setTimeout异步执行上述方法。8，同一图例展示不同数据项的问题    同一个图例，基于不同的用户选择，渲染不同的数据。如果图例数据存在数据项的变化，直接setOption会导致数据残留。因为echarts修改option，默认是数据合并状态的。因此如果要彻底更新option，需要在setOption时，设置第二个参数为true。 setOption参数说明

本文章由javascript技术分享原创和收集