demo：微信小程序wxchart柱状图

wxchart是轻便型适合小程序里面的图表插件

下载和文档教程：https://blog.csdn.net/Che_rish/article/details/78932945?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task

wxml:  /canvas-id名称和js使用的是同一个名称/

 <canvas canvas-id="columnCanvas" disable-scroll="true" class="canvas"></canvas>

 

wxss:

.canvas {
width: 100%;
margin: 0 auto;
height: 540rpx;
margin-top: 45rpx;
}

 

js：

var wxCharts = require(’…/…/utils/wxcharts.js’); //引入wxChart文件
var columnCanvas = null;
columnCanvas = new wxCharts({
canvasId: ‘columnCanvas’,
type: ‘column’,
animation: true,
// title: {
// name: ‘图表标题’,
// fontSize: 20
// },
dataLabel: true,
categories: [‘1’, ‘2’, ‘3’, ‘4’, ‘5’, ‘6’, ‘7’],
series: [{
name: ‘上周净水量’,
color: ‘#fff’, //柱子的颜色
data: [4, 5, 6.25, 1, 5, 3, 8],
format: function (val, name) {
return val + ‘L’;
// return val.toFixed(1) + ‘L’;
}
}],
dataItem: {
color: ‘#fff’ //数据颜色
},
yAxis: {
fontColor: ‘#fff’,
disabled: false, //是否绘制Y轴
format: function (val) { //返回数值
return val.toFixed(0);
},
min: 1, //最小值
max: 7, //最大值
disableGrid: true,
gridColor: ‘#fff’,
},
xAxis: {
fontColor: ‘#fff’, //数据颜色
// min: 0, //最小值
// max: 8, //最大值
disableGrid: false, //不绘制X轴网格(去掉X轴的刻度)
gridColor: ‘#fff’,
fontColor: ‘#fff’,
type: ‘acalibration’ //刻度
},
extra: {
column: {
width: 10
}
},
// dataPointShape: true, //是否在图标上显示数据点标志
width: 312, //图表展示内容宽度
height: 300, //图表展示内容高度
})