在微信小程序制作開發(fā)中，往往需要一些圖形繪制的需求，那么今天我們一起看一看wx-charts這款微信小程序圖表組件。

微信小程序圖表組件wx-charts是基于canvas繪制，支持圖表類型餅圖、線圖、柱狀圖、區(qū)域圖等圖表圖形繪制，而且體積小巧，是眾多微信小程序圖表組件中功能比較強(qiáng)大的一個。

效果圖

wx-charts支持圖表類型

餅圖 pie

圓環(huán)圖 ring

線圖 line

柱狀圖 column

區(qū)域圖 area

雷達(dá)圖 radar

wx-charts使用方法

1、直接引用編譯好的文件dist/wxcharts.js 或者 dist/wxcharts-min.js

2、自行編譯

git clone https://github.com/xiaolin3303/wx-charts.git

npm install rollup -g

npm install

rollup -c 或者 rollup –config rollup.config.prod.js

wx-charts參數(shù)說明

opts Object

opts.canvasId String required 微信小程序canvas-id

opts.width Number required canvas寬度，單位為px

opts.height Number required canvas高度，單位為px

opts.type String required 圖表類型，可選值為pie, line, column, area

opts.categories Array required (餅圖不需要) 數(shù)據(jù)類別分類

opts.dataLabel Boolean default true 是否在圖表中顯示數(shù)據(jù)內(nèi)容值

opts.yAxis Object Y軸配置

opts.yAxis.format Function 自定義Y軸文案顯示

opts.yAxis.min Number Y軸起始值

opts.yAxis.title String Y軸title

opts.series Array required 數(shù)據(jù)列表

數(shù)據(jù)列表每項(xiàng)結(jié)構(gòu)定義

dataItem Object

dataItem.data Array required (餅圖為Number) 數(shù)據(jù)

dataItem.color String 例如#7cb5ec 不傳入則使用系統(tǒng)默認(rèn)配色方案

dataItem.name String 數(shù)據(jù)名稱

dateItem.format Function 自定義顯示數(shù)據(jù)內(nèi)容