微信小程序之wx-charts的使用_wxcharts

我看了网上好多写的不清楚，今天自己还琢磨了一下，结果如下：

下载地址
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是访问数据库返回的数据的数组，好了，以上就是饼图动态加载数据的方法。