微信小程序中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;
}