本文小編為大家詳細(xì)介紹“微信小程序中圖表插件wx-charts怎么使用”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“微信小程序中圖表插件wx-charts怎么使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

成都創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、都昌網(wǎng)絡(luò)推廣、微信小程序定制開發(fā)、都昌網(wǎng)絡(luò)營銷、都昌企業(yè)策劃、都昌品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；成都創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供都昌建站搭建服務(wù)，24小時服務(wù)熱線：18982081108，官方網(wǎng)址：www.cdcxhl.com

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

基于canvas繪制，體積小巧

支持圖表類型

• 餅圖 pie

• 圓環(huán)圖 ring

• 線圖 line

• 柱狀圖 column

• 區(qū)域圖 area

• 代碼分析 Here

參數(shù)說明

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)題字體大?。蛇x，單位為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 是否動畫展示

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

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

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

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

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

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ù)名稱

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
});

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
});

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) + '萬';
  }
 }, {
  name: '成交量2',
  data: [0.30, 0.37, 0.65, 0.78, 0.69, 0.94],
  format: function (val) {
   return val.toFixed(2) + '萬';
  }
 }],
 yAxis: {
  title: '成交金額 (萬元)',
  format: function (val) {
   return val.toFixed(2);
  },
  min: 0
 },
 width: 320,
 height: 200
});

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 + '萬';
  }
 },
 width: 320,
 height: 200
});

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) + '萬';
  }
 }, {
  name: '成交量2',
  data: [15, 20, 45, 37, 4, 80],
  format: function (val) {
   return val.toFixed(2) + '萬';
  }
 }],
 yAxis: {
  format: function (val) {
   return val + '萬';
  }
 },
 width: 320,
 height: 200
});

讀到這里，這篇“微信小程序中圖表插件wx-charts怎么使用”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點(diǎn)還需要大家自己動手實(shí)踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。