微信小程序圖表插件（wx-charts）基於canvas繪製，體積小巧，支持圖表類型餅圖、線圖、柱狀圖 、區域圖等圖表圖形繪製，目前wx-charts是微信小程序圖表插件中比較強大好使的一個
支持圖標類型
- 餅圖 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.title Object (only for ring chart)
opts.title.name String 標題內容
opts.title.fontSize Number 標題字體大小（可選，單位爲px）
opts.title.color String 標題顏色（可選）
opts.subtitle Object (only for ring chart)
opts.subtitle.name String 副標題內容
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……
opts.categories Array required (餅圖、圓環圖不需要) 數據類別分類
opts.dataLabel Boolean default true 是否在圖表中顯示數據內容值
opts.dataPointShape Boolean default true 是否在圖表中顯示數據點圖形標識
opts.xAxis Object X軸配置
opts.xAxis.disableGrid Boolean default false 不繪製X軸網格
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 數據列表
數據列表每項結構定義
dataItem Object
dataItem.data Array required (餅圖、圓環圖爲Number) 數據
dataItem.color String 例如#7cb5ec 不傳入則使用系統默認配色方案
dataItem.name String 數據名稱
dateItem.format Function 自定義顯示數據內容
使用方法：
WXML：
<view class="container">
<view class="graph">
<view class="title">原被告佔比</view>
<canvas canvas-id="canvas1" style="height:{{height}}px;width:{{windowWidth}}px;" ></canvas>
</view>
<view class="graph">
<view class="title">訴訟執行佔比</view>
<canvas canvas-id="canvas2" style="height:{{height}}px;width:{{windowWidth}}px;" ></canvas>
</view>
<view class="graph">
<view class="title">案由分佈</view>
<canvas canvas-id="canvas3" style="height:{{height}}px;width:{{windowWidth}}px;" ></canvas>
</view>
<view class="graph">
<view class="title">案件數量分佈趨勢</view>
<canvas canvas-id="canvas4" style="height:{{height}}px;width:{{windowWidth}}px;" ></canvas>
</view>
</view>
JS
// pages/enterpriseMatur/analyzeGraph/analyzeGraph.js
var wxCharts = require('../../../utils/wxcharts.js');
import request from '../../../utils/config.js';
Page({
/**
* 頁面的初始數據
*/
data: {
windowWidth: wx.getSystemInfoSync().windowWidth,
height: wx.getSystemInfoSync().windowHeight / 2 - 44
},
/**
* 生命週期函數--監聽頁面加載
*/
onLoad: function (options) {
},
/**
* 生命週期函數--監聽頁面初次渲染完成
*/
onReady: function () {
this.setChar1();
this.setChar2();
this.setChar3();
this.setChar4();
},
//原被告佔比
setChar1: function (list) {
let data = [
{name:"原告",data:70,color:'#5DB1FF'},
{ name: "被告", data: 30,color:'#59D4D4' }
]
// list.map((item) => {
// data.push({
// name: item.serviceFieldName,
// data: item.serviceDuration
// })
// })
new wxCharts({
animation: true, //是否有動畫
canvasId: 'canvas1',
type: 'pie',
series: data,
width: this.data.windowWidth,
height: this.data.height,
dataLabel: true,
});
},
//訴訟執行佔比
setChar2: function (list) {
let data = [
{ name: "民事案件", data: 70, color: '#72DADA' },
{ name: "執行案件", data: 30, color: '#83DA9D' }
]
// list.map((item) => {
// data.push({
// name: item.serviceFieldName,
// data: item.serviceDuration
// })
// })
new wxCharts({
animation: true, //是否有動畫
canvasId: 'canvas2',
type: 'pie',
series: data,
width: this.data.windowWidth,
height: this.data.height,
dataLabel: true,
});
},
//案由分佈
setChar3:function(){
let main = {
title: '數量',
data: [15, 20, 45, 37],
categories: ['知識產權與競爭糾紛', '知識產權罪', '侵權責任糾紛', '知識產權屬、侵權糾紛']
};
new wxCharts({
canvasId: 'canvas3',
type: 'column',
animation: true,
categories: main.categories,
series: [{
name: '案由',
data: main.data,
format: function (val, name) {
return val.toFixed(2) + '萬';
}
}],
yAxis: {
format: function (val) {
return val + '萬';
},
title: '案件數量',
min: 0
},
xAxis: {
disableGrid: false,
type: 'calibration'
},
extra: {
column: {
width: 15
}
},
width: this.data.windowWidth,
height: this.data.height,
dataLabel: true,
});
},
//案件數量分佈趨勢
setChar4: function(){
let main = {
title: '數量',
data: [0.15, 0.20, 0.45, 0.37,0.24,0.56],
categories: ['2014', '2015', '2016', '2017', '2018', '2019']
};
new wxCharts({
canvasId: 'canvas4',
type: 'line',
animation: true,
categories: main.categories,
series: [{
name: '年份',
data: main.data,
format: function (val, name) {
return val.toFixed(2) + '萬';
}
}],
yAxis: {
format: function (val) {
return val + '萬';
},
title: '案件數量',
min: 0
},
xAxis: {
disableGrid: false,
type: 'calibration',
title:"年份"
},
width: this.data.windowWidth,
height: this.data.height,
dataLabel: true,
});
},
/**
* 生命週期函數--監聽頁面顯示
*/
onShow: function () {
},
/**
* 生命週期函數--監聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命週期函數--監聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
}
})
WXSS
page{
background: #fff;
}
.graph{
border-top: 1px solid #eee;
}
.graph .title{
line-height: 84rpx;
padding-left: 30rpx;
color: #222;
font-weight: 600;
font-size: 30rpx;
}