Echarts图表设置百分比显示以及图表内容合并问题

业务需求

需要开发一个动态tab用来切换Echarts图表的显示，tab项指定显示图表的展示数据。

实现思路

通过多个DIV标签承载Echarts图表。起初的思路是将多个DIV标签设置样式display:none:进行隐藏，在每次进行tab切换时，先改变DIV标签的样式让其显示，然后进行数据请求并绘制图表。

出现问题

本该按照百分比显示的Echarts图表只显示了很小的宽和高，当我打开控制台或者对页面布局大小进行控制，就会突然转换为百分比显示。

解决思路

因为动态的去让DOM元素取消与显示，可能会影响DOM的加载、图标的绘制。
所以想了两个办法，要么不操作DOM，要么不按百分比显示（利用媒体查询）。

媒体查询的方案期初在两个常见分辨率可以较好的显示，但这样的响应式存在较大的局限，也会影响用户体验，于是考虑不操作DOM。

让Echarts图表项隐藏的办法可以用透明度opacity来控制，这样就避开了DOM操作，此时将DIV标签绝对定位到父级标签。

新的问题

然后在切换时出现了新的问题，Echarts上的tooltip提示框没有显示，只显示了HTML中最后一个DIV的tooltip。

问题定位失败

对这个细节的思考，我竟然定位到了图表本身，既然有的图标能显示，显然不是图标的问题。我想到了透明度opacity属性是将其以及子代所有元素透明，是不是tooltip被透明了，我又错误的想使用background:rgba()方式进行透明度变更。以为只透明本身元素即可。试了以后才发现并不是这个影响。既然有一个Echarts的图表可以显示tooltip，就证明无关透明度本身了，而我连续两次问题定位失误。

问题解决

经过思考以后，我尝试改变DIV标签的定位方式，发现相对定位可以显示，说明是DIV层级显示有问题导致了tooltip不显示，也和最后一个DIV显示相吻合。

于是，我在透明度切换的同时，变更DIV标签的显示层级，此时这个问题迎刃而解了。

问题补充

在这个问题之前，我一直用操作DOM的方式展示图表，发现Echarts中部分图表会出现数据内容合并的情况，无关图表的网络数据请求，而是图表的setOption方法，第二个参数会默认图表内容合并。内容如下：

chart.setOption(option, {
    notMerge: ...,
    lazyUpdate: ...,
    silent: ...
});

option
图表的配置项和数据，具体见配置项手册。
1. notMerge
可选，是否不跟之前设置的 option 进行合并，默认为 false，即合并。
2. lazyUpdate
可选，在设置完 option 后是否不立即更新图表，默认为 false，即立即更新。
3. silent
可选，阻止调用 setOption 时抛出事件，默认为 false，即抛出事件。