nps/web/views/index/index.html

<div class="row">
    <div class="col-md-3">
        <div class="widget-small warning coloured-icon"><i class="icon fa fa-html5 fa-3x"></i>
            <div class="info">
                <h4>客户端连接端口</h4>
                <p><b>{{.p}}</b></p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="widget-small danger coloured-icon"><i class="icon fa fa-home fa-3x"></i>
            <div class="info">
                <h4>当前TCP连接总数</h4>
                <p><b>{{.data.tcpCount}}</b></p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="widget-small primary coloured-icon"><i class="icon fa fa-users fa-3x"></i>
            <div class="info">
                <h4>总客户端数</h4>
                <p><b>{{.data.clientCount}}</b></p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="widget-small info coloured-icon"><i class="icon fa fa-user-secret fa-3x"></i>
            <div class="info">
                <h4>在线客户端数</h4>
                <p><b>{{.data.clientOnlineCount}}</b></p>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="tile">
            <h3 class="tile-title">流量</h3>
            <div id="flow" style="width: 600px;height:400px;"></div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="tile">
            <h3 class="tile-title">代理类型</h3>
            <div id="tj" style="width: 600px;height:400px;"></div>
        </div>
    </div>
</div>
<script>
    option = {
        title : {
            x:'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: function (p) {
                return p.seriesName + "<br>" + p.name + ":" + change(p.data.value);
            },
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['入口流量', '出口流量']
        },
        series : [
            {
                name: '类型 统计',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:{{.data.inletFlowCount}}, name: '入口流量'},
                    {value:{{.data.exportFlowCount}}, name: '出口流量'},
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    var myChart = echarts.init(document.getElementById('flow'));
    myChart.setOption(option);


    option = {
        title : {
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['tcp隧道数','socks5隧道数','http代理隧道数','udp隧道数','域名解析数']
        },
        series : [
            {
                name: '类型 统计',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:{{.data.tcpServerCount}}, name:'tcp隧道数'},
                    {value:{{.data.socks5ServerCount}}, name:'socks5隧道数'},
                    {value:{{.data.httpProxyServerCount}}, name:'http隧道数'},
                    {value:{{.data.udpServerCount}}, name:'udp隧道数'},
                    {value:{{.data.hostCount}}, name:'域名解析数'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    var myChart = echarts.init(document.getElementById('tj'));
    myChart.setOption(option);

</script>