微信小程序中的图表构建

第一

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'//以半圆形的曲线连接起来

}

});

}})

 

第三

展示结果