在miniprogram下的utils文件夾（若沒有就新建一個）下，新建wxcharts.js

僅供參考

粘貼?https://github.com/xiaolin3303/wx-charts/blob/master/dist/wxcharts.js? 復制里面的js

?

?

?視圖層代碼

<canvas canvas-id="columnCanvas" disable-scroll="true" class="canvas"></canvas>

wxss文件

.canvas {
? width: 750rpx;
? height: 500rpx;
}

js文件：

先引入柱狀圖核心類

var wxCharts = require("../../utils/wxcharts.js");//相對路徑

2.在小程序onshow監聽頁面函數中加載柱狀圖展示

new wxCharts({
? ? ? canvasId: 'columnCanvas',
? ? ? type: 'column',
? ? ? categories: ['06:00:00', '07:00:00', '08:00:00', '09:00:00', '10:00:00', '11:00:00'],
? ? ? series: [{
? ? ? ? name: '跑步量',
? ? ? ? data: [1200, 3000, 4500, 3700, 400, 8044]
? ? ? }],
? ? ? yAxis: {
? ? ? ? format: function (val) {
? ? ? ? ? return val + '步';
? ? ? ? },
? ? ? ? /*max:400,
? ? ? ? min:0*/
? ? ? },
? ? ? width: 320,
? ? ? height: 200
? ? });

若像取消柱狀圖每條頂部的數字顯示，在wxcharts.js中修改，將這行注釋掉即可

1.2 掌握折線圖展示

wxml頁面：

<canvas style="width: 400px; height: 500px;" canvas-id="yueEle" binderror="canvasIdErrorCallback"></canvas>

js文件：

var wxCharts = require("../../utils/wxcharts.js"); var yuelineChart=null;

在小程序onshow監聽頁面函數中加載折線圖展示

var windowWidth = 320;try {var res = wx.getSystemInfoSync();windowWidth = res.windowWidth;} catch (e) {console.error('getSystemInfoSync failed!');}yuelineChart = new wxCharts({ //當月用電折線圖配置canvasId: 'yueEle',type: 'line',categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'], //categories X軸animation: true,series: [{name: 'A',data: [1, 6, 9, 1, 0, 2, 9, 2, 8, 6, 0, 9, 8, 0, 3, 7, 3, 9, 3, 8, 9, 5, 4, 1, 5, 8, 2, 4, 9, 8, 7],format: function (val, name) {return val + '';}}, {name: 'B',data: [0, 6, 2, 2, 7, 6, 2, 5, 8, 1, 8, 4, 0, 9, 7, 2, 5, 2, 8, 2, 5, 2, 9, 4, 4, 9, 8, 5, 5, 5, 6],format: function (val, name) {return val + '';}}, ],xAxis: {disableGrid: true},yAxis: {title: '數值',format: function (val) {return val;},/*max: 20,*/min: 0},width: windowWidth,height: 200,dataLabel: false,dataPointShape: true,extra: {lineStyle: 'curve'}});

效果圖：

數據的變動幅度過大會顯得不美觀，就像上圖。那么我們可以修改y軸的min和max值。 將test.js中y軸的max改為20，min改為-5后，圖表更加美觀。

總結

以上是生活随笔為你收集整理的微信小程序 柱状图的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。