<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="manageStatChart.aspx.cs" Inherits="Web.Wpdcc.manageStatChart" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <!--#include file = "../Css/head.htm" -->
</head>
<body>
    <div class="main-content-inner">
        <!-- #section:basics/content.breadcrumbs -->
        <div class="breadcrumbs" id="breadcrumbs">
            <ul class="breadcrumb">
                <li>
                    <i class="ace-icon fa  fa-desktop"></i>
                    <a href="welcome.aspx">主页</a>
                </li>
                <li><a href="manageStat.aspx">网站数据分析</a>
                </li>
                <li><a href="manageStat.aspx">访问人数统计</a>
                </li>
                <li class="active">网站访问量统计图</li>
            </ul>
            <!-- /.breadcrumb -->

            <!-- /section:basics/content.searchbox -->
        </div>
        <!-- /section:basics/content.breadcrumbs -->
        <div class="page-content">
            <div class="row">
                <div class="col-xs-12">
                    <!-- PAGE CONTENT BEGINS -->
                    <form id="form2" runat="server">
                        <div class="list-func-box func-box">
                            <div class="bd tab-content">
                                <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                                    <ContentTemplate>
                                        <div class="function-hd">
                                            <div class="search-box fr">
                                            </div>
                                            <!--/search-box-->
                                            <div class="page-header clearfix">
                                                <div class="action-field">
                                                    <div class="action-field col-xs-12">
                                                        <div class="col-xs-12">
                                                            <span class="pull-left">日期：</span>
                                                            <div class="input-daterange input-group pull-left">
                                                                <input id="btime" runat="server" class="input-sm form-control" type="text" />
                                                                <span class="input-group-addon">
                                                                    <i class="fa fa-exchange"></i>
                                                                </span>
                                                                <input id="etime" runat="server" class="input-sm form-control" type="text" />
                                                            </div>
                                                            <div>
                                                                &nbsp;&nbsp;
                    <asp:Button ID="btnSelect" class="btn btn-mini btn-primary" runat="server" Text="查询" OnClick="Btn_Click" />
                                                                &nbsp;&nbsp;
                                                <a href="manageStat.aspx" class="btn btn-primary btn-mini ">
                                                    <i class="fa fa-file-excel-o align-top bigger-125"></i>
                                                    列表模式</a>
                                                            </div>

                                                            <!-- /section:plugins/date-time.datepicker -->
                                                        </div>
                                                    </div>
                                                    <!--/action-field-->
                                                </div>
                                            </div>
                                        </div>
                                    </ContentTemplate>
                                </asp:UpdatePanel>
                                <div class="function-bd">
                                    <div id="echart" style="min-height:200px"></div>
                                </div>
                            </div>
                        </div>
                    </form>
                    <!-- PAGE CONTENT ENDS -->
                </div>
            </div>
        </div>
        <!-- /.page-content -->
    </div>
    <!--#include file = "../Css/foot.htm" -->
    <script type="text/javascript">

        jQuery(function ($) {
            $('[data-rel=popover]').popover({ container: 'body' });
        })
            </script>
    <!-- 引入 ECharts 文件 -->
    <script src="../assets/js/echarts/echarts.min.js"></script>
    <script src="../assets/js/echarts/dark.js"></script>
    <script type="text/javascript">
        $(document).ready(
        function () {

            $.ajax({
                type: "Post",
                url: "manageStatChart.aspx/retJson",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data1) {
                    var data = eval("(" + data1 + ")");//由JSON字符串转换为JSON对象
                    var times = [];
                    var pvdate = [];
                    for (var a = 0; a < data.length; a++) {
                        times = times.concat([data[a].times]);
                    };
                    for (var b = 0; b < data.length; b++) {
                        pvdate = pvdate.concat([data[b].pvdate]);
                    };
                    if (data) {
                        if (data1 == "[{}]") {
                            $('#echart').html("此时间段没有人员访问记录 >_<~~~~");
                            return;
                        }
                        //设置图表显示高度
                        var h = parseInt(data.length * 100, 10);
                        $("#echart").height(500);
                        var myChart = echarts.init(document.getElementById('echart'), 'dark');
                        myChart.setOption({
                            title: {
                                text: '网站访问量统计图'
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data: ['网站访问量']
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            toolbox: {
                                feature: {
                                    saveAsImage: {}
                                }
                            },
                            xAxis: {
                                type: 'category',
                                data: pvdate
                            },
                            yAxis: {            
                                type: 'value',
                                splitLine: false,
                                minInterval: 1,
                                axisTick: 10,
                            },
                            series: [{
                                name: '网站访问量',
                                type: 'line',
                                data: times
                            }]
                        });
                        myChart.setOption(option);
                    }
                },

                error: function (msg) {
                    alert("系统发生错误");
                }
            });
        });
    </script>
    <script type="text/javascript">
        jQuery(function ($) {

            //datepicker plugin
            //link
            $('.date-picker').datepicker({
                autoclose: true,
                todayHighlight: true
            })
            //show datepicker when clicking on the icon
            .next().on(ace.click_event, function () {
                $(this).prev().focus();
            });

            //or change it into a date range picker
            $('.input-daterange').datepicker({ autoclose: true });
        });
    </script>
</body>
</html>
