微信小程序中使用ECharts&動態數據怎麼綁定？報表數目不確定怎麼辦？

快速到達官網：ECharts官方網址說明

微信開發者工具中使用ECharts

下載GitHub項目：ECharts官方給的GitHub項目

然後我們把下載好的echarts-for-weixin-master文件解壓

然後打開微信開發者工具，選擇小程序=》點擊導入項目=》目錄選擇剛纔的解壓文件夾=》AppID用測試號=》點擊導入

然後我們就打開到了官方Demo項目，裏面有很多報表供參考，你可以預覽一下，後續我會用官方的事例來說一些使用中存在的問題。

然後官方封裝好的組件代碼都在ec-canvas這個文件夾

然後我簡單的說一下在我們自己的項目中要怎麼引入ECharts，因爲不難我就簡單說一下流程，首先我們要將ec-canvas文件夾拷貝到自己的項目中

然後接下來我都會以pie餅狀圖爲例子解說，因爲pie的代碼比較少，說起來比較清晰

接着要修改配置pages下4個文件，json文件需引入"ec-canvas"，注意一下自己的目錄層級，別搞錯路徑了

wxml文件需要引入<ec-canvas></ec-canvas>，然後外層要套一次view標籤，然後view標籤可以設置position或者彈性佈局display，但是需要注意的是如果你只用彈性佈局的話，需要給ec-canvas標籤添加實高，不然報表會不顯示，具體看下面GIF。

然後js文件要導入echarts文件（別搞錯路徑了，否知會報錯echarts is a not function等東西），然後報表方法initChart要寫在Page外面，然後data裏的ec對象的onInit參數值initChart就是報表方法名。

好了，經過以上步驟，就可以簡單的導入一個圖表了，如果有問題就仔細檢查看看是不是漏了啥步驟。

動態數據怎麼綁定？

由於小程序的js文件的執行機制，我們想要把Page頁裏面的數據用於其自生外JS方法（initChart）是行不通的，所以我找到的解決方案是在數據在全局app.js文件中獲取

依舊是用官方Demo項目的pie餅狀圖來說，首先我們把報表數組放到app.js文件的globalData對象裏

然後引入app對象，將data的數據換成globalData裏的的好了

然後如果需要wx.request調用報表的接口，就在app.js這裏先獲取到，然後賦值給globalData裏的數組就好了。

報表數目不確定怎麼辦？

如果報表的數目確定的話很好辦，官方給的demo有給出來，模擬器滾動到頁底就可看到，page名是multiCharts

報表數目不確定的話有點啃爹，需要修改源碼，依舊是用官方Demo項目的pie餅狀圖來說

首先我們把打開ec-canvas.js文件，Ctrl+F查找到properties對象，裏面添加下面的自定義變量itemData: { type: Object}

Ctrl+F查找到onInit事件，爲了防止版本庫的問題，我們要在initByOldWay和initByNewWay方法裏的onInit事件在末尾處都要傳多一個剛纔新建的對象this.data.itemData，

app.js文件的globalData對象裏添加下面數組

    chartData: [
      {title: '報表一',data: [{value: 40,name: '北京'}, {value: 30,name: '廣州'}, {value: 30,name: '上海'}]},
      {title: '報表二',data: [{value: 20,name: '武漢'}, {value: 10,name: '杭州'}]},
    ]

然後把JS改成下面代碼，initChart方法多傳一個itemData數組對象，option 對象裏的series的data換成itemData數組，Page的data裏面新建chartData數組，onLoad方法裏面獲取globalData裏chartData並更新

import * as echarts from '../../ec-canvas/echarts';

const app = getApp();

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

  var option = {
    backgroundColor: "#ffffff",
    color: ["#37A2DA", "#32C5E9", "#67E0E3", "#91F2DE", "#FFDB5C", "#FF9F7F"],
    series: [{
      label: {
        normal: {
          fontSize: 14
        }
      },
      type: 'pie',
      center: ['50%', '50%'],
      radius: ['40%', '60%'],
      data: itemData
    }]
  };

  chart.setOption(option);
  return chart;
}

Page({
  data: {
    chartData: [],
    ec: {
      onInit: initChart
    },
  },

  onLoad() {
    this.setData({
      chartData: app.globalData.chartData
    })
  }
});

然後把wxml改成下面代碼，新增一個itemData值用於儲存每一個表報的不同數據

<!--index.wxml-->
<view class="container">
	<block wx:for="{{chartData}}">
		<text>{{item.title}}</text>
		<ec-canvas id="mychart-dom-bar" canvas-id="mychart-pie" itemData="{{item.data}}" ec="{{ec}}"></ec-canvas>
	</block>
</view>

最後我們看一下效果

如果想再深入一點的話，可以看這位大佬的文章傳送門，over。