mpvue使用wxcharts.js顯示各種圖表

嘗試使用wx-charts來使用圖表顯示各種數據，主要留意<canvas></canvas>中的id寫法不是id="ringCanvas"，而是canvas-id="ringCanvas"。

參考博客：http://www.javashuo.com/article/p-fbakhose-km.html

wxcharts.js下載地址：https://github.com/xiaolin3303/wx-charts

 1  <canvas canvas-id="ringCanvas" style="text-align:center;height:300px;width:375px;"></canvas>
 2 
 3 <script>
 4 import wxCharts from '.../utils/wxcharts'
 5 ...
 6 methods:{
 7 charts() {
 8             new wxCharts({
 9                 animation: true,
10                 canvasId: 'ringCanvas',
11                 type: 'ring',
12                 extra: {
13                     ringWidth: 15,
14                     pie: {
15                         offsetAngle: -90
16                     },
17                 },
18                 subtitle: {
19                     fontSide: 16
20                 },
21                 series: [{
22                     name: '成交量1',
23                     data: 15,
24                     stroke:false
25                 }, {
26                     name: '成交量2',
27                     data: 35,
28                 }, {
29                     name: '成交量3',
30                     data: 78,
31                 }],
32                 width: 375,
33                 height: 200,
34                 dataLabel: false,
35             });
36         }
37 },
38 ansyc onShow(){
39     this.charts();}
40 </script>

效果：

 

參數說明

opts Object opts.canvasId String required 微信小程序canvas-id opts.width Number required canvas寬度，單位爲px opts.height Number required canvas高度，單位爲px opts.background String canvas背景顏色（若是頁面背景顏色不是白色請設置爲頁面的背景顏色，默認#ffffff） opts.enableScroll Boolean 是否開啓圖表可拖拽滾動 默認false 支持line, area圖表類型(需配合綁定scrollStart, scroll, scrollEnd方法) opts.title Object (only for ring chart) opts.title.name String 標題內容 opts.title.fontSize Number 標題字體大小（可選，單位爲px） opts.title.color String 標題顏色（可選） opts.title.offsetX Number 標題橫向位置偏移量，單位px，默認0 opts.subtitle Object (only for ring chart) opts.subtitle.name String 副標題內容 opts.subtitle.offsetX Number 副標題橫向位置偏移量，單位px，默認0 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, ring, radar opts.categories Array required (餅圖、圓環圖不須要) 數據類別分類 opts.dataLabel Boolean default true 是否在圖表中顯示數據內容值 opts.dataPointShape Boolean default true 是否在圖表中顯示數據點圖形標識 opts.disablePieStroke Boolean default false 不繪製餅圖（圓環圖）各區塊的白色分割線 opts.xAxis Object X軸配置 opts.xAxis.gridColor String 例如#7cb5ec default #cccccc X軸網格顏色 opts.xAxis.fontColor String 例如#7cb5ec default #666666 X軸數據點顏色 opts.xAxis.disableGrid Boolean default false 不繪製X軸網格 opts.xAxis.type String 可選值calibration(刻度) 默認爲包含樣式 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.gridColor String 例如#7cb5ec default #cccccc Y軸網格顏色 opts.yAxis.fontColor String 例如#7cb5ec default #666666 Y軸數據點顏色 opts.yAxis.titleFontColor String 例如#7cb5ec default #333333 Y軸title顏色 opts.yAxis.disabled Boolean default false 不繪製Y軸 opts.extra Object 其餘非通用配置項 opts.extra.ringWidth Number ringChart圓環寬度，單位爲px opts.extra.lineStyle String (僅對line, area圖表有效) 可選值：curve曲線，straight直線 (default) opts.extra.column Object 柱狀圖相關配置 opts.extra.column.width Number 柱狀圖每項的圖形寬度，單位爲px opts.extra.legendTextColor String 例如#7cb5ec default #cccccc legend文案顏色 opts.extra.radar Object 雷達圖相關配置 opts.extra.radar.max Number, 默認爲series data的最大值，數據區間最大值，用於調整數據顯示的比例 opts.extra.radar.labelColor String, 默認爲#666666, 各項標識文案的顏色 opts.extra.radar.gridColor String, 默認爲#cccccc, 雷達圖網格顏色 opts.extra.pie Object 餅圖、圓環圖相關配置 opts.extra.pie.offsetAngle Number, 默認爲0, 起始角度偏移度數，順時針方向，起點爲3點鐘位置（好比要設置起點爲12點鐘位置，即逆時針偏移90度，傳入-90便可） opts.series Array required 數據列表 數據列表每項結構定義 dataItem Object dataItem.data Array required (餅圖、圓環圖爲Number) 數據，若是傳入null圖表該處出現斷點 dataItem.color String 例如#7cb5ec 不傳入則使用系統默認配色方案 dataItem.name String 數據名稱 dateItem.format Function 自定義顯示數據內容