springboot初始化加载数据_小程序 echarts图表初始化与加载动态数据

在小程序中，根据需求有时候需要添加多个echarts图表进行动态数据的显示。

但是动态数据是异步加载的，不能确定究竟是数据加载完成在前，还是echarts图表初始化完成在前，因此会出现图表上无数据显示控制台却有数据获取的情况发生。

使用绑定事件监听函数addEvent（），当完成事件再进行通知callEvent（）可参考例子

• 外部封装方法

function endInitData()
{
  event.callEvent("endInitData")
}

function getDataServer(url, data, cb) {
  wx.request({
    url: url,
    data: data,
    method: 'POST',
    header: {
      'content-type': 'application/json'
    },
    success: (res) => {
      cb(res)
    },
    fail: () => {
      wx.showToast({
        title: '请求超时！',
        mask: true,
        duration: 3000
      })
    }
  })
}

应当将echarts的初始化以及数据绑定两者进行一个状态是否完成的判定，则需要分别设置一个状态值，完成是设置值为1

var initDataFlag = 0
var initFlag = 0

• 在当前页面的js中，进行对数据的请求

//设置一个函数
var url =	'请求的地址'
function fillChart(chart, option) {
  var reqData = data
  }
  proData.getDataServer(url, reqData, function(res) {
  //可以console打印出回调的res再进行数据选择
    var datapoints= res.data[0].datapoints;
    var xAxisData = [];
    var seriesData = [];
    for (var i = 0; i < datapoints.length; i++) {
      var v = datapoints[i][0];
      var t = datapoints[i][1];
      
      //如果是需要获取时间的则进行转换
      //var day = (new Date(t)).getDate()	// 月份则.getMonth() + 1
      //xAxisData.push(day + "日")
      
      xAxisData.push(t.toFixed(0)) 	//取整
      seriesData.push(v.toFixed(0))
    }
    option.xAxis[0].data = xAxisData	//定位横坐标的数据位置
    option.series[0].data = seriesData		//这里是纵坐标
    chart.setOption(option)	
  })
}

• 根据请求数据以及所选择的echarts图表，进行数据位置的绑定

var eventList = {}

function addEvent(eventName, cb) {
  if (eventList[eventName] == undefined) {
    eventList[eventName] = []
  }
  eventList[eventName].push(cb)
}
 
function callEvent(eventName)
{
  if (eventList[eventName] == undefined) {
    return
  }
 
  var list = eventList[eventName]
  for(var i = 0; i < list.length; i++)
  {
    eventList[eventName][i]()
  }
}
 
module.exports = {
  addEvent: addEvent,
  callEvent: callEvent
}

• 判断是否进行数据渲染

endInitData: function() {
    initDataFlag = 1;	//执行该方法 数据渲染状态变为1
    if (initFlag == 1) {
      fillChart(chart, option)
    }
  },

• 别忘了导包

var event = require('../event/event.js')

• 最后再onLoad（）中执行addEvent（）

event.addEvent("endInitData", this.endInitData)

Zjaun的博客_CSDN博客-HTML,JQ,VUE领域博主​blog.csdn.net