以前也用過ECharts(不得不說，這真的是百度的良心產品)，但是都是一些簡單的示例。這次因為工作的需要，做了很多圖表，對ECharts有了更加深刻的理解，現在來總結一下。首先是ECharts的基礎知識（本次是基於Echats的4.8.0版本）
- 第一個肯定是新手經常遇到的問題，就是，我做的圖表壓根就沒有顯示。頁面還是一片空白，這個時候，通常要檢查元素。用來顯示表格的div中，有沒有canvas這個標簽。如果沒有的話，肯定是在初始化的時候，ECharts沒有讀取到要顯示的位置。這個時候，可以做一個簡單的檢測，就是在渲染表格之前看看能不能活得要顯示的區域的寬高。如果有這個canvas這個標簽，但是沒有顯示的內容的話，肯定是option中就配置錯誤了，或者數據格式化錯誤了，需要自己另行檢查了。
- 第二個，圖表顯示的時候，可能有的時候會超出顯示的區域，這個時候，最簡單的辦法就是調整要顯示表格的DIV的大小，如果這樣還是不行的話，EChats中有一個屬性是能改變。就是grid屬性。下面附上鏈接。可以簡單的設置一下grid中的left，right，top，bootom等等，讓表格能正確的顯示到DIV中，不至於超出可視區域。
- 第三個，就是我們想要格式化Y軸顯示的數值，或者說，添加單位等一系列的操作。添加一個formatter操作。如果想格式化X軸的話，也是一樣的。
- 還有就是，我們想實現區域的縮放功能，也是需要在option中添加一個屬性，dataZoom。他是能自動適配移動端和PC端鼠標滾輪的。
- 當圖例超出內容區域寬度的時候，默認的情況下，圖例會自動折行。但是折行的話，可能會出現內容重疊，超出顯示內容區域的問題。這時候最簡單的辦法是設置圖例的滾動。請看下面的代碼
1 legend: { 2 type:"scroll" 3 },
效果如圖：
（不過有一個問題，就是在移動端的時候，確實這個不是很容易點到） - 最后一個其實就是網上提問很多的問題，就是，我們需要旋轉屏幕。最常見的就是在移動端，當我們的數據比較多的時候，就需要橫屏展示。網上很多答案因為是比較老的ECharts版本，導致了很多額外的問題，但是我自己用的是官網上的最新版本（4.8.0），是沒有問題的。所以現在就比較簡單了。大家直接引入最新的版本，然后旋轉最外層的DIV，然后直接鋪數據就可以了。不會有toolTip問題了。我放上一個我旋轉的css代碼。僅供參考
1 #horizontalScreen{ 2 transform: rotate(90deg); 3 transform-origin: bottom left; 4 position: absolute; 5 top: -100vw; 6 height: 100vw; 7 width: 100vh; 8 background-color:#FFF; 9 z-index: 100; 10 }
下面是截圖：
7.添加一個新的功能，就是，當我們的數據整體偏大的時候，如果顯示折線圖的話，會發現，整體的數據都在圖表的上方，折線圖顯示不明顯。這個時候需要設置，Y軸不是從0顯示，而是按照比例顯示。只需要添加以下代碼就行了：
1 yAxis: { 2 type: 'value', 3 scale:true,/*按比例顯示*/ 4 },
8.還遇到了一個問題，就是tooltip在移動端顯示的時候，會有顯示不全，超出屏幕寬度，造成了顯示不完全，這個時候需要添加另一個屬性，confine。請看下面的代碼
1 tooltip: { 2 confine:true, // 是否將 tooltip 框限制在圖表的區域內 3 }
這樣的話，就能控制，tooltip永遠在圖表內顯示了，也就不會超出可視區域了