在微信小程序圖表眾多插件中，wx-charts是功能比較強大的一個組件。我們今天來看一個基于wxcharts.js來實現訂單統計報表的開發實例。
導入wxcharts.js：
將wxcharts.js 存放在utils目錄
column.wxml
<view class=”container”>
<!–標題–>
<view class=”title”>
{{chartTitle}}
</view>
<!–繪制canvas–>
<canvas canvas-id=”columnCanvas” class=”canvas” bindtouchstart=”touchHandler”></canvas>
</view>
coumn.js
引入wxcharts.js
var wxCharts = require(‘../../../utils/wxcharts.js’);
初始化數據
var app = getApp();
var columnChart = null;
var chartData = {
main: {
title: ‘訂單統計’,
data: [23,28,35,54,95],
categories: [‘2013′,’2014′,’2015′,’2016′,’2017’]
}
};
加載報表數據
Page({
data: {
chartTitle: ‘總訂單’,
isMainChartDisplay: true
},
onReady: function (e) {
var windowWidth = 320;
try {
var res = wx.getSystemInfoSync();
windowWidth = res.windowWidth;
} catch (e) {
console.error(‘getSystemInfoSync failed!’);
}
columnChart = new wxCharts({
canvasId: ‘columnCanvas’,
type: ‘column’,
animation: true,
categories: chartData.main.categories,
series: [{
name: ‘訂單量’,
color:’#188df0′,
data: chartData.main.data,
format: function (val,name) {
return val.toFixed(2) + ‘萬’;
}
}],
yAxis: {
format: function (val) {
return val + ‘萬’;
},
min: 0
},
xAxis: {
disableGrid: false,
type: ‘calibration’
},
extra: {
column: {
width: 15,
},
legendTextColor: ‘#000000’
},
width: windowWidth,
height: 200,
});
}
});
wx-charts微信小程序圖表插件訂單統計報表效果圖：
