本文介绍微信小程序中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.jsconst 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;}