1. 程式人生 > >採用Redis統計客戶端線上使用者——從redis-server獲取資料展示到html頁面

採用Redis統計客戶端線上使用者——從redis-server獲取資料展示到html頁面

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(); } }) }) } );