微信小程序Echarts图动态渲染

 

1.wxml文件

        
            
            日压力监测（kPa）
        
        
            
        
    

 2.json文件

{
  "usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
  },
  "navigationBarTitleText": "看板",
  "navigationBarTextStyle": "white"
  
}

3.wxss文件
.message-box1 {
  margin: 35rpx auto;
  width: 90%;
  height: 309rpx;
  box-shadow: 0 0 10rpx #dedede;    
  border-radius: 20rpx;
}
.message-box-tit {
  font-weight: 500;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 28rpx;
  color: #20B2AA;
  padding-left: 20rpx;
  box-shadow: 0 0 10rpx 0 #dedede;    
  border-radius: 20rpx  20rpx 0 0;
}
.item-cont {
  font-weight: 400;
  font-size: 24rpx;
  color: #20B2AA;
  font-family: Source Han Sans CN;
}
.echarts-box {
  width: 100%;
  height: 240rpx;
}
.ec-canvas {
  width: 100%; 
  height: 70%;
}

4.js文件

 import {getByq} from '../../http/api/common'
import * as echarts from '../../ec-canvas/echarts' // 这个是自己实际的目录
function initChart(chart,wdList,wdVals) { // 这部分是固定的不需要 是通用的
  // canvas.setChart(chart);
  // 这是 唯一需要更改的，可根据实际情况api更改图标
  // option里根据需求修改
  var option = {
    grid: {
      top: '10%',
      left: '2%',
      right: '6%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: wdList
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: wdVals,
      type: 'line',
      smooth: true,
      showSymbol: false,
      lineStyle: {
        color: 'rgba(255,216,76,1)'
      },
      areaStyle: {
        color: 'rgba(255,216,76,0.6)'
      }
    }]
  };
  chart.setOption(option);
  return chart;
}
function initChart1(chart1,ylList,ylVals) { 

  // option里根据需求修改
  var option1 = {
    grid: {
      top: '10%',
      left: '2%',
      right: '6%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ylList
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: ylVals,
      type: 'line',
      smooth: true,
      showSymbol: false,
      lineStyle: {
        color: 'rgba(76,228,255,1)'
      },
      areaStyle: {
        color: 'rgba(76,228,255,0.6)'
      }
    }]
  };
  chart1.setOption(option1);
  return chart1;
}
Page({

  /**
   * 页面的初始数据
   */
  data: {
    ec: {
      lazyLoad:true
    },
    ec1: {
      lazyLoad:true
    },
      byqName:"",
      sensorList: [],
      temData:"",
      ylData:"",
      keyword: '',
      show:false,
      wdList:[],
      wdVals:[],
      ylList:[],
      ylVals:[]
  },
  init_chart:function(wdList,wdVals){
  let Component = this.selectComponent('#mychart-dom-bar') 
    Component.init((canvas,width,height,dpr)=> { 
      const chart= echarts.init(canvas, null, {
      width: width,
      height: height,
      devicePixelRatio:dpr
    });
      initChart(chart,wdList,wdVals)
      return chart;
      })
  },
  init_chart1:function(ylList,ylVals){
    let Component = this.selectComponent('#mychart-dom-bar1') 
      Component.init((canvas,width,height,dpr)=> { 
        const chart1= echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio:dpr
      });
        initChart1(chart1,ylList,ylVals)
        return chart1;
        })
    },

//自己的接口数据，此方法内所有数据应该根据自己接口数据做修改
  getylInfo(id){
    this.data.id=id
    getByq(id).then(res=>{
      if(res.data.code === 200){
        let arr=[]
        let arr1=[]
        if(res.data.data.equipmentVoList.length!==0){
        res.data.data.equipmentVoList.forEach((item, index) => {
          if(index === 0){
            arr = Object.values(item.dataList)
            this.setData({
             wdList :Object.keys(item.dataList),
             wdVals : arr
            })
           
          }
          if(index === 1){
            arr1 = Object.values(item.dataList)
            this.setData({
              ylList :Object.keys(item.dataList),
              ylVals : arr1
             })
             
          }
        })
      }
      else{
        wx.showToast({
          title: '该看板下暂无数据',
          icon:'none',
          duration:1000
        })
      }
          this.setData({
            byqName:res.data.data.transformerName,
            sensorList:res.data.data.equipmentVoList,       
            temData:arr.length==0?0:arr[arr.length-1],
            ylData:arr1.length==0?0:arr1[arr1.length-1],  
          })
      this.init_chart(this.data.wdList,this.data.wdVals)
      this.init_chart1(this.data.ylList,this.data.ylVals)
      }
  })
  
  },
  /**
   * 生命周期函数--监听页面加载
   */

 onLoad: function (options) {
    const id = options.id
    this.getylInfo(id)   
},

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
   
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})