微信小程序圖表插件（wx-charts）基於canvas繪製，體積小巧，支持圖表類型餅圖、線圖、柱狀圖 、區域圖等圖表圖形繪製，目前wx-charts是微信小程序圖表插件中比較強大好使的一個javascript
支持圖標類型
- 餅圖 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. 命令行css
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 數據列表
數據列表每項結構定義java
dataItem Object dataItem.data Array required (餅圖、圓環圖爲Number) 數據 dataItem.color String 例如#7cb5ec 不傳入則使用系統默認配色方案 dataItem.name String 數據名稱 dateItem.format Function 自定義顯示數據內容
詳見demo（具體demo git地址）
1.piegit
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. ringgithub
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. linenpm
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. columncanvas
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 } } });