ejs + ajax



<% include header.ejs %>
<div class="container">
    <div id = 'father' style="width: 800px;height:600px;text-align: center">
    </div>
</div>

<script type="text/javascript">
    function getData() {
        $("#father").html('');
        var divId = 'div' + Math.floor(Math.random()*3000);
        $("#father").prepend("<div id='"+divId+"' style='width: 800px;height:600px;text-align: center'></div>");
        $.ajax({
            url : '/online1',
            type : 'post',
            data : {
                name : $('.name').val(),
                password : $('.psw').val()
            },
            success : function (result) {
                // 基于準(zhǔn)備好的dom,初始化echarts實例
                var myChart = echarts.init(document.getElementById(divId));
                // 指定圖表的配置項和數(shù)據(jù)
                var title = [];
                for(var i in result.success){
                    title.push(result.success[i].name);
                }
                option = {
                    title : {
                        text: '在線人數(shù)統(tǒng)計',
                        subtext: '60/s',
                        x:'center'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/> : {c} (mcc5oxx%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data:title
                    },
                    series : [
                        {
                            name: '訪問來源',
                            type: 'pie',
                            radius : '55%',
                            center: ['50%', '60%'],
                            data:result.success,
                            itemStyle: {
                                normal:{
                                    label:{
                                        show: true,
                                        formatter: '忙迁 : {c} (3vv3j7m%)'
                                    },
                                    labelLine :{show:true}
                                },
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                myChart.setOption(option);
            }
        });
    }
    window.onload = getData;
    setInterval("getData()",60*1000);
</script>
<% include footer.ejs %>


var utils = require('../models/utils');
//在index.js中調(diào)用這個函數(shù)刀森,把這里定義的處理邏輯設(shè)置到router里
exports.setRouter = function(router) {
    router.get('/online', function (req, res) { utils.checkPermission(req, res, "menu_online", utils.PERMISSION_TYPE.Readonly, GetOnlineStatus);});
    router.post('/online1', function (req, res) { utils.checkPermission(req, res, "menu_online", utils.PERMISSION_TYPE.Readonly, GetOnlineStatusBy7);});

}

function GetOnlineStatus(req, res, menuKey, localData) {
        res.render('online');
}

function GetOnlineStatusBy7(req, res, menuKey, localData) {
    var regDatas = [];
    utils.query('SELECT * FROM data_onlinecnt order by `timekey` desc limit 2;', function (error, regData) {
        if (error) {
            utils.logError('select data_account list failed', error);
            return ;
        }
        if(regData.length >= 2){
            for(var i in regData){
                if(regData[i].gameappid === 'wx60c5e1f255cb23a0'){
                    regDatas.push({value:regData[i].onlinecntios,name:'WX_IOS'});
                    regDatas.push({value:regData[i].onlinecntandroid,name:'WX_Android'});
                }
                if(regData[i].gameappid === '1105197308'){
                    regDatas.push({value:regData[i].onlinecntios,name:'QQ_IOS'});
                    regDatas.push({value:regData[i].onlinecntandroid,name:'QQ_Android'});
                }
            }
        }
        res.json({
            success : regDatas
        });
    });
}





最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末诗轻,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子端衰,更是在濱河造成了極大的恐慌菠净,老刑警劉巖,帶你破解...
    沈念sama閱讀 210,914評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件拦键,死亡現(xiàn)場離奇詭異谣光,居然都是意外死亡,警方通過查閱死者的電腦和手機芬为,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,935評論 2 383
  • 文/潘曉璐 我一進店門萄金,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人媚朦,你說我怎么就攤上這事氧敢。” “怎么了询张?”我有些...
    開封第一講書人閱讀 156,531評論 0 345
  • 文/不壞的土叔 我叫張陵孙乖,是天一觀的道長。 經(jīng)常有香客問我份氧,道長的圆,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,309評論 1 282
  • 正文 為了忘掉前任半火,我火速辦了婚禮,結(jié)果婚禮上季俩,老公的妹妹穿的比我還像新娘钮糖。我一直安慰自己,他們只是感情好酌住,可當(dāng)我...
    茶點故事閱讀 65,381評論 5 384
  • 文/花漫 我一把揭開白布店归。 她就那樣靜靜地躺著,像睡著了一般酪我。 火紅的嫁衣襯著肌膚如雪消痛。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,730評論 1 289
  • 那天都哭,我揣著相機與錄音秩伞,去河邊找鬼。 笑死欺矫,一個胖子當(dāng)著我的面吹牛纱新,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播穆趴,決...
    沈念sama閱讀 38,882評論 3 404
  • 文/蒼蘭香墨 我猛地睜開眼脸爱,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了未妹?” 一聲冷哼從身側(cè)響起簿废,我...
    開封第一講書人閱讀 37,643評論 0 266
  • 序言:老撾萬榮一對情侶失蹤空入,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后族檬,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體歪赢,經(jīng)...
    沈念sama閱讀 44,095評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,448評論 2 325
  • 正文 我和宋清朗相戀三年导梆,在試婚紗的時候發(fā)現(xiàn)自己被綠了轨淌。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,566評論 1 339
  • 序言:一個原本活蹦亂跳的男人離奇死亡看尼,死狀恐怖递鹉,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情藏斩,我是刑警寧澤躏结,帶...
    沈念sama閱讀 34,253評論 4 328
  • 正文 年R本政府宣布,位于F島的核電站狰域,受9級特大地震影響媳拴,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜兆览,卻給世界環(huán)境...
    茶點故事閱讀 39,829評論 3 312
  • 文/蒙蒙 一屈溉、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧抬探,春花似錦子巾、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,715評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至怠益,卻和暖如春仪搔,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背蜻牢。 一陣腳步聲響...
    開封第一講書人閱讀 31,945評論 1 264
  • 我被黑心中介騙來泰國打工烤咧, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人抢呆。 一個月前我還...
    沈念sama閱讀 46,248評論 2 360
  • 正文 我出身青樓髓削,卻偏偏與公主長得像,于是被迫代替她去往敵國和親镀娶。 傳聞我的和親對象是個殘疾皇子立膛,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,440評論 2 348

推薦閱讀更多精彩內(nèi)容