微信小程序之图表系列

2024-06-30 22:24| 来源: 网络整理| 查看: 265

一图胜千言，相信很多开发者都没有绕开过图表制作这个坑，在小程序中也是，当然可以用第三方echart等制图插件来做，但小程序要求代码量最大12M，还得分好几个包，一个echart插件就将近1M，要是只做一张表或几张表实在浪费，况且小程序的加载速度与程序包大小也是息息相关的。因此写这系列文章，目的是降低程序包大小，又能实现需要的图表。

canvas实现柱状图

为什么要使用canvas呢？直接用view控制高度不是也可以吗？可以，只是一般涉及到图表的功能都会涉及到导出功能，使用canvas更方便导出，同时canvas在绘制上更加灵活，用view布局更容易写死。

先上效果图：

在这里插入图片描述

体验路径：

在这里插入图片描述实现思路： 1、通过获得的展示数据得到需要画几根柱子 2、通过相机宽度、高度计算出每根柱子的宽度及高度 3、for循环依次绘制每根柱子 4、绘制柱子时，先绘制顶部百分比、value值，再绘制柱子，再绘制底部标题 5、文字需要居中，可绘制前丈量文字宽度再确定起始坐标

代码：

Page({ /** * 页面的初始数据 */ data: { canvasInfo:{}, dataList: [{ title: "17岁以下", value: 0 }, { title: "18-24岁", value: 8 }, { title: "25-29岁", value: 9 }, { title: "30-39岁", value: 7 }, { title: "40-49岁", value: 3 }] }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.messureCanvas() }, messureCanvas(){ let query = wx.createSelectorQuery().in(this); // 然后逐个取出navbar和header的节点信息 // 选择器的语法与jQuery语法相同 query.select('#columnarCanvas').boundingClientRect(); // 执行上面所指定的请求，结果会按照顺序存放于一个数组中，在callback的第一个参数中返回 var that = this query.exec((res) => { // 分别取出navbar和header的高度 console.log(res) var canvasInfo = {} canvasInfo.width = res[0].width canvasInfo.height = res[0].height that.setData({ canvasInfo:canvasInfo }) console.log(canvasInfo) that.drawColumnar() }) }, drawColumnar() { const ctxColumnar = wx.createCanvasContext("columnarCanvas") var dataList = this.data.dataList var canvasInfo = this.data.canvasInfo var columnarNum = dataList.length var columnarWidth = (canvasInfo.width-30)/(2*columnarNum+1) console.log("宽度",columnarWidth) var maxColumnarHeight = canvasInfo.height - 60 - 20 var maxColumnarValue = 0 var totalValue= 0 for (var i = 0; i maxColumnarValue = dataList[i].value } totalValue = totalValue+dataList[i].value } for (var i = 0; i

【本文地址】

公司简介

联系我们