微信小程序之wx-charts的使用
我看了网上好多写的不清楚，今天自己还琢磨了一下，结果如下：
下载地址
https://github.com/xiaolin3303/wx-charts
解压后，把dist里面的wxcharts.js或者wxcharts-min.js放在小程序的文件夹里，在当前页面引用文件。
**
图表类型
**
饼图 pie
圆环图 ring
线图 line
柱状图 column
区域图 area
雷达图 radar
**
今天就说饼状图：
官网的例子是这样的：
var wxCharts = require('../../../utils/wxcharts.js');
var app = getApp();
var pieChart = null;
Page({
data: {
},
touchHandler: function (e) {
console.log(pieChart.getCurrentDataIndex(e));
},
onLoad: function (e) {
var windowWidth = 320;
try {
var res = wx.getSystemInfoSync();
windowWidth = res.windowWidth;
} catch (e) {
console.error('getSystemInfoSync failed!');
}
pieChart = new wxCharts({
animation: true,
canvasId: 'pieCanvas',
type: 'pie',
series: [{
name: '成交量1',
data: 1000,
}, {
name: '成交量2',
data: 350,
}, {
name: '成交量3',
data: 78,
}, {
name: '成交量4',
data: 63,
}, {
name: '成交量2',
data: 35,
}, {
name: '成交量3',
data: 78,
}, {
name: '成交量4',
data: 63,
}, {
name: '成交量2',
data: 35,
}, {
name: '成交量3',
data: 78,
}, {
name: '成交量3',
data: 78,
}],
width: windowWidth,
height: 300,
dataLabel: true,
});
}
});
我们做项目的时候需要动态加载数据，所以可以把series弄成对应的数组：
var series = [];
for (let i = 0; i < byList.length; i++) {
var sale = {};
sale.data = byList[i].OrderCount
sale.name = byList[i].MaterialName
series[i]=sale
}
var windowWidth = 320;
try {
var res = wx.getSystemInfoSync();
windowWidth = res.windowWidth;
} catch (e) {
console.error('getSystemInfoSync failed!');
}
var pieChart = {
animation: true,
legend: false,
canvasId: 'pieCanvas',
type: 'pie',
series: series,
width: windowWidth,
height: 300,
dataLabel: true,
}
new wxCharts(pieChart)
byList是访问数据库返回的数据的数组，好了，以上就是饼图动态加载数据的方法。