微信小程序中的圖表構建

第一

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'//以半圓形的曲線鏈接起來

}

});

}})

 

第三

展現結果