腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

微信小程序圖表插件(wx-charts)實(shí)例代碼

更新時(shí)間：2017年01月17日 09:02:49 作者：xiaolin3303

這篇文章主要介紹了微信小程序圖表插件(wx-charts)實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。

微信小程序圖表工具，charts for WeChat small app

基于canvas繪制，體積小巧

支持圖表類(lèi)型

餅圖 pie
圓環(huán)圖 ring
線(xiàn)圖 line
柱狀圖 column
區(qū)域圖 area
代碼分析 Here

參數(shù)說(shuō)明

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 標(biāo)題內(nèi)容

opts.title.fontSize Number 標(biāo)題字體大小（可選，單位為px）

opts.title.color String 標(biāo)題顏色（可選）

opts.subtitle Object (only for ring chart)

opts.subtitle.name String 副標(biāo)題內(nèi)容

opts.subtitle.fontSize Number 副標(biāo)題字體大?。蛇x，單位為px）

opts.subtitle.color String 副標(biāo)題顏色（可選）

opts.animation Boolean default true 是否動(dòng)畫(huà)展示

opts.legend Boolen default true 是否顯示圖表下方各類(lèi)別的標(biāo)識(shí)

opts.type String required 圖表類(lèi)型，可選值為pie, line, column, area, ring

opts.categories Array required (餅圖、圓環(huán)圖不需要) 數(shù)據(jù)類(lèi)別分類(lèi)

opts.dataLabel Boolean default true 是否在圖表中顯示數(shù)據(jù)內(nèi)容值

opts.dataPointShape Boolean default true 是否在圖表中顯示數(shù)據(jù)點(diǎn)圖形標(biāo)識(shí)

opts.xAxis Object X軸配置

opts.xAxis.disableGrid Boolean default false 不繪制X軸網(wǎng)格

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 數(shù)據(jù)列表

數(shù)據(jù)列表每項(xiàng)結(jié)構(gòu)定義

dataItem Object

dataItem.data Array required (餅圖、圓環(huán)圖為Number) 數(shù)據(jù)

dataItem.color String 例如#7cb5ec 不傳入則使用系統(tǒng)默認(rèn)配色方案

dataItem.name String 數(shù)據(jù)名稱(chēng)

dateItem.format Function 自定義顯示數(shù)據(jù)內(nèi)容

Example

pie chart

var wxCharts = require('wxcharts.js');
new wxCharts({
 canvasId: 'pieCanvas',
 type: 'pie',
 series: [{
  name: 'cat1',
  data: 50,
 }, {
  name: 'cat2',
  data: 30,
 }, {
  name: 'cat3',
  data: 1,
 }, {
  name: 'cat4',
  data: 1,
 }, {
  name: 'cat5',
  data: 46,
 }],
 width: 360,
 height: 300,
 dataLabel: true
});

pieChart

ring chart

new wxCharts({
 canvasId: 'ringCanvas',
 type: 'ring',
 series: [{
  name: '成交量1',
  data: 15,
 }, {
  name: '成交量2',
  data: 35,
 }, {
  name: '成交量3',
  data: 78,
 }, {
  name: '成交量4',
  data: 63,
 }],
 width: 320,
 height: 200,
 dataLabel: false
});

pieChart

line chart

new wxCharts({
 canvasId: 'lineCanvas',
 type: 'line',
 categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
 series: [{
  name: '成交量1',
  data: [0.15, 0.2, 0.45, 0.37, 0.4, 0.8],
  format: function (val) {
   return val.toFixed(2) + '萬(wàn)';
  }
 }, {
  name: '成交量2',
  data: [0.30, 0.37, 0.65, 0.78, 0.69, 0.94],
  format: function (val) {
   return val.toFixed(2) + '萬(wàn)';
  }
 }],
 yAxis: {
  title: '成交金額 (萬(wàn)元)',
  format: function (val) {
   return val.toFixed(2);
  },
  min: 0
 },
 width: 320,
 height: 200
});

lineChart

columnChart

new wxCharts({
 canvasId: 'columnCanvas',
 type: 'column',
 categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
 series: [{
  name: '成交量1',
  data: [15, 20, 45, 37, 4, 80]
 }, {
  name: '成交量2',
  data: [70, 40, 65, 100, 34, 18]
 }],
 yAxis: {
  format: function (val) {
   return val + '萬(wàn)';
  }
 },
 width: 320,
 height: 200
});

columnChart

areaChart

new wxCharts({
 canvasId: 'areaCanvas',
 type: 'area',
 categories: ['2016-08', '2016-09', '2016-10', '2016-11', '2016-12', '2017'],
 series: [{
  name: '成交量1',
  data: [70, 40, 65, 100, 34, 18],
  format: function (val) {
   return val.toFixed(2) + '萬(wàn)';
  }
 }, {
  name: '成交量2',
  data: [15, 20, 45, 37, 4, 80],
  format: function (val) {
   return val.toFixed(2) + '萬(wàn)';
  }
 }],
 yAxis: {
  format: function (val) {
   return val + '萬(wàn)';
  }
 },
 width: 320,
 height: 200
});

areaChart