原始碼連線原始碼
先上效果圖

登陸首頁

折線圖（小程式每天的訪問人數）

檔案功能

• 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));
        }
      }
    });
  },