1.下载wxcharts.js
2.小程序js页面引入，例如：var wxCharts = require('../../utils/wxcharts.js'); （路径要写对）
3.HTML
<canvas canvas-id="columnCanvas" disable-scroll="true" class="pieCanvas" ></canvas>
4.CSS
.pieCanvas{
width:690rpx;
height:452rpx;
margin: 0 auto;
}
5.JS(因为图标默认展示是高清图，而且宽高不随着页面尺寸变化，所以需要自定义宽度)
var winWidth = wx.getSystemInfoSync().windowWidth;//获取窗口的宽度
this.setData({
width:winWidth
})
动态设置数据
参数说明
//获取条形图数据
getCusList: function (){
var that = this;
var categories = [];
var valList = [];
util.getRequestPromise(config.service.getCusStaData,'').then(data => {
let result = data ? data : [];
if (result.length > 0){
result.forEach(function (item, i, arr) {
categories.push(item.stateName);
valList.push(item.count);
});
that.setData({
categories: categories,
valList: valList
});
that.echars(categories, valList);
}
});
},
echars(categories, valList){
new wxCharts({
canvasId: 'columnCanvas',
type: 'column',
animation: true,
categories: categories,
series: [{
data: valList,
color: '#2A76FF',
name: '状态分布（人）'
}],
yAxis: {
disabled: true,
min: 0,
max:10,
},
animation: true,
xAxis: {
type: 'calibration',
disableGrid: false,
},
extra: {
column: {
width: 15
}
},
width: this.data.width-30,
height: 190,
legend: true,
});
},
