微信小程序echart图

一、文件后缀构成

JSON：

1.app.json小程序配置

page——小程序所有的页面路径

window——小程序所有页面的顶部背景颜色，文字颜色

{
  "pages": [
   
    "pages/index/index",
    "pages/logs/logs",
    "pages/hvscore/hvscore",
    "pages/historyscore/his_score",
    "pages/index/page1"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "小河儿航旅分查询",
    "navigationBarTextStyle": "black",
    "enablePullDownRefresh": "true",
    "backgroundColor": "#eeeeee"
  },
  
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

2. project.config.json工具配置

工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

3.page.json页面配置

用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置;开发者可以独立定义每个页面的一些属性，例如刚刚说的顶部颜色、是否允许下拉刷新等等。

首页示例

前台：

<view class='box3'>

  <view class="container">
    <view class="page-body">
      <view class="index-hd">
        <image class="logo-avatar" src="../images/hanglvlogo.png"></image>
      </view>

      <form bindsubmit="formSubmit" bindreset="formReset">
        <view class="page-section boder">
          <input style='text-align:center;' type="number" value='{{mobile}}' class="weui-input" name="mobile" confirm-type='next' placeholder="输入手机号查询您的航旅分" bindinput ="mobile" />
        </view>
        <view class='lab1'>您输入的手机号用于确保是您本人在进行查询，航旅分会对您的信息进行保护，绝不会向他人泄漏</view>

        <view class="btn1">
          <button type='primary' loading='{{loading}}'  form-type='submit'>下一步</button>
        </view>

        <view class='lab1'>航旅分是一个航旅人群的评分系统，通过大数据分析方法，用分值来对乘客在航旅市场的出行行为价值进行度量</view>
      </form>

    </view>
  </view>
</view>

后台：

import WxValidate from '../../utils/WxValidate.js'
const scoreUrl = require('../../config').scoreUrl

var Validate = "";

var app =getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    mobile:""
  },

  mobile: function (e) {
    this.setData({
      mobile: e.detail.value
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {



    // 验证字段的规则
    const rules = {
      mobile: {
        required: true,
        tel: true,
      },
    }

    // 验证字段的提示信息，若不传则调用默认的信息
    const messages = {
      mobile: {
        required: '请输入手机号',
        tel: '输入正确的号码',
      },
    }
    // 创建实例对象
    Validate = new WxValidate(rules, messages)



    //是否绑定WXid 

    wx.showToast({
            title: '读取账号信息',  //标题  
            icon: 'loading',  //图标，支持"success"、"loading"
            mask: true,  //是否显示透明蒙层，防止触摸穿透，默认：false  
            duration: 3000,
            success: function() { }, //接口调用成功的回调函数  
     
    });


    //获取用户信息
    wx.getUserInfo({
      success: function (result) {
        var nickName = result.userInfo.nickName;
        var openid = getApp().globalData.openid;
        if (openid=="")
        {
          openid = wx.getStorageSync("openid");
        }

        if (openid=="")
        {
            console.warn("openid为空");
            return false;
        }
        wx.request({
          url: scoreUrl,//请求地址
          data: {//发送给后台的数据
            nickName: nickName,
            openid: openid,
          },
          header: {//请求头
            "Content-Type": "application/x-www-form-urlencoded"
          },
          method: "POST",//get为默认方法/POST
          success: function (res) {
            console.log(res.data);//res.data相当于ajax里面的data,为后台返回的数据
            if (res.data.Err_code == "200") {
              var auuid = res.data.Err_content.split("/");
              wx.redirectTo({
                url: '../hvscore/hvscore?uuid=' + auuid[0] + '&huuid=' + auuid[1] + "&nickName=" + nickName
              })
            }

          }
        })

      }
    })
  },

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




    

  },

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

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

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

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

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

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  },
  formSubmit: function (event) {
    var that = this;

    if (!Validate.checkForm(event)) {
      const error = Validate.errorList[0]
      //提示信息
      //console.log("我没通过验证：" + error);
      wx.showToast({
        title: `${error.msg} `,
        duration: 2000
      })

      return false
    }

    wx.navigateTo({
      url: 'indexs2?mobile=' + that.data.mobile
    })
  }
})

chart图示例

前台：

<!--pages/historyscore/his_score.wxml-->
<view class="container">
<view class="page-body">

<view class='title_center'>历史分值变化</view>

<view class='line'>
<canvas canvas-id="lineCanvas" class="canvas"></canvas>
</view>

</view>
</view>

后台：

// pages/historyscore/his_score.js

const util = require('../../utils/util.js')
const wxCharts = require('../../utils/wxcharts-min.js')

let windowWidth = 500;
try {
  let res = wx.getSystemInfoSync();
  windowWidth = res.windowWidth;
} catch (e) {
  console.warn("我出错了")
}
var app = getApp()

Page({

  /**
   * 页面的初始数据
   */
  data: {
    score: [],
    months: [],
    nowmax: 0,
    nowmin: 0
  },

  touchHandler: function (e) {
    console.log(lineChart.getCurrentDataIndex(e));
    lineChart.showToolTip(e, {
      format: function (item, category) {
        return category + ' ' + item.name + ':' + item.data
      }
    });
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    var uuid = options.huuid;
    //uuid = "9ad923f1d62b49d9bb17ff80b52fae8c";

    //调用接口获取图表数据
    wx.request({
      url: 'https://www.xiaoheer.com/hanglvscore/getsharescore.ashx',
      data: {
        uuid: uuid
      },
      method: "POST",
      header: {
        "Content-Type": "application/x-www-form-urlencoded"  //post
      },
      success: function (res) {
        if (res.data.ErrorRes.Err_code == 200) {
          var myArray = new Array();
          //Y轴数据
          for (var i = 0; i < res.data.flightscore.length; i++) {
            myArray[i] = res.data.flightscore[i].scoreinfo[5].score;
          }
          var max = myArray[0];
          var min = myArray[0];
          for (var i = 0; i < myArray.length; i++) {
            if (myArray[i] > max) {
              max = myArray[i];
            };
            if (myArray[i] < min) {
              min = myArray[i]
            };
          }
          max = parseInt(max) + 1;
          min = parseInt(min) - 1;
          that.setData({ nowmax: max });
          that.setData({ nowmin: min });

          //X轴数据
          var armonth = new Array();
          for (var i = 0; i < res.data.flightscore.length; i++) {
            armonth[i] = res.data.flightscore[i].basicinfo.reportDate;

          }
          myArray = myArray.reverse();
          armonth = armonth.reverse();

          var windowWidth = 120;
          try {
            var res = wx.getSystemInfoSync();
            windowWidth = res.windowWidth;
          } catch (e) {
            console.error('getSystemInfoSync failed!');
          }
          console.log(armonth);
          //实例化图表
          new wxCharts({
            canvasId: 'lineCanvas',
            type: 'line',
            categories: armonth,
            animation: true,
            background: 'White',
            series: [{
              name: '报告日期',
              data: myArray,
              format: function (val, name) {
                return val.toFixed(1);
              }
            }
            ],
            xAxis: {
              disableGrid: true
            },
            yAxis: {
              title: '航旅分数',
              format: function (val) {
                return val.toFixed(1);
              },
              min: min,
              max: max
            },
            dataLabel: true,
             windowWidth,
            height: 500,
            dataPointShape: true,
            extra: {
              lineStyle: 'curve'
            }
          });
        }
      }
    })

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

WXML：HTML（页面结构）

<view class='box3'>

  <view class="container">
    <view class="page-body">

      <view class="index-hd">
        <image class="logo-avatar" src="../images/hanglvlogo.png"></image>
      </view>

      <form bindsubmit="formSubmit" bindreset="formReset">

        <view class="page-section">
          <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell weui-cell_input">
              <view class="weui-cell__bd" style='border-collapse:separate'>
                <label class='weui-cjr' style='float:left; margin-top:21px;'>乘机人</label>
                <input style='padding-left:30px; padding-top:9px;' type="text" class="weui-input" name="username" confirm-type='next' placeholder="请输入你的姓名" />
              </view>
            </view>
          </view>

          <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell weui-cell_input">
              <view class="weui-cell__bd">
                <label class='weui-sfz' style='float:left; margin-top:21px;'>身份证</label>
                <input style='padding-left:30px; padding-top:9px;' type="idcard" class="weui-input" name="idcard" confirm-type='next' placeholder="请输入你的身份证" />
              </view>
            </view>
          </view>

          <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell weui-cell_input">
              <view class="weui-cell__bd">
                <label class='weui-sjh' style='float:left; margin-top:21px;'>手机号</label>
                <input style='padding-left:30px; padding-top:9px;' type="number" class="weui-input" name="mobile" confirm-type='next' placeholder="请输入你的手机号" />
              </view>
            </view>
          </view>

        </view>

        <view class="btn-area">
          <button type='primary' loading='{{loading}}' form-type='submit'>查看我的航旅分</button>
        </view>

      </form>
    </view>
  </view>
</view>

WXSS：CSS（页面样式）

@import "../common/lib/weui.wxss";
@import "../common/index.wxss";

.userinfo-avatar {
  width: 178rpx;
  height: 178rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.logo-avatar {
  width: 236rpx;
  height: 75rpx;
  margin: 20rpx;
}

.page-section-title {
  padding-top: 5px;
}

.box3 {
  background-color: white;
  -webkit-box-shadow: 1px 1px 1px #fff;
  -moz-box-shadow: 1px 1px 1px #fff;
  width: 96%;
  height: 70%;
  margin-top: 7px;
  margin-left: 7px;
  border-radius: 10px 10px 10px 10px; /**左上角-右上角-左下角-右下角*/
}

JS:JS（页面逻辑交互）

// pages/test/test1.js
import WxValidate from '../../utils/WxValidate.js'
const scoreUrl = require('../../config').scoreUrl

var Validate = "";

Page({
  /**
   * 页面的初始数据
   */
  data: {

  },


  formSubmit: function (e) {
    var that = this;
    var formData = e.detail.value;
    console.log(formData.username);

    if (!Validate.checkForm(e)) {
      const error = Validate.errorList[0]
      //提示信息
      //console.log("我没通过验证：" + error);
      wx.showToast({
        title: `${error.msg} `,
        duration: 2000
      })

      return false
    }


    that.setData(
      { loading: true }
    );


    wx.request({
      url: scoreUrl,
      data: {
        name: formData.username,
        idcard: formData.idcard,
        mobile: formData.mobile
      },
      header: {
        'Content-Type': 'application/json'
      },
      success: function (res) {
        //console.log(res.data);

        that.setData(
          { loading: false }
        );
        var uuid = "";
        if (res.data.Err_code == "200") {
          uuid = res.data.Err_content;
          var auuid = uuid.split("/");
          wx.navigateTo({
            url: '../hvscore/hvscore?uuid=' + auuid[0] + "&huuid=" + auuid[1],
          });

        } else {
          var msg = res.data.Err_content;
          if (res.data.Err_content == "NODATA") {
            msg = "未查到航旅分";
          }
          wx.showToast({
            title: msg,
            duration: 2000
          })

        }
        //console.log("uuid=" + uuid);


      }
    });

  },
  formReset: function () {
    console.log('form发生了reset事件');
    this.modalTap2();
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

    var app = getApp();
    var that = this;
    wx.getUserInfo({
      success: function (res) {
        // success  
        switch (res.userInfo.gender) {
          case 0:
            res.userInfo.sex = "未知"
            break;
          case 1:
            res.userInfo.sex = "男"
            break;
          case 2:
            res.userInfo.sex = "女"
            break;
        }
        app.globalData.userInfo = res.userInfo;
      },
    })
    // 验证字段的规则
    const rules = {
      username: {
        required: true,
      },

      idcard: {
        required: true,
        idcard: true,
      },
      mobile: {
        required: true,
        tel: true,
      },
    }

    // 验证字段的提示信息，若不传则调用默认的信息
    const messages = {
      username: {
        required: '请输入姓名',
      },
      idcard: {
        required: '请输入身份证号码',
        idcard: '身份证号码输入有误',
      },
      mobile: {
        required: '请输入手机号',
        tel: '手机号输入有误',
      },
    }
    // 创建实例对象
    Validate = new WxValidate(rules, messages)



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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

 引入微信表单验证以及提交跳转页面

import WxValidate from '../../utils/WxValidate.js'
const scoreUrl = require('../../config').scoreUrl

var Validate = "";

// 验证字段的规则
    const rules = {
      mobile: {
        required: true,
        tel: true,
      },
    }

    // 验证字段的提示信息，若不传则调用默认的信息
    const messages = {
      mobile: {
        required: '请输入手机号',
        tel: '输入正确的号码',
      },
    }
    // 创建实例对象
    Validate = new WxValidate(rules, messages)

  formSubmit: function (event) {
    var that = this;

    if (!Validate.checkForm(event)) {
      const error = Validate.errorList[0]
      //提示信息
      //console.log("我没通过验证：" + error);
      wx.showToast({
        title: `${error.msg} `,
        duration: 2000
      })

      return false
    }

    wx.navigateTo({
      url: 'indexs2?mobile=' + that.data.mobile
    })
  }

调用接口

        wx.request({
          url: scoreUrl,//请求地址
          data: {//发送给后台的数据
            nickName: nickName,
            openid: openid,
          },
          header: {//请求头
            "Content-Type": "application/x-www-form-urlencoded"
          },
          method: "POST",//get为默认方法/POST
          success: function (res) {
            console.log(res.data);//res.data相当于ajax里面的data,为后台返回的数据
            if (res.data.Err_code == "200") {
              var auuid = res.data.Err_content.split("/");
              wx.redirectTo({
                url: '../hvscore/hvscore?uuid=' + auuid[0] + '&huuid=' + auuid[1] + "&nickName=" + nickName
              })
            }

          }
        })

接口

public class getopenid : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        
        string code = context.Request.QueryString["code"];
        bllhanglv bll = new bllhanglv();

        string result = bll.getopenid(code);
        context.Response.Write(result);
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}

app.js配置

//app.js


App({
  

  onLaunch: function () {
    var that = this;
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs);

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
        //var setURL = "https://api.weixin.qq.com/sns/jscode2session";
        var setURL = "https://www.xiaoheer.com/hanglvscore/getopenid.ashx?code=" + res.code;
        wx.request({
          url: setURL,
          method:'GET',
          success: function (res) {
            wx.setStorageSync("session_key",res.data.session_key);
            wx.setStorageSync("openid", res.data.openid);
            that.globalData.openid = res.data.openid;

          }


        })
      }
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo;
              wx.setStorageSync("encryptedData", res.encryptedData)
              wx.setStorageSync("iv", res.iv)
              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
              console.log(this.globalData.userInfo);
            }
          })
        }
      }
    })
  },
  globalData: {
    userInfo:null,
    encryptedData:"",
    iv:"",
    session_key:"",
    openid:""
  }
})