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(因為圖標(biāo)默認(rèn)展示是高清圖，而且寬高不隨著頁面尺寸變化，所以需要自定義寬度)
var winWidth = wx.getSystemInfoSync().windowWidth;//獲取窗口的寬度
? ? this.setData({
? ? ? width:winWidth
? ? })
動態(tài)設(shè)置數(shù)據(jù)
參數(shù)說明
//獲取條形圖數(shù)據(jù)
? 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: '狀態(tài)分布（人）'
? ? ? }],
? ? ? 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,
? ? });
? },
