wx-charts：基于canvas绘制：饼图，线图，柱状图
最近图表工具，一个比一个6，这个目前最6666666
微信小程序图表工具，charts for WeChat small app基于canvas绘制，体积小巧持续优化更新中，请保持关注~支持图表类型
[*]饼图 pie
[*]圆环图 ring
[*]线图 line
[*]柱状图 column
[*]区域图 area
代码分析 Here如何使用1、直接引用编译好的文件 dist/charts.js2、自行编译git clone github.com/xiaolin3303/wx-charts.git
npm install rollup -g
npm install
rollup -c 或者 rollup --config rollup.config.prod.js
参数说明opts Objectopts.canvasId String required 微信小程序canvas-idopts.width Number required canvas宽度，单位为pxopts.height Number required canvas高度，单位为pxopts.animation Boolean default true 是否动画展示opts.type String required 图表类型，可选值为pie, line, column, area, ringopts.categories Array required (饼图不需要) 数据类别分类opts.dataLabel Boolean default true 是否在图表中显示数据内容值opts.yAxis Object Y轴配置opts.yAxis.format Function 自定义Y轴文案显示opts.yAxis.min Number Y轴起始值opts.yAxis.title String Y轴titleopts.series Array required 数据列表数据列表每项结构定义dataItem ObjectdataItem.data Array required (饼图为Number) 数据dataItem.color String 例如#7cb5ec 不传入则使用系统默认配色方案dataItem.name String 数据名称dateItem.format Function 自定义显示数据内容
Example pie chartvar Charts = require('charts.js');
new Charts({
canvasId: 'pieCanvas',
type: 'pie',
series: [{
name: '成交量1',
data: 15,
}, {
name: '成交量2',
data: 35,
}, {
name: '成交量3',
data: 78,
}, {
name: '成交量4',
data: 63,
}],
width: 320,
height: 200,
dataLabel: false
});
ring chart
new Charts({
canvasId: 'pieCanvas',
type: 'ring',
series: [{
name: '成交量1',
data: 15,
}, {
name: '成交量2',
data: 35,
}, {
name: '成交量3',
data: 78,
}, {
name: '成交量4',
data: 63,
}],
width: 320,
height: 200,
dataLabel: false
});
line chartnew Charts({
canvasId: 'lineCanvas',
type: 'line',
categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
series: [{
name: '成交量1',
data: ,
format: function (val) {
return val.toFixed(2) + '万';
}
}, {
name: '成交量2',
data: ,
format: function (val) {
return val.toFixed(2) + '万';
}
}],
yAxis: {
title: '成交金额 (万元)',
format: function (val) {
return val.toFixed(2);
},
min: 0
},
width: 320,
height: 200
});
columnChartnew Charts({
canvasId: 'columnCanvas',
type: 'column',
categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
series: [{
name: '成交量1',
data:
}, {
name: '成交量2',
data:
}],
yAxis: {
format: function (val) {
return val + '万';
}
},
width: 320,
height: 200
});
areaChartnew Charts({
canvasId: 'areaCanvas',
type: 'area',
categories: ['2016-08', '2016-09', '2016-10', '2016-11', '2016-12', '2017'],
series: [{
name: '成交量1',
data: ,
format: function (val) {
return val.toFixed(2) + '万';
}
}, {
name: '成交量2',
data: ,
format: function (val) {
return val.toFixed(2) + '万';
}
}],
yAxis: {
format: function (val) {
return val + '万';
}
},
width: 320,
height: 200
});
回复即下载项目附件：**** Hidden Message *****
啥也不说了，感谢楼主分享哇！ 啥也不说了，感谢楼主分享哇！ 啥也不说了，感谢楼主分享哇！ 啥也不说了，感谢楼主分享哇！ 谢谢分享啊 啥也不说了，感谢楼主分享哇！ 啥也不说了，感谢楼主分享哇！ 啥也不说了，感谢楼主分享哇！
啥也不说了，感谢楼主分享哇！