微信小程序圖表插件wx-charts用法實(shí)例詳解

2024-07-22 01:18:22

字體：大中小

來(lái)源：轉(zhuǎn)載

供稿：網(wǎng)友

本文實(shí)例講述了微信小程序圖表插件wx-charts用法。分享給大家供大家參考，具體如下：

微信小程序圖表插件（wx-charts）基于canvas繪制，體積小巧，支持圖表類(lèi)型餅圖、線圖、柱狀圖、區(qū)域圖等圖表圖形繪制，目前wx-charts是微信小程序圖表插件中比較強(qiáng)大好使的一個(gè)

支持圖標(biāo)類(lèi)型

餅圖 pie 圓環(huán)圖 ring 線圖 line 柱狀圖 column 區(qū)域圖 area 雷達(dá)圖 radar

如何使用？

1. 直接引用編譯好的文件 dist/charts.js（js下載地址）

.wxml中定義

<canvas canvas-id="lineCanvas" disable-scroll="true" class="canvas"></canvas>

canvas-id與new wxCharts({canvasId:”})中canvasId一致

2. 命令行

git clone github.com/xiaolin3303/wx-charts.gitnpm install rollup -gnpm installrollup -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)題字體大小（可選，單位為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)畫(huà)展示
opts.legend	Boolen default true	是否顯示圖表下方各類(lèi)別的標(biāo)識(shí)
opts.type	String required	圖表類(lèi)型，可選值為pie, line, column, area……
opts.categories	Array required	(餅圖、圓環(huán)圖不需要) 數(shù)據(jù)類(lèi)別分類(lèi)
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ù)列表