最近做小程式需要統計一些資料，需要用到圖表插件，所有在網上找了找，找到了wx-charts這個插件，看着挺好用的，和jq的echarts類似，所有選擇用這個插件來畫圖表，wx-charts是基于canvas繪制，體積小巧，支援的比較多，有餅圖、圓環圖、線圖、柱狀圖、區域圖、雷達圖。
1、首先在https://github.com/xiaolin3303/wx-charts.git下載下傳wx-charts插件，裡面dist檔案夾裡有一個wxcharts.js和wxcharts-min.js兩個檔案，使用哪一個都行，放在自己項目的utils檔案夾下
2、在需要使用的頁面js中引入插件
let Charts = require('../../../utils/wxcharts.js'); //引入wxChart檔案
3、在wxml檔案中定義canvas，注意：canvas-id與js當中的new Charts選項當中的canvasId必須要一緻才行
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 自定義顯示資料内容
updateData(data) 更新圖表資料，data: object，data.categories(可選，具體見參數說明)，data.series(可選，具體見參數說明)，data.title(可選，具體見參數說明)，data.subtitle(可選，具體見參數說明)
stopAnimation() 停止目前正在進行的動畫效果，直接展示渲染的最終結果
addEventListener(type, listener) 添加事件監聽，type: String事件類型，listener: function 處理方法
getCurrentDataIndex(e) 擷取圖表中點選時的資料序列編号(-1表示未找到對應的資料區域), e: Object微信小程式标準事件，需要手動的去綁定touch事件，具體可參考wx-charts-demo中column圖示例
showToolTip(e, options?) 圖表中展示資料詳細内容(目前僅支援line和area圖表類型)，e: Object微信小程式标準事件，options: Object可選，tooltip的自定義配置，支援option.background，預設為#000000; option.format, function類型，接受兩個傳入的參數，seriesItem(Object, 包括seriesItem.name以及seriesItem.data)和category，可自定義tooltip顯示内容。具體可參考wx-charts-demo中line圖示例
scrollStart(e), scroll(e), scrollEnd(e)設定支援圖表拖拽系列事件(支援line, area, column)，具體參考wx-charts-demo中ScrollLine圖示例
4、wx-charts圖表插件示例(在js檔案的onload方法中寫即可)
餅圖pie chart
var Charts = require('charts.js');newCharts({
canvasId:'pieCanvas',
type:'pie',
series: [{
name:'成交量1',
data:15,
}, {
name:'成交量2',
data:35,
}, {
name:'成交量3',
data:78,
}, {
name:'成交量4',
data:63,
}],
width:640,
height:400,
dataLabel:false});
線圖line chart
newCharts({
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:640,
height:400});
柱狀圖columnChart
newCharts({
canvasId:'columnCanvas',
type:'column',
categories: ['2016-08', '2016-09', '2016-10', '2016-11', '2016-12', '2017'],
series: [{
name:'成交量1',
data: [15, 20, 45, 37, 4, 80]
}, {
name:'成交量2',
data: [70, 40, 65, 100, 34, 18]
}, {
name:'成交量3',
data: [70, 40, 65, 100, 34, 18]
}, {
name:'成交量4',
data: [70, 40, 65, 100, 34, 18]
}],
yAxis: {
format:function(val) {return val + '萬';
}
},
width:640,
height:400,
dataLabel:false});
區域圖areaChart
newCharts({
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:640,
height:400});
雷達圖radar Chart
newwxCharts({
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}
}
});
下面是自己項目中的代碼，先上效果圖
wxml
wxss
.chart{width:95%;height:550rpx;margin:0 auto;padding-top:50rpx;background:#fff;
}.chart-info{height:500rpx;
}.canvas{width:380px;height:400px;
}
js
let Charts = require('../../../utils/wxcharts.js'); //引入wxChart檔案
var app =getApp();var lineChart = null;
Page({data: {
date:''},onLoad:function(options) {//擷取系統目前時間
let that = this
var myDate = newDate();var date =myDate.toLocaleDateString();
console.log(date)
that.setData({
date: date,//選擇時間
})//折線圖
var windowWidth = '', windowHeight = ''; //定義寬高
try{var res = wx.getSystemInfoSync(); //試圖擷取螢幕寬高資料
windowWidth = res.windowWidth / 750 * 700 //以設計圖750為主進行比例算換
windowHeight = res.windowWidth / 750 * 500 //以設計圖750為主進行比例算換
} catch(e) {
console.error('getSystemInfoSync failed!'); //如果擷取失敗
}
lineChart= newCharts({
canvasId:'lineCanvas',
type:'line',
animation:true, //是否開啟動畫
categories: ['06', '07', '08', '09', '10', '11', '12'],
series: [{
name:'月教師好評情況',
data: [15, 20, 45, 37, 40, 80, 25],
format:function(val) {return val.toFixed(2) + '分';
}
}],
xAxis: {//是否隐藏x軸分割線
disableGrid: true,
},
yAxis: {
title:'教師好評總分數',
format:function(val) {return val.toFixed(2);
},
},
width: windowWidth,//圖表展示内容寬度
height: windowHeight, //圖表展示内容高度
dataLabel: true, //是否在圖表上直接顯示資料
dataPointShape: true, //是否在圖示上顯示資料點标志
extra: {
lineStyle:'curve' //曲線
},
});
},touchHandler:function(e) {
lineChart.showToolTip(e, {//background: '#7cb5ec',
format: function(item, category) {return category + ' ' + item.name + ':' +item.data
}
});
},
})
這些都是自己參考網上整理出來的，希望對大家有所幫助