### 圖表Echart使用 ***** 1、克隆：`git clone https://gitee.com/hhhero/echarts-for-weixin.git` 2、復制`ec-canvas`文件夾到小程序中，一般放pages同級目錄中，看項目目錄設計吧  3、這時候你看到的并沒有`echarts.min.js`，而是全量的`echarts.js`，這時候可以[定制Echarts](https://echarts.apache.org/zh/builder.html)你所需要的圖表，然后在 其它選項中選擇代碼壓縮 下載即可得到`echarts.min.js`。  4、修改`ec-canvas.js`導入文件名稱 `import *as echarts from './echarts.min';`  5、小程序page中使用 ``` // .json文件 "usingComponents":?{ ????"ec-canvas":?"../../ec-canvas/ec-canvas" ??} ``` ``` // .wxml文件 <ec-canvas??style="height:?500rpx;width: 100%;"?id="mychart-first" ??canvas-id="mychart-first"?ec="{{?ecEchart?}}"></ec-canvas> ``` ``` // .js文件 let options = { barOption: { // 配置項 // ... } } // 存放繪制對象 let myChart = { chartOne: null } function?init({canvas, width, height, dpr, optionKey})?{ ??let?chart?=?echarts.init(canvas,?null,?{ ????width:?width, ????height:?height, ????devicePixelRatio:?dpr?//?像素 ??}); ??chart.showLoading();?//?首次顯示加載動畫 ??canvas.setChart(chart); ??let?option?=?options[optionKey] ??chart.setOption(option); ??chart.hideLoading();?//?隱藏加載動畫 ??return?chart; } function?initOneChart(canvas,?width,?height,?dpr)?{ ??myChart.chartOne?=?init({canvas,width,height,dpr,optionKey:?'barOption'}); ??return?myChart.chartOne; } Page({ data:{ ecEchart:?{ ??????onInit:?initOneChart ????} }, onReady() { this.getEcharts() }, getEcharts() { let?setOne?=?{ ????????xAxis:?{ ??????????data:?[]?//異步請求返回數據，如 ['2021-08-01','2021-08-02',...] ????????}, ????????series:?[{ ??????????name:?'收入分析', ??????????data:?[]?// 異步請求返回數據，如 [12,33,...] ????????}] ????} myChart.chartOne.setOption(setOne); } }) ``` 收工，如下圖所示：  ### 問題 ***** * 問題一：頁面滾動，圖表像是添加了`position: fixed;`一樣，不跟隨父級滾動。 引發原因：在掛在圖表元素的某個父級，存在以下樣式，導致 ``` height:100vh; overflow-y:auto; overflow-x:hidden; ```  解決：把樣式`height:100vh;`去除。 * 問題二：手機橫屏，圖表做不到重新繪制，導致模糊等情況，如下圖，圖二x軸坐標上顯示有些變扭曲。 :-: 圖一：  :-: 圖二：  解決： 第一步：.json文件添加 `"pageOrientation":"auto",` 允許橫屏； 第二步：.js文件添加 `onResize(res){}`,監聽手機橫屏變化，以便做相應處理； 第三步：經過上面兩步，以為直接 `chart.resize()`就可以了嗎？小程序并不這么友好啊！！！坑出現了。 還需要配合以下幾步：重新繪制需要 `wx.nextTick(() => {}) // 視圖更新完成，使得chart不等undefined` 、 視圖`wx:if` 和 `chart.setOption(options)`; 說明：視圖通過`wx:if`控制組件，配合`setOption(options)`才能實現（橫屏）重新繪制，除此之外也沒有發現其他方法了。  :-: 豎屏效果：  :-: 橫屏效果：  ### 其他信息 ***** [GitHub](https://github.com/wwmingly/ec-echart-wx)： https://github.com/wwmingly/ec-echart-wx