小程式mpvue-echarts的使用

專案需求，要在小程式中加入一個折線圖來展示兩個資料的變化。因為我之前一直是寫pc端的，而且用的highcharts，所以現在記錄一下用echars的問題。 我覺得hightcharts相對於echarts來說，他有每個部分代表什麼的一張圖，如下：

對於剛寫圖表的新手來說還是很方便的，echarts我沒找到在哪兒（有找到的話可以告訴我一下，謝謝） 1、問題1：雙Y軸問題 要在series中第二個軸寫一個yAxisIndex: 1，因為yAxisIndex預設為0，也就是第一個軸，你定義它為1的話資料就會根據第二個軸來畫線。

2、問題2：y軸分割線

如果你不想要中間那些灰色的分割線，要在yAxis中定義 splitLine: {show: false },就會變成下面這樣，根據自己的需要來取捨

3、問題3：x軸左右有邊距 如圖：

如果你的ui圖沒有這個紅筆畫的空白，要在xAxis中寫boundaryGap: false。 如果你的ui圖沒有藍筆畫的座標豎線，還需要在xAxis中寫axisTick: {show: false}, 最後變為

4、問題4：legend樣式變化

5、其他資料不顯示，只顯示最後一個資料 在series中分別設定類似這樣的，可以參考官方文件

6、還需解決的問題小程式打包過大（19.6.26）(19.7.2) 還可以壓縮你的js,css檔案還有圖片，不過要注意小程式暫不支援svg，canvas也有個坑是requestAnimationFrame沒法用，動畫效果不太好。 解決了一大步，還有一小步關於分包，因為目前還沒涉及到，等用到再來分享吧 文章連結中解決打包的部分方法 juejin.im/post/5d132e…

7、echarts中tooltip的問題，之前我一直以為是它的問題，結果！！！！找了一下午是我自己單詞拼錯的原因，實屬扎心了，現在貼上程式碼記錄一下別讓正在做的人踩坑，如果他git上下載的內容太大，你可以自己定製，只要你需要的功能就行，要相信你永遠不知道ui和產品會讓你做什麼樣的小程式 canvas動畫，所以能節省一點就節省一點，程式碼如下

效果：

跟官網的列子一樣，有一個豎線