採用Redis統計客戶端線上使用者——從redis-server獲取資料展示到html頁面
阿新 • • 發佈:2019-01-02
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
toolbox: {
show: true ,
top: 0,
right:30,
feature: {
saveAsImage: {
}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
splitLine:{
show:false
},
data:[]
},
yAxis: {
type: 'value' ,
axisLabel: {
formatter: '{value} 人'
},
axisPointer: {
snap: true
},
splitLine:{
show:false
}
},
visualMap: {
show: false,
dimension: 0 ,
pieces: [ {
gt: 1,
lte: 31,
color: '#1FB5AB'
},]
},
series: []
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
};
$(document).ready(function() {
$("#btn_find").on('click', function() {
var result = $("#dateleke").val();
var postData = {"date": result};
$.ajax({
url: "/redisdata",
type: "POST",
contentType: "application/json;charset=UTF-8",
data: JSON.stringify(postData),
dataType: 'json',
success: function (jsonData) {
if (jsonData) {
data = jsonData.data
var keyList = [];
var valueList = [];
for (var j = 0; j < data.lvalue.length; j++) {
keyList.push(data.lkey[j]);
valueList.push(data.lvalue[j]);
}
myChart.hideLoading();
option1 = myChart.getOption();
var legendvalue = {data:keyList, axisLabel: {formatter: '{value} 日'}};
var serisekey = {name:'線上使用者數', type:'line', smooth: true, data:valueList};
option1.xAxis = legendvalue;
option1.series = serisekey;
console.log(option1);
myChart.setOption(option1,true);
}
},
error: function (errorMsg) {
alert("非常抱歉查詢失敗!");
myChart.hideLoading();
}
})
})
}
);