用wx-charts插件在微信小程序展示图表
来自CloudWiki
wx-charts简介
微信小程序图表插件（wx-charts）基于canvas绘制，体积小巧，支持图表类型饼图、线图、柱状图 、区域图等图表图形绘制，目前wx-charts是微信小程序图表插件中比较强大好使的一个
支持图标类型
饼图 pie 圆环图 ring 线图 line 柱状图 column 区域图 area 雷达图 radar
导入wx-charts
github地址：https://github.com/xiaolin3303/wx-charts.git
直接引入编译好的dist里面的js文件（二选一）
wx-charts的使用
折线图
步骤：
在需要使用的页面的js当中，在顶部写入：
// pages/gragh/test.js
var wxCharts = require('wxcharts.js');
var app=getApp();
var daylineChart = null;
var yuelineChart = null;
写一个独立的方法（或者直接写在onload里面）：
我这里写的方法名是 getMothElectro ，我后面试在onload里面调用了的。
test.js 代码：
// pages/gragh/test.js
var wxCharts = require('wxcharts.js');
var app=getApp();
var daylineChart = null;
var yuelineChart = null;
Page({
/**
* 页面的初始数据
*/
data: {
},
getMothElectro: function () {
var windowWidth = 320;
try {
var res = wx.getSystemInfoSync();
windowWidth = res.windowWidth;
} catch (e) {
console.error('getSystemInfoSync failed!');
}
yuelineChart = new wxCharts({ //当月用电折线图配置
canvasId: 'yueEle',
type: 'line',
categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'], //categories X轴
animation: true,
// background: '#f5f5f5',
series: [{
name: '总用电量',
//data: yuesimulationData.data,
data: [1, 6, 9, 1, 0, 2, 9, 2, 8, 6, 0, 9, 8, 0, 3, 7, 3, 9, 3, 8, 9, 5, 4, 1, 5, 8, 2, 4, 9, 8, 7],
format: function (val, name) {
return val.toFixed(2) + 'kWh';
}
}, {
name: '电池供电量',
data: [0, 6, 2, 2, 7, 6, 2, 5, 8, 1, 8, 4, 0, 9, 7, 2, 5, 2, 8, 2, 5, 2, 9, 4, 4, 9, 8, 5, 5, 5, 6],
format: function (val, name) {
return val.toFixed(2) + 'kWh';
}
},
{
name: '光伏供电量',
data: [16, 14, 19, 17, 11, 14, 15, 11, 11, 18, 18, 16, 16, 12, 12, 12, 10, 5, 5, 8, 8, 8, 8, 9, 0, 4, 6, 9, 2, 1, 6],
format: function (val, name) {
return val.toFixed(2) + 'kWh';
}
},
{
name: '市电供电量',
data: [0, 4, 3, 3, 1, 7, 7, 7, 9, 9, 3, 3, 0, 0, 5, 6, 0, 4, 1, 2, 0, 1, 3, 9, 2, 5, 1, 8, 3, 4, 2],
format: function (val, name) {
return val.toFixed(2) + 'kWh';
}
}],
xAxis: {
disableGrid: true
},
yAxis: {
title: '当月用电(kWh)',
format: function (val) {
return val.toFixed(2);
},
max: 20,
min: 0
},
width: windowWidth,
height: 200,
dataLabel: false,
dataPointShape: true,
extra: {
lineStyle: 'curve'
}
});
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.getMothElectro();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
test.wxml: (注意这里的canvas-id要与js中的要一致
<canvas class="canvas" canvas-id="yueEle"></canvas> <canvas canvas-id="canvas2"></canvas> <canvas canvas-id="canvas3"></canvas> <canvas canvas-id="canvas4"></canvas> <canvas canvas-id="canvas5"></canvas> <canvas canvas-id="canvas6"></canvas>
test.wxss:
这里的canvas类的高度要与js中定义的一致。
/* pages/gragh/test.wxss */
.canvas {
height: 200px;
}
写好后，编译一下，效果如图：
饼图
pic2 = new wxCharts({
canvasId: 'canvas2',
type: 'pie',
series: [{ name: '一班', data: 50 }, { name: '二班', data: 30 }, { name: '三班', data: 20 }, { name: '四班', data: 18 }, { name: '五班', data: 8 }],
width: windowWidth,
height: 200,
dataLabel: true,
});
其他图形
pic3 = new wxCharts({
canvasId: 'canvas3',
dataPointShape: "circle",
type: 'line',
extra: {
lineStyle: 'curve' //线条的形状（弧形）
},
categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
series: [{
name: '成交量1',
data: [0.15, null, 0.45, 0.37, 0.4, 0.8],//设置某一个值为null会出现断层
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);
},
fontColor: "red",
titleFontColor: "red",
min: 0,
gridColor: "red"
},
width: windowWidth,
height: 200,
dataLabel: true
});
pic4 = new wxCharts({
canvasId: 'canvas4',
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: windowWidth,
height: 200
});
pic5 = new wxCharts({
animation: true,
canvasId: 'canvas5',
type: 'ring',
extra: {
ringWidth: 10,//圆环的宽度
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: true,
legend: false,
padding: 0
});
pic6 = new wxCharts({
animation: true,
canvasId: 'canvas6',
type: 'radar',
categories: ['1', '2', '3', '4', '5', '6'],
series: [{
name: '成交量1',
data: [90, 110, 125, 95, 87, 122]
}, {
name: '成交量2',
data: [190, 210, 105, 35, 27, 102]
}],
width: windowWidth,
height: 200,
extra: {
radar: {
max: 200//雷达数值的最大值
}
}
});
pic7 = new wxCharts({
canvasId: 'canvas7',
dataPointShape: false,
type: 'column',
categories: ['2016-08', '2016-09', '2016-10', '2016-11', '2016-12', '2017'],
series: [{
name: '成交量1',
data: [15, 20, 45, 37, 4, 80], color: "rgba(0,0,0,0.3)"
}, {
name: '成交量2',
data: [70, 40, 65, 100, 34, 18]
}, {
name: '成交量3',
data: [100, 50, 75, 200, 15, 13]
}],
yAxis: {
format: function (val) {
return val + '万';
}
},
xAxis: {
disableGrid: true,
},
width: windowWidth,
height:200,
dataLabel: true,
extra: {
column: {
width: 40 //柱的宽度
}
}
});
