小程序模板網(wǎng)

微信小程序圖表插件(wx-charts):餅圖、線圖、柱狀圖、區(qū)域圖 ...

發(fā)布時間:2018-04-20 10:54 所屬欄目:小程序開發(fā)教程

 

wx-charts基于canvas繪制的微信小程序圖表插件

支持圖表類型

  • 餅圖 pie 
    *線圖 line 
    *柱狀圖 column 
    *區(qū)域圖 area

高清顯示

設置canvas的尺寸為2倍大小,然后縮小到50%,建議都進行這樣的設置,圖表本身繪制時是按照高清顯示配置的,不然整體效果會偏大

 

  1. /* 例如設計圖尺寸為320 x 300 */
  2. .canvas {
  3. width: 640px;
  4. height: 600px;
  5. transform: scale(0.5)
  6. }
 

wx-charts參數(shù)說明

 

 

  1. opts Object
  2.  
  3. opts.canvasId String required 微信小程序canvas-id
  4.  
  5. opts.width Number required canvas寬度,單位為px
  6.  
  7. opts.height Number required canvas高度,單位為px
  8.  
  9. opts.type String required 圖表類型,可選值為pie, line, column, area
  10.  
  11. opts.categories Array required (餅圖不需要) 數(shù)據(jù)類別分類
  12.  
  13. opts.dataLabel Boolean default true 是否在圖表中顯示數(shù)據(jù)內(nèi)容值
  14.  
  15. opts.yAxis Object Y軸配置
  16.  
  17. opts.yAxis.format Function 自定義Y軸文案顯示
  18.  
  19. opts.yAxis.min Number Y軸起始值
  20.  
  21. opts.yAxis.title String Y軸title
  22.  
  23. opts.series Array required 數(shù)據(jù)列表
 

數(shù)據(jù)列表每項結構定義

 

 

  1. dataItem Object
  2.  
  3. dataItem.data Array required (餅圖為Number) 數(shù)據(jù)
  4.  
  5. dataItem.color String 例如#7cb5ec 不傳入則使用系統(tǒng)默認配色方案
  6.  
  7. dataItem.name String 數(shù)據(jù)名稱
  8.  
  9. dateItem.format Function 自定義顯示數(shù)據(jù)內(nèi)容
 

wx-charts圖表插件示例

餅圖pie chart

 

 
 

  1. var Charts = require('charts.js');
  2. new Charts({
  3. canvasId: 'pieCanvas',
  4. type: 'pie',
  5. series: [{
  6. name: '成交量1',
  7. data: 15,
  8. }, {
  9. name: '成交量2',
  10.  


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/23769.html 復制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢