wx-charts 微信小程序圖表插件的具體使用
更新時間：2019年08月18日 10:45:34 作者：我叫陳小皮。
這篇文章主要介紹了wx-charts 微信小程序圖表插件的具體使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
微信小程序圖表插件（wx-charts）基于canvas繪制，體積小巧，支持圖表類型餅圖、線圖、柱狀圖 、區(qū)域圖等圖表圖形繪制，目前wx-charts是微信小程序圖表插件中比較強大好使的一個
支持圖標類型
- 餅圖 pie
- 圓環(huán)圖 ring
- 線圖 line
- 柱狀圖 column
- 區(qū)域圖 area
- 雷達圖 radar
如何使用？
直接引用編譯好的文件 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.git npm install rollup -g npm install rollup -c 或者 rollup --config rollup.config.prod.js
參數說明
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 標題字體大?。蛇x，單位為px） opts.title.color String 標題顏色（可選） opts.subtitle Object (only for ring chart) opts.subtitle.name String 副標題內容 opts.subtitle.fontSize Number 副標題字體大?。蛇x，單位為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 (餅圖、圓環(huán)圖不需要) 數據類別分類 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 (餅圖、圓環(huán)圖為Number) 數據 dataItem.color String 例如#7cb5ec 不傳入則使用系統(tǒng)默認配色方案 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
}
}
});
本人是自己查閱資料自己整理，希望對自己和有問題的你們都有幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了JSONP原理及應用實例詳解，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家介紹了使用cypress編寫第一個測試用例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
這篇文章主要介紹了JavaScript獲取服務器端時間的方法,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-11-11
本篇文章主要是對js跳轉頁面方法進行了詳細的總結介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
用一段js程序來實現動畫功能...2007-03-03
這篇文章主要介紹了javascript動態(tài)生成樹形菜單的方法,涉及JavaScript針對頁面元素與屬性的動態(tài)操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11
這篇文章主要介紹了Sticky組件的改進實現的相關資料,需要的朋友可以參考下2016-03-03
Mapbox是一個可以免費創(chuàng)建并定制個性化地圖的網站。這篇文章主要介紹了mapboxgl區(qū)劃標簽避讓不遮蓋實現方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07
這篇文章主要介紹了JavaScript獲取對象在頁面中位置坐標的方法,涉及JavaScript操作頁面元素屬性的相關技巧,需要的朋友可以參考下2016-02-02
這篇文章主要為大家詳細介紹了JS實現元素上下左右移動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10