這篇文章主要講解了“wx-charts中怎么使用微信小程序圖表插件”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“wx-charts中怎么使用微信小程序圖表插件”吧！
微信小程序圖表插件（wx-charts）基于canvas繪制，體積小巧，支持圖表類型餅圖、線圖、柱狀圖 、區(qū)域圖等圖表圖形繪制，目前wx-charts是微信小程序圖表插件中比較強(qiáng)大好使的一個(gè)
支持圖標(biāo)類型
餅圖 pie
圓環(huán)圖 ring
線圖 line
柱狀圖 column
區(qū)域圖 area
雷達(dá)圖 radar
如何使用？
直接引用編譯好的文件 dist/charts.js（js下載地址）
.wxml中定義
canvas-id與new wxCharts({canvasId:”})中canvasId一致
2. 命令行
git clone github.com/xiaolin3303/wx-charts.git npm install rollup -g npm install rollup -c 或者 rollup --config rollup.config.prod.js
參數(shù)說(shuō)明
opts Object opts.canvasId String required 微信小程序canvas-id opts.width Number required canvas寬度，單位為px opts.height Number required canvas高度，單位為px opts.title Object (only for ring chart) opts.title.name String 標(biāo)題內(nèi)容 opts.title.fontSize Number 標(biāo)題字體大?。蛇x，單位為px） opts.title.color String 標(biāo)題顏色（可選） opts.subtitle Object (only for ring chart) opts.subtitle.name String 副標(biāo)題內(nèi)容 opts.subtitle.fontSize Number 副標(biāo)題字體大?。蛇x，單位為px） opts.subtitle.color String 副標(biāo)題顏色（可選） opts.animation Boolean default true 是否動(dòng)畫展示 opts.legend Boolen default true 是否顯示圖表下方各類別的標(biāo)識(shí) opts.type String required 圖表類型，可選值為pie, line, column, area…… opts.categories Array required (餅圖、圓環(huán)圖不需要) 數(shù)據(jù)類別分類 opts.dataLabel Boolean default true 是否在圖表中顯示數(shù)據(jù)內(nèi)容值 opts.dataPointShape Boolean default true 是否在圖表中顯示數(shù)據(jù)點(diǎn)圖形標(biāo)識(shí) opts.xAxis Object X軸配置 opts.xAxis.disableGrid Boolean default false 不繪制X軸網(wǎng)格 opts.yAxis Object Y軸配置 opts.yAxis.format Function 自定義Y軸文案顯示 opts.yAxis.min Number Y軸起始值 opts.yAxis.max Number Y軸終止值 opts.yAxis.title String Y軸title opts.yAxis.disabled Boolean default false 不繪制Y軸 opts.series Array required 數(shù)據(jù)列表
數(shù)據(jù)列表每項(xiàng)結(jié)構(gòu)定義
dataItem Object dataItem.data Array required (餅圖、圓環(huán)圖為Number) 數(shù)據(jù) dataItem.color String 例如#7cb5ec 不傳入則使用系統(tǒng)默認(rèn)配色方案 dataItem.name String 數(shù)據(jù)名稱 dateItem.format Function 自定義顯示數(shù)據(jù)內(nèi)容
詳見(jiàn)demo（具體demo git地址）
1.pie
重慶分公司
重慶分公司
new wxCharts({
animation: true, //是否有動(dòng)畫
canvasId: 'pieCanvas',
type: 'pie',
series: [{
name: '成交量1',
data: 15,
}, {
name: '成交量2',
data: 35,
}, {
name: '成交量3',
data: 78,
}],
width: windowWidth,
height: 300,
dataLabel: true,
});
}
2. ring
new wxCharts({
animation: true,
canvasId: 'ringCanvas',
type: 'ring',
extra: {
ringWidth: 25,
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: windowWidth,
height: 200,
dataLabel: false,
legend: false,
padding: 0
});
3. line
new wxCharts({
canvasId: 'lineCanvas',
type: 'line',
categories: simulationData.categories,
animation: true,
background: '#f5f5f5',
series: [{
name: '成交量1',
data: simulationData.data,
format: function (val, name) {
return val.toFixed(2) + '萬(wàn)';
}
}, {
name: '成交量2',
data: [2, 0, 0, 3, null, 4, 0, 0, 2, 0],
format: function (val, name) {
return val.toFixed(2) + '萬(wàn)';
}
}],
xAxis: {
disableGrid: true
},
yAxis: {
title: '成交金額 (萬(wàn)元)',
format: function (val) {
return val.toFixed(2);
},
min: 0
},
width: windowWidth,
height: 200,
dataLabel: false,
dataPointShape: true,
extra: {
lineStyle: 'curve'
}
});
4. column
new wxCharts({
canvasId: 'columnCanvas',
type: 'column',
animation: true,
categories: chartData.main.categories,
series: [{
name: '成交量',
data: chartData.main.data,
format: function (val, name) {
return val.toFixed(2) + '萬(wàn)';
}
}],
yAxis: {
format: function (val) {
return val + '萬(wàn)';
},
title: 'hello',
min: 0
},
xAxis: {
disableGrid: false,
type: 'calibration'
},
extra: {
column: {
width: 15
}
},
width: windowWidth,
height: 200,
});
5. area
new wxCharts({
canvasId: 'areaCanvas',
type: 'area',
categories: ['1', '2', '3', '4', '5', '6'],
animation: true,
series: [{
name: '成交量1',
data: [32, 45, 0, 56, 33, 34],
format: function (val) {
return val.toFixed(2) + '萬(wàn)';
}
}, {
name: '成交量2',
data: [15, 20, 45, 37, 4, 80],
format: function (val) {
return val.toFixed(2) + '萬(wàn)';
},
}],
yAxis: {
title: '成交金額 (萬(wàn)元)',
format: function (val) {
return val.toFixed(2);
},
min: 0,
fontColor: '#8085e9',
gridColor: '#8085e9',
titleFontColor: '#f7a35c'
},
xAxis: {
fontColor: '#7cb5ec',
gridColor: '#7cb5ec'
},
extra: {
legendTextColor: '#cb2431'
},
width: windowWidth,
height: 200
});
6.radar
new wxCharts({
canvasId: 'radarCanvas',
type: 'radar',
categories: ['1', '2', '3', '4', '5', '6'],
series: [{
name: '成交量1',
data: [90, 110, 125, 95, 87, 122]
}],
width: windowWidth,
height: 200,
extra: {
radar: {
max: 150
}
}
});
感謝各位的閱讀，以上就是“wx-charts中怎么使用微信小程序圖表插件”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)wx-charts中怎么使用微信小程序圖表插件這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！
