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

作者：盐析白兔 | 2024-03-18 20:23:26

踩

springboot根据柱状图x轴数据初始化y轴数据

在小程序中，根据需求有时候需要添加多个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 &lt; 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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/265546