微信小程序图表插件 wxcharts 的使用
使用前需要先导入
var wxCharts = require('../../common/wxcharts');
1.扇形图
在js文件中调用
new wxCharts({
canvasId: 'pieCanvas',
type: 'pie',
series: [{
name: 'p1',
data: 50,
}, {
name: 'p2',
data: 30,
}, {
name: 'p3',
data: 1,
}, {
name: 'p4',
data: 1,
}, {
name: 'p5',
data: 46,
}],
width: 360,
height: 300,
dataLabel: true
});
new wxCharts({
canvasId: 'ringCanvas',
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
});
效果图
2.圆环图
js文件
new wxCharts({
canvasId: 'ringCanvas',
type: 'ring',
series: [{
name: 'p1',
data: 15,
}, {
name: 'p2',
data: 35,
}, {
name: 'p3',
data: 78,
}, {
name: 'p4',
data: 63,
}],
width: 320,
height: 200,
dataLabel: false
});
效果图
3.折线图
new wxCharts({
canvasId: 'lineCanvas',
type: 'line',
categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
series: [{
name: 'p1',
data: [0.15, 0.2, 0.45, 0.37, 0.4, 0.8],
format: function (val) {
return val.toFixed(2) + '万';
}
}, {
name: 'p2',
data: [0.30, 0.37, 0.65, 0.78, 0.69, 0.94],
format: function (val) {
return val.toFixed(2) + '万';
}
}],
yAxis: {
title: '成交金额 (万元)',
format: function (val) {
return val.toFixed(2);
},
min: 0
},
width: 320,
height: 200
});
效果图
4.柱形图
new wxCharts({
canvasId: 'columnCanvas',
type: 'column',
categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
series: [{
name: 'p1',
data: [15, 20, 45, 37, 4, 80]
}, {
name: 'p2',
data: [70, 40, 65, 100, 34, 18]
}],
yAxis: {
format: function (val) {
return val + '万';
}
},
width: 320,
height: 200
});
效果图
5.区域图
new wxCharts({
canvasId: 'areaCanvas',
type: 'area',
categories: ['2016-08', '2016-09', '2016-10', '2016-11', '2016-12', '2017'],
series: [{
name: 'p1',
data: [70, 40, 65, 100, 34, 18],
format: function (val) {
return val.toFixed(2) + '万';
}
}, {
name: 'p2',
data: [15, 20, 45, 37, 4, 80],
format: function (val) {
return val.toFixed(2) + '万';
}
}],
yAxis: {
format: function (val) {
return val + '万';
}
},
width: 320,
height: 200
});
效果图
6.雷达图
new wxCharts({
canvasId: 'radarCanvas',
type: 'radar',
categories: ['1', '2', '3', '4', '5', '6'],
series: [{
name: 'p1',
data: [90, 110, 125, 95, 87, 122]
}],
width: 320,
height: 200,
extra: {
radar: {
max: 150
}
}
});
效果图
今天的文章微信小程序统计图表插件wxcharts的使用汇总分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/30928.html