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