微信小程序画折线图

源代码连接源代码
先上效果图

登陆首页

折线图（小程序每天的访问人数）

文件功能

• analyze.js：初始化登陆页面，指定页面的初始数据、生命周期函数、事件处理函数等。设置了一个点击事件，跳转到访问人数折线图页面。

• brokenline.js：折线图的绘画。

• dimen.js：屏幕尺寸调整文件，将开发的小程序调整成与手机相适应的屏幕尺寸。

• daily.js：存储折线图的数据，该数据直接从小程序公众平台的开放接口获取。

实现流程

1. 设置初始登陆页面，编写折线图页面的接口

analyze.js

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

  },

  /**
 2. 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.drawTransitionLine();
  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

  // 跳转至折线图
  startBrokenline: function (event) {
    wx.navigateTo({
      url: '/pages/analyze/brokenline/brokenline'
    })
  },
})

2.初始调用dimen.js daily.js 获取数据和尺寸大小

var dimen = require("../../../utils/dimen.js");
var data = require('../../../data/daily.js');