微信小程序圖表插件wx-charts用法實例詳解

更新時間：2019年05月20日 10:36:25 作者：我叫陳小皮。

這篇文章主要介紹了微信小程序圖表插件wx-charts用法,結合實例形式較為詳細的總結分析了微信小程序圖表插件wx-charts的功能、常見用法及相關操作注意事項,需要的朋友可以參考下

本文實例講述了微信小程序圖表插件wx-charts用法。分享給大家供大家參考，具體如下：

微信小程序圖表插件（wx-charts）基于canvas繪制，體積小巧，支持圖表類型餅圖、線圖、柱狀圖、區(qū)域圖等圖表圖形繪制，目前wx-charts是微信小程序圖表插件中比較強大好使的一個

支持圖標類型

餅圖 pie
圓環(huán)圖 ring
線圖 line
柱狀圖 column
區(qū)域圖 area
雷達圖 radar

如何使用？

1. 直接引用編譯好的文件 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

參數(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	標題內容
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)圖不需要) 數(shù)據(jù)類別分類
opts.dataLabel	Boolean default true	是否在圖表中顯示數(shù)據(jù)內容值
opts.dataPointShape	Boolean default true	是否在圖表中顯示數(shù)據(jù)點圖形標識
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ù)列表每項結構定義

dataItem	Object
dataItem.data	Array required (餅圖、圓環(huán)圖為Number) 數(shù)據(jù)
dataItem.color	String 例如#7cb5ec 不傳入則使用系統(tǒng)默認配色方案
dataItem.name	String 數(shù)據(jù)名稱
dateItem.format	Function 自定義顯示數(shù)據(jù)內容

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