業務需求
需要開發一個動態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，即拋出事件。