小程序 升級echarts版本， 來解決echarts圖覆蓋在小程序最上層的問題

小程序在使用舊版的echarts圖表時，圖表會覆蓋在一些組件上，在使用代替不太生效後，我把一些自定義組件換成了微信的原生組件，一定程度上緩解了這一問題，但總歸不是長久之計。

最近同事@leo通過查看echarts的git的readme說明，發現新的echarts解決了這一問題，於是我們升級了echarts版本，最終解決了這一覆蓋問題。
強烈建議按照https://github.com/ecomfe/echarts-for-weixin頁面中的文檔進行操作，它的步驟寫的要比我好得多，如果嫌棄它寫的太多的話，我這邊的大體步驟如下（如有遺漏，還請指正~）：
1.下載 ECharts 的微信小程序版本：
下載地址：https://github.com/ecomfe/echarts-for-weixin，因爲我不希望echarts文件佔的大小過大，所以我只把它的ec-canvas
文件夾複製到我的項目的根目錄：

2.下載echarts.js文件
爲減小文件大小，我只引入了我需要的echarts組件，並引入了壓縮版本，按需引入地址：https://www.echartsjs.com/zh/builder.html，一版選默認即可，如果想在本地進行調試，可以選擇不壓縮。
改名文件：將下載好的文件改名成echarts.js文件，放到ec-canvas目錄下：

3.編寫代碼
首先，在 pages/index/ 目錄下新建以下幾個文件：index.js、 index.json、 index.wxml、 index.wxss。並且在 app.json 的 pages 中增加 ‘pages/bar/index’。

index.json 配置如下：注意路徑要配對，是以當前文件爲起點，找到ec-canvas目錄下

{
  "usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
  }
}

這一配置的作用是，允許我們在 pages/bar/index.wxml 中使用 組件。注意路徑的相對位置要寫對，如果目錄結構和本例相同，就應該像上面這樣配置。

index.wxml 中，我們創建了一個 組件，內容如下：

<view class="container">
  <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>

注意此處的 .container，新建小程序項目後，其中 app.wxss 中默認自動生成的此 class 與本 demo 中的可能不一致，導致圖表不能正常顯示，只顯示空白。請注意參考 app.wxss 修改樣式，保證圖表的初始化的時候是有寬度和高度的。

其中 ec 是一個我們在 index.js 中定義的對象，它使得圖表能夠在頁面加載後被初始化並設置。index.js 的結構如下：

function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // 像素
  });
  canvas.setChart(chart);

  var option = {
    ...
  };
  chart.setOption(option);
  return chart;
}

Page({
  data: {
    ec: {
      onInit: initChart
    }
  }
});

這對於所有 ECharts 圖表都是通用的，用戶只需要修改上面 option 的內容，即可改變圖表。option 的使用方法參見 ECharts 配置項文檔。對於不熟悉 ECharts 的用戶，可以參見 5 分鐘上手 ECharts 教程：