今天就跟大家聊聊有關(guān)怎么在微信小程序中使用wx-charts圖表插件，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。
成都創(chuàng)新互聯(lián)公司咨詢電話：18982081108，為您提供成都網(wǎng)站建設(shè)網(wǎng)頁設(shè)計(jì)及定制高端網(wǎng)站建設(shè)服務(wù)，成都創(chuàng)新互聯(lián)公司網(wǎng)頁制作領(lǐng)域10年，包括宣傳片制作等多個(gè)行業(yè)擁有豐富的網(wǎng)站營銷經(jīng)驗(yàn)，選擇成都創(chuàng)新互聯(lián)公司，為網(wǎng)站錦上添花！
支持圖標(biāo)類型
餅圖 pie
圓環(huán)圖 ring
線圖 line
柱狀圖 column
區(qū)域圖 area
雷達(dá)圖 radar
如何使用？
1. 直接引用編譯好的文件 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ù)說明
| 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)容 |
詳見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) + '萬';
}
}, {
name: '成交量2',
data: [2, 0, 0, 3, null, 4, 0, 0, 2, 0],
format: function (val, name) {
return val.toFixed(2) + '萬';
}
}],
xAxis: {
disableGrid: true
},
yAxis: {
title: '成交金額 (萬元)',
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) + '萬';
}
}],
yAxis: {
format: function (val) {
return val + '萬';
},
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) + '萬';
}
}, {
name: '成交量2',
data: [15, 20, 45, 37, 4, 80],
format: function (val) {
return val.toFixed(2) + '萬';
},
}],
yAxis: {
title: '成交金額 (萬元)',
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
}
}
});
看完上述內(nèi)容，你們對(duì)怎么在微信小程序中使用wx-charts圖表插件有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。
