今天小編給大家分享一下微信小程序中怎么使用圖表插件wx-charts的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。
成都創(chuàng)新互聯(lián)網(wǎng)站建設(shè)由有經(jīng)驗(yàn)的網(wǎng)站設(shè)計(jì)師、開發(fā)人員和項(xiàng)目經(jīng)理組成的專業(yè)建站團(tuán)隊(duì)，負(fù)責(zé)網(wǎng)站視覺設(shè)計(jì)、用戶體驗(yàn)優(yōu)化、交互設(shè)計(jì)和前端開發(fā)等方面的工作，以確保網(wǎng)站外觀精美、成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)易于使用并且具有良好的響應(yīng)性。
微信小程序圖表工具，charts for WeChat small app
基于canvas繪制，體積小巧
支持圖表類型
餅圖 pie
圓環(huán)圖 ring
線圖 line
柱狀圖 column
區(qū)域圖 area
代碼分析 Here
參數(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)題字體大小（可選，單位為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, ring
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)容
Example
pie chart
重慶分公司
重慶分公司
var wxCharts = require('wxcharts.js');
new wxCharts({
canvasId: 'pieCanvas',
type: 'pie',
series: [{
name: 'cat1',
data: 50,
}, {
name: 'cat2',
data: 30,
}, {
name: 'cat3',
data: 1,
}, {
name: 'cat4',
data: 1,
}, {
name: 'cat5',
data: 46,
}],
width: 360,
height: 300,
dataLabel: true
});
ring chart
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
});
line chart
new wxCharts({
canvasId: 'lineCanvas',
type: 'line',
categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
series: [{
name: '成交量1',
data: [0.15, 0.2, 0.45, 0.37, 0.4, 0.8],
format: function (val) {
return val.toFixed(2) + '萬(wàn)';
}
}, {
name: '成交量2',
data: [0.30, 0.37, 0.65, 0.78, 0.69, 0.94],
format: function (val) {
return val.toFixed(2) + '萬(wàn)';
}
}],
yAxis: {
title: '成交金額 (萬(wàn)元)',
format: function (val) {
return val.toFixed(2);
},
min: 0
},
width: 320,
height: 200
});
columnChart
new wxCharts({
canvasId: 'columnCanvas',
type: 'column',
categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
series: [{
name: '成交量1',
data: [15, 20, 45, 37, 4, 80]
}, {
name: '成交量2',
data: [70, 40, 65, 100, 34, 18]
}],
yAxis: {
format: function (val) {
return val + '萬(wàn)';
}
},
width: 320,
height: 200
});
areaChart
new wxCharts({
canvasId: 'areaCanvas',
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) + '萬(wàn)';
}
}, {
name: '成交量2',
data: [15, 20, 45, 37, 4, 80],
format: function (val) {
return val.toFixed(2) + '萬(wàn)';
}
}],
yAxis: {
format: function (val) {
return val + '萬(wàn)';
}
},
width: 320,
height: 200
});
以上就是“微信小程序中怎么使用圖表插件wx-charts”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
