基于wxcharts.js实现订单统计报表的开发实例

在微信小程序图表众多插件中，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微信小程序图表插件订单统计报表效果图：