微信小程序画折线图

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

登陆首页

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

文件功能

• 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');

3.创建canvas画布

const context_line = wx.createCanvasContext('line-canvas');

4.定义坐标轴放大倍数和需要的颜色值

// x轴放大倍数
var ratioX = 12.4;
// y轴放大倍数
var ratioY = 4;

// 紫色
var purple = '#7E8FDD';
// 浅紫
var lightPurple = '#D6DBF4';
// 灰色
var gray = '#cccccc';
// 浅灰
var lightGray = '#c7cce5';
// 橙色
var orange = '#ffaa00';
// 浅橙色
var lightOrange = '#DAD7DC';
// 板岩暗蓝灰色
var SlateBlue = '#6A5ACD';

// 最大访问人数
var maxUV = 0;

var count = 0;

5.设置动画效果

var Timing = {
  //由慢至快
  easeIn: function easeIn(pos) {
    //x的y次幂
    return Math.pow(pos, 3);
  },

//由快至慢
  easeOut: function easeOut(pos) {
    return Math.pow(pos - 1, 3) + 1;
  },

//由快至慢再由慢至快
  easeInOut: function easeInOut(pos) {
    if ((pos /= 0.5) < 1) {
      return 0.5 * Math.pow(pos, 3);
    } else {
      return 0.5 * (Math.pow(pos - 2, 3) + 2);
    }
  },

  linear: function linear(pos) {
    return pos;
  }
};

6.画折线

  drawVisitUvLine: function (list, count) {
    list.forEach(function (data, i, array) {
      if (data.visit_uv > maxUV) {
        maxUV = data.visit_uv;
      }
    });
//x,y轴放大倍数
    ratioX = (canvasWidth_line - dimen.rpx2px(30)) / list.length;
    ratioY = (canvasHeight_line - dimen.rpx2px(80)) / maxUV;

    if (count < list.length - 1) {
      // 当前点坐标
      var currentPoint = {
        x: count * ratioX + dimen.rpx2px(40),
        y: (canvasHeight_line - list[count].visit_uv * ratioY) - dimen.rpx2px(40)
      };
      // 下一个点坐标
      var nextPoint = {
        x: (count + dimen.rpx2px(2)) * ratioX + dimen.rpx2px(40),
        y: (canvasHeight_line - list[count + 1].visit_uv * ratioY) - dimen.rpx2px(40)
      }

      // 开始路径
      context_line.beginPath();

      // 画线：移动到当前点
      context_line.moveTo(currentPoint.x, currentPoint.y);
      // 画线：画线到下个点
      context_line.lineTo(nextPoint.x, nextPoint.y);
      // 设置线宽度
      context_line.setLineWidth(dimen.rpx2px(2));
      // 设置线颜色
      context_line.setStrokeStyle('white');
      // 描线
      context_line.stroke();

      // 填充内容：竖直往下，至x轴
      context_line.lineTo(nextPoint.x, canvasHeight_line - dimen.rpx2px(40));
      // 填充内容：水平往左，至上一个点的在x轴的垂点
      context_line.lineTo(currentPoint.x, canvasHeight_line - dimen.rpx2px(40));
      // 设置填充颜色
      context_line.setFillStyle('#D6DBF4');

      // 实现闭合与x轴之前的区域
      context_line.fill();
    }
  },

7.画横向参照线

  drawVisitBackground: function () {      
    var lineCount = 5;    //5条
    var estimateRatio = 2;
    var ratio = (canvasHeight_line + dimen.rpx2px(30)) / lineCount;
    var maxPeople = ((Math.floor(Math.floor(148 / 10) / 4) + 1) * 4) * 10;
    for (var i = 0; i < lineCount; i++) {
      context_line.beginPath();   //创建一个新路径
      //设置当前坐标点
      var currentPoint = {
        x: dimen.rpx2px(40),
        y: (canvasHeight_line - i * ratio) - dimen.rpx2px(40)
      };
      // 移动到当前坐标点
      context_line.moveTo(currentPoint.x, currentPoint.y);
      // 向Y正轴方向画线
      context_line.lineTo(canvasWidth_line - dimen.rpx2px(10), (canvasHeight_line - i * ratio) - dimen.rpx2px(40));
      // 设置属性
      context_line.setLineWidth(dimen.rpx2px(2));
      // 设置颜色
      context_line.setStrokeStyle(lightGray);
      context_line.stroke();
      // 标注数值
      context_line.setFillStyle(gray);
      // 底部人数文字
      context_line.fillText(i * maxPeople / (lineCount - 1), currentPoint.x - dimen.rpx2px(40), currentPoint.y);
    }
  },

8.画底部日期

  drawDate: function (list) {
    var ref_date = "";
    var temp_ref_date1 = "";
    var temp_ref_date2 = "";

    list.forEach(function (data, i, array) {
      if (i < array.length - 1) {
        context_line.setFillStyle(gray);    //灰色

        ref_date = data.ref_date.toString();
        temp_ref_date1 = ref_date.substring(4, 6) + ".";//截取第4个到第6个字符
        temp_ref_date2 = ref_date.substring(6, ref_date.length);
        ref_date = temp_ref_date1 + temp_ref_date2;

//每4个标记一次
        if (i % 4 == 0) {
          context_line.fillText(ref_date, i * ratioX + dimen.rpx2px(10), canvasHeight_line - dimen.rpx2px(10));
        }
      }
    });
  },