微信小程序中ECharts的數據綁定的一種方法

    本文介紹微信小程序中ECharts的數據綁定的一種方法。

    在微信小程序中使用ECharts時，官方教程的數據是固定的，並無提到如何獲取數據。

    問題描述：

    咱們把數據放在和圖表同一個頁面，數據會沒法綁定上，和小程序頁面的生命週期有關：

data: {
    ec: {
      onInit: initChart
    },

　　

    解決方案：

    在微信小程序中，咱們還有一個能夠存儲App全局變量的地方：app.js。

    咱們能夠在圖表展現的前一個界面，將數據先從服務器獲取到，存入app.js的globalData{}：

util.HttpRequst(true, 'YourUrl', 1, YourCookie, { YourData }, 'GET', false, function (data) { if (JSON.parse(data)[0].msghead == 'success') { let dataStr = JSON.parse(data)[0].msgbody; let dataObj = JSON.parse(dataStr);                        //獲取數據
        for (var idx in dataObj) {                                //數據分別存入globalData
          app.globalData.chartsData.monthList[idx] = dataObj[idx].MONTH; app.globalData.chartsData.totalList[idx] = dataObj[idx].TOTALFARE; app.globalData.chartsData.waterList[idx] = dataObj[idx].WATERFARE; app.globalData.chartsData.electricList[idx] = -dataObj[idx].ELECTRICFARE; } console.log(app.globalData.chartsData); } }); wx.navigateTo({ url: '/pages/costtrend/costtrend', })

 

 

    而後再跳轉到圖表展現頁面時，表格數據綁定更改成globalData{}：

    

// pages/costtrend/costtrend.js
const app = getApp(); import * as echarts from '../../components/ec-canvas/echarts'; let chart = null; Page({ /** * 頁面的初始數據 */ data: { ec: { onInit: initChart }, }, ... function initChart(canvas, width, height) { var that = this; chart = echarts.init(canvas, null, { width: width, height: height }); canvas.setChart(chart); var option = { color: ['#37a2da', '#32c5e9', '#67e0e3'], tooltip: { trigger: 'axis', axisPointer: { // 座標軸指示器，座標軸觸發有效
        type: 'shadow'        // 默認爲直線，可選爲：'line' | 'shadow'
 } }, legend: { data: ['總費用', '電費', '水費'] }, grid: { left: 20, right: 20, bottom: 15, top: 40, containLabel: true }, xAxis: [ { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } } ], yAxis: [ { type: 'category', axisTick: { show: false }, data: app.globalData.chartsData.monthList, //數據綁定更改成globalData
 axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } } ], series: [ { name: '總費用', type: 'bar', label: { normal: { show: true, } }, data: app.globalData.chartsData.totalList, //數據綁定更改成globalData
 itemStyle: { // emphasis: {
          // color: '#37a2da'
          // }
 } }, { name: '電費', type: 'bar', stack: '總量', label: { normal: { show: true, position:'left' } }, data: app.globalData.chartsData.electricList, //數據綁定更改成globalData
 itemStyle: { // emphasis: {
          // color: '#32c5e9'
          // }
 } }, { name: '水費', type: 'bar', stack: '總量', label: { normal: { show: true, position: 'right' } }, data: app.globalData.chartsData.waterList, //數據綁定更改成globalData
 itemStyle: { // emphasis: {
          // color: '#67e0e3'
          // }
 } } ] }; chart.setOption(option); return chart; }