閱讀數：9460

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

支持圖標類型

• 餅圖 pie
• 圓環圖 ring
• 線圖 line
• 柱狀圖 column
• 區域圖 area
• 雷達圖 radar

如何使用？

直接引用編譯好的文件 dist/charts.js（js下載地址）?
.wxml中定義

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

• 1

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

• 1
• 2
• 3
• 4

參數說明

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 標題內容 opts.title.fontSize Number 標題字體大小（可選，單位為px） opts.title.color String 標題顏色（可選） opts.subtitle Object (only for ring chart) opts.subtitle.name String 副標題內容 opts.subtitle.fontSize Number 副標題字體大小（可選，單位為px） opts.subtitle.color String 副標題顏色（可選） opts.animation Boolean default true 是否動畫展示 opts.legend Boolen default true 是否顯示圖表下方各類別的標識 opts.type String required 圖表類型，可選值為pie, line, column, area…… opts.categories Array required (餅圖、圓環圖不需要) 數據類別分類 opts.dataLabel Boolean default true 是否在圖表中顯示數據內容值 opts.dataPointShape Boolean default true 是否在圖表中顯示數據點圖形標識 opts.xAxis Object X軸配置 opts.xAxis.disableGrid Boolean default false 不繪制X軸網格 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 數據列表

?

數據列表每項結構定義

dataItem Object dataItem.data Array required (餅圖、圓環圖為Number) 數據 dataItem.color String 例如#7cb5ec 不傳入則使用系統默認配色方案 dataItem.name String 數據名稱 dateItem.format Function 自定義顯示數據內容

詳見demo（具體demo git地址）

1.pie

new wxCharts({animation: true, //是否有動畫 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 } } });

?

本人是自己查閱資料自己整理，希望對自己和有問題的你們都有幫助

版權聲明：本文為博主原創文章，未經博主允許不得轉載。 https://blog.csdn.net/m0_37805167/article/details/75160063

轉載于:https://www.cnblogs.com/xiaobai-y/p/9089157.html

總結

以上是生活随笔為你收集整理的wx-charts 微信小程序图表插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。