【前后交互】微信小程序的echarts前后交互解决

一、描述

在微信小程序中使用echarts时，像Vue中直接把data传入是不行的，原因是因为小程序的生命周期一样。

二、解决办法

使用全局变量进行传入数据

第一步：

在app.js中加入 globalData{}

//app.js
App({
  globalData: {
    mealsList:[],  // 用户记录
    name: '张三',
    age: 18,
      time:[],//7,6,4,2,3,5,6
      heartRate:[],//65,76,87,54,64,54,65
      sleepTime:[],//10,30,31,50,40,20,10
      temperature:[],//37,36,37,38,36,37,36
      bodyScore:70,
      assessmentScore:70,
      mentalScore:70
  },
  
  onLaunch: function () {
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
      }
})

第二步
在所需echarts页面加载的前一个页面的onLoad中进行服务端的数据获取（app.global. 获取也可直接进行修改）：

onLoad:function(){
    // setInterval(()=>{console.log("hello"),1000});
    // setInterval(()=>this.getNewChartData, 10000);


      this.setData({
    id: app.globalData.mealsList
 }),

 console.log("test")
    wx.request({
     url: 'http://127.0.0.1:8082/Hys/employee/queryLastSevenRecord', //仅为示例，并非真实的接口地址
     data: {
     "id": app.globalData.mealsList
     },
     method:"POST",
     header: {
     'content-type': 'application/x-www-form-urlencoded ' // 默认值
     },
     success (res) {
       console.log(app.globalData.mealsList)
     console.log(res)
     //toFixed():保留小数   ,unshift与push
    for(let i=0; i<res.data.length;i++){
    app.globalData.time.unshift(res.data[i].time.substring(11,19));
    app.globalData.temperature.unshift(parseFloat(res.data[i].temperature));
    app.globalData.heartRate.unshift(parseFloat(res.data[i].heartRate));
    app.globalData.sleepTime.unshift(parseFloat(res.data[i].sleepTime));
    }
     }
     })
},

第三步
把echarts中的series中的data： app.globalData. 即可

 series: [{
      name: '体温',
      type: 'line',
      smooth: true,
      data: app.globalData.temperature
    }, {
      name: '心率',
      type: 'line',
      smooth: true,
      data: app.globalData.heartRate
    }, {
      name: '睡眠',
      type: 'line',
      smooth: true,
      data: app.globalData.sleepTime
    }]