微信小程序中的图表构建
第一
html中的代码
<view class="container">
<canvas canvas-id="lineCanvas" bindtouchend="touchHandler"></canvas>
</view>
//红色的值和js中的值对应
第二
js中的代码
var wxCharts = require(\'../../utils/wxcharts.js\');//把wechart插件包导入进去
var lineChart = null;
Page({
data: {
},
//下边这个方法是来创造数据的。不是重点。。。。
createSimulationData: function () {
var categories = [];
var data = [];
for (var i = 0; i < 10; i++) {
categories.push(\'2016-\' + (i + 1));
data.push(Math.random()*(20-10)+10);
}
// data[4] = null;
return {
categories: categories,
data: data
}
},
onLoad: function (e) {
var windowWidth = 320;
try {
var res = wx.getSystemInfoSync();
windowWidth = res.windowWidth;
} catch (e) {
console.error(\'getSystemInfoSync failed!\');
}
var simulationData = this.createSimulationData();
lineChart = new wxCharts({
canvasId: \'lineCanvas\',//和前面的html中的红色值相对应
type: \'line\', //表示是以线为主的图表
categories: simulationData.categories, //表示图表中下边一行显示的的数据 例如：2016年的数量要表达出来。。。 即显示的2016年
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
},
//y轴的标题
yAxis: {
title: \'流量 (mg/l)\',//y轴标题的题目
format: function (val) {
return val.toFixed(2);//y轴的数字保留两位小数
},
min: 0
},
width: windowWidth,
height: 200,
dataLabel: false,//所显示出来的曲线上是否显示相应的信息
dataPointShape: true,
extra: {
lineStyle: \'curve\'//以半圆形的曲线连接起来
}
});
}})
第三
展示结果
请发表评论