微信小程序画折线图

最新推荐文章于 2026-05-07 09:45:03 发布

原创

最新推荐文章于 2026-05-07 09:45:03 发布 · 1.5w 阅读

标签

#微信

本文介绍如何在微信小程序中实现折线图，详细阐述了从初始化登陆页面到画折线图的整个流程，包括analyze.js的页面配置，brokenline.js的绘图逻辑，dimen.js的屏幕适配，daily.js的数据获取，以及画布创建、坐标轴设置、动画效果、线条绘制等步骤。

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

这里写图片描述
登陆首页

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

文件功能

analyze.js：初始化登陆页面，指定页面的初始数据、生命周期函数、事件处理函数等。设置了一个点击事件，跳转到访问人数折线图页面。
brokenline.js：折线图的绘画。
dimen.js：屏幕尺寸调整文件，将开发的小程序调整成与手机相适应的屏幕尺寸。
daily.js：存储折线图的数据，该数据直接从小程序公众平台的开放接口获取。

实现流程

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

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画布

最低0.47元/天解锁文章