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

超、凢脫俗 2022-11-28 00:48 206阅读 0赞

一、描述

在微信小程序中使用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
        }]