github地址：https://github.com/xiaolin3303/wx-charts
说明文档文档：https://github.com/xiaolin3303/wx-charts/issues/56
加载文件
let wxcharts = require('../../utils/wxcharts.js')
文件位置
image.png
wxcharts.js和wxcharts-min.js是一样的，二选一就可以。wxcharts.js是不压缩过的，wxcharts-min.js是压缩了的。
我是文件放在了utils文件夹下面:
image.png
页面代码：
.canvas {
width: 640px;
height:200px;
}
数据初始化
data: {
chartsOpts: {
animation: true,
canvasId: 'Radar',
type: 'radar',
categories: ['解毒系统', '肠胃系统', '荷尔蒙分泌系统', '免疫系统'],
series: [{
name: '健康状况',
data: [98, 90, 70, 80],
color: '#00cc66'
}],
width: '320 ',
height: '200',
extra: {
radar: {
gridColor: '#00cc66',
labelColor: '#000',
max: 100 //雷达数值的最大值
}
}
}
},
使用代码：
onLoad: function(options) {
//创建雷达图 new wxcharts(this.data.chartsOpts);
let ceshi = new wxcharts(this.data.chartsOpts);
}
样例：
image.png
其他示例：
pie（饼图）
new Charts({
canvasId: 'canvas1',
type: 'pie',
series: [{ name: '一班', data: 50 }, { name: '二班', data: 30 }, { name: '三班', data: 20 }, { name: '四班', data: 18 }, { name: '五班', data: 8 }],
width: 640,
height: 400,
dataLabel: true,
});
image.png
线图（circle）:
new Charts({
canvasId: 'canvas2',
dataPointShape: "circle",
type: 'line',
extra: {
lineStyle: 'curve' //线条的形状（弧形）
},
categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
series: [{
name: '成交量1',
data: [0.15, null, 0.45, 0.37, 0.4, 0.8],//设置某一个值为null会出现断层
format: function (val) {
return val.toFixed(2) + '万';
}
}, {
name: '成交量2',
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);
},
fontColor: "red",
titleFontColor: "red",
min: 0,
gridColor:"red"
},
width: 840,
height: 600,
dataLabel: true
});
image
柱状图（column）:
new Charts({
canvasId: 'canvas3',
dataPointShape: false,
type: 'column',
categories: ['2016-08', '2016-09', '2016-10', '2016-11', '2016-12', '2017'],
series: [{
name: '成交量1',
data: [15, 20, 45, 37, 4, 80],
color:"rgba(0,0,0,0.3)"//支持rgba，但不支持渐变色
}, {
name: '成交量2',
data: [70, 40, 65, 100, 34, 18]
}, {
name: '成交量3',
data: [100, 50, 75, 200, 15, 13]
}],
yAxis: {
format: function (val) {
return val + '万';
}
},
xAxis: {
disableGrid: true,
},
width: 640,
height: 400,
dataLabel: true,
extra: {
column: {
width: 40 //柱的宽度
}
}
});
image
区域图（area）
new Charts({
canvasId: 'canvas4',
type: 'area',
categories: ['2016-08', '2016-09', '2016-10', '2016-11', '2016-12', '2017'],
series: [{
name: '成交量1',
data: [70, 40, 65, 100, 34, 18],
format: function (val) {
return val.toFixed(2) + '万';
}
}, {
name: '成交量2',
data: [15, 20, 45, 37, 4, 80],
format: function (val) {
return val.toFixed(2) + '万';
}
}],
yAxis: {
format: function (val) {
return val + '万';
}
},
width: 640,
height: 400
});
image
环形图（ring）
new Charts({
animation: true,
canvasId: 'canvas5',
type: 'ring',
extra: {
ringWidth: 10,//圆环的宽度
pie: {
offsetAngle: -45//圆环的角度
}
},
title: {
name: '70%',
color: '#7cb5ec',
fontSize: 25
},
subtitle: {
name: '收益率',
color: '#666666',
fontSize: 15
},
series: [{
name: '成交量1',
data: 15,
stroke: false
}, {
name: '成交量2',
data: 35,
stroke: false
}, {
name: '成交量3',
data: 78,
stroke: false
}, {
name: '成交量4',
data: 63,
stroke: false
}],
disablePieStroke: true,
width: 640,
height: 200,
dataLabel: true,
legend: false,
padding: 0
});
雷达图（radar）
new Charts({
animation: true,
canvasId: 'canvas6',
type: 'radar',
categories: ['1', '2', '3', '4', '5', '6'],
series: [{
name: '成交量1',
data: [90, 110, 125, 95, 87, 122]
}, {
name: '成交量2',
data: [190, 210, 105, 35, 27, 102]
}],
width: 640,
height: 200,
extra: {
radar: {
max: 200//雷达数值的最大值
}
}
});
image