微信小程式--wx-charts圖表外掛使用教程
下載地址
https://github.com/xiaolin3303/wx-charts
解壓後，把dist裡面的wxcharts.js或者wxcharts-min.js放在小程式的資料夾裡，在當前頁面引用檔案。
**
圖表型別
**
- 餅圖 pie
- 圓環圖 ring
- 線圖 line
- 柱狀圖 column
- 區域圖 area
- 雷達圖 radar
**
引數說明
**
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 自定義顯示資料內容
**
使用說明
**
wxml頁面：
<!-- item.id用於遍歷 -->
<canvas class="canvas" canvas-id="ringGraph{{ item.id }}"></canvas>wxss頁面：
如果不在wxss設定寬高，好像有的時候圖表會顯示不出來，正常設定寬高跟js的寬高一樣即可。
.canvas {
width: 80px;
height: 80px;
}圓環圖 ring
js程式碼：
const CHARTS = require('../../utils/wxcharts.js'); // 引入wx-charts.js檔案
data: {
dataInfo: [
{
id: 1,
subNum: "C1609050001",
percentage: 30,
grade: "SPCC",
spec: "2.5*1200*C",
weight: 500
},
{
id: 2,
subNum: "A1609050001",
percentage: 80,
grade: "SPCC",
spec: "3.5*1200*C",
weight: 100
}
]
},
ringShow: function() {
for (var i in this.data.dataInfo) {
var item = this.data.dataInfo[i];
let ring = {
canvasId: "ringGraph" + item.id, // 與canvas-id一致
type: "ring",
series: [
{
name: "已完成",
data: item.percentage,
color: '#ff6600'
},
{
name: "未完成",
data: 100 - item.percentage,
color: '#eeeeee'
}
],
width: 100,
height: 100,
dataLabel: false,
legend: false,
title: { // 顯示百分比
name: item.percentage + '%',
color: '#333333',
fontSize: 14
},
extra: {
pie: {
offsetAngle: -90
},
ringWidth: 6,
}
};
new CHARTS(ring);
}
}圓環圖示例：
餅圖 pie
js程式碼：
pieShow: function(data) {
let pie = {
canvasId: 'pieGraph', // canvas-id
type: 'pie', // 圖表型別，可選值為pie, line, column, area, ring
series: _tempSeries,
width: 310, // 寬度，單位為px
height: 300, // 高度，單位為px
legend: false, // 是否顯示圖表下方各類別的標識
dataLabel: true, // 是否在圖表中顯示資料內容值
extra: {
pie: {
offsetAngle: -90
}
}
};
new CHARTS(pie);
}餅圖示例：
線圖 line
lineShow: function (type) {
var random1 = Math.floor(Math.random() * (500 - 50 + 1) + 50),
random2 = Math.floor(Math.random() * (800 - 100 + 1) + 100),
random3 = Math.floor(Math.random() * (1000 - 200 + 1) + 200),
random4 = Math.floor(Math.random() * (300 - 10 + 1) + 10),
random5 = Math.floor(Math.random() * (600 - 300 + 1) + 300),
let line = {
canvasId: 'lineGraph', // canvas-id
type: 'line', // 圖表型別，可選值為pie, line, column, area, ring
categories: ['201708', '201709', '201710', '201711', '201712'],
series: [{ // 資料列表
name: ' ',
data: [random1, random2, random3, random4, random5]
}],
yAxis: {
min: 0 // Y軸起始值
},
width: 310,
height: 200,
dataLabel: true, // 是否在圖表中顯示資料內容值
legend: false, // 是否顯示圖表下方各類別的標識
extra: {
lineStyle: 'curve' // (僅對line, area圖表有效) 可選值：curve曲線，straight直線 (預設)
}
}
new CHARTS(line);
}線圖：預設straight示例
線圖：curve示例
柱狀圖 column
js程式碼：
columnShow: function(type, c1, c2) {
let column = {
canvasId: 'columnGraph', // canvas-id
type: 'column', // 圖表型別，可選值為pie, line, column, area, ring
series: [{ // 資料列表
name: '捆包1', // 資料名稱
color: '#5AC59F' // 配色，不傳入則使用系統預設配色方案
}, {
name: '捆包2',
color: '#8AD2F5'
}],
yAxis: {
min: 0 // Y軸起始值
},
width: 310, // 寬度，單位為px
height: 200, // 高度，單位為px
legend: false, // 是否顯示圖表下方各類別的標識
dataLabel: true, // 是否在圖表中顯示資料內容值
extra: {
column: {
width: 30 // 柱狀圖每項的圖形寬度，單位為px
}
}
}
new CHARTS(column);
}柱狀圖示例：
