小程序折线图及tabs的设置

参考文档：https://www.jb51.net/article/162670.htm

在文档中我们需要去git上下载js插件

html页面

<view class="body">
  <view class="nav bc_white">
    <view class="{{selected?'red':'default'}}" bindtap="selected">每日体重</view>
    <view class="{{selected1?'red':'default'}}" bindtap="selected1">体重趋势</view>
  </view>

  <view class="{{selected?'show':'hidden'}}">
    <block wx:for="{{data}}" wx:key="key">
      <view>
        <text>当前体重：{{item.weight}}斤</text>
        <text>添加时间{{item.time}}</text>
      </view>
    </block>
  </view>

  <view class="{{selected1?'show':'hidden'}}">
   <canvas
 style="width: 400px; height: 500px;"
 canvas-id="yueEle"
 binderror="canvasIdErrorCallback"
></canvas>
  </view>
</view>

css样式

.weui-tabs-bar__item{
  margin: 100rpx;
}
.nav{width:100%;height:100rpx;display:flex;flex-direction:row;}
.default{line-height:100rpx;text-align:center;flex:1;border-right:1px solid gainsboro;color:#000;font-weight:bold;font-size:28rpx;}
.red{line-height:100rpx;text-align:center;color:#fc5558;flex:1;border-right:1px solid gainsboro;font-weight:bold;font-size:28rpx;}
.show{display:block;text-align:center;line-height:200rpx;}
.hidden{display:none;text-align:center;line-height:200px;}

js页面

//tabs
  data:{
    selected:true,
    selected1:false
    },
selected:function(e){
    this.setData({
        selected1:false,
        selected:true
    })
},
selected1:function(e){
    this.setData({
        selected:false,
        selected1:true
    })
},

然后在当前js的page上部引入

var wxCharts=require('../../utils/wxcharts')
var app = getApp();
var daylineChart = null;
var yuelineChart = null;

然后在js里面进行折线图的配置

 /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var _this=this;
    wx.request({
      url: 'http://day528.exam9.com/weightList',
      success:function(res){
         //console.log(res.data.data)
        var data = res.data.data;
        _this.setData({
          data
        });
        _this.getMothElectro(data)
      }
    }) 
  },

//折线图
  getMothElectro:function(data){
    let time=[];
    let weight=[];
    for(let i in data){
      time.push(data[i]['time'])
      weight.push(data[i]['weight'])
    }
    var windowWidth = 320;
    try {
     var res = wx.getSystemInfoSync();
     windowWidth = res.windowWidth;
    } catch (e) {
     console.error('getSystemInfoSync failed!');
    }
    yuelineChart = new wxCharts({ //当月用电折线图配置
     canvasId: 'yueEle',
     type: 'line',
     categories: time, //categories X轴
     animation: false,
     // background: '#f5f5f5',
     series: [
     {
      name: '时间',
      data: weight,
      format: function (val, name) {
       return val.toFixed(2) + 'kWh';
      }
     }],
     xAxis: {
      disableGrid: true
     },
     yAxis: {
      title: '体重/KG',
      format: function (val) {
       return val.toFixed(2);
      },
      max: 150,
      min: 40
     },
     width: windowWidth,
     height: 200,
     dataLabel: false,
     dataPointShape: true,
     extra: {
      lineStyle: 'curve'
     }
    });
   },

   yueTouchHandler: function (e) { //当月用电触摸显示
    console.log(daylineChart.getCurrentDataIndex(e));
    yuelineChart.showToolTip(e, { //showToolTip图表中展示数据详细内容
     background: '#7cb5ec',
     format: function (item, category) {
      return category + '日 ' + item.name + ':' + item.data
     }
    });
   },

后台代码

  //查询体重
    public function weightList()
    {
        $data=Weight::all();
        return ['code'=>200,'data'=>$data,'msg'=>'查询成功'];
    }