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

<!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="manageNewsCount.aspx">网站数据分析</a>
                </li>
                <li><a href="manageNewsCount1.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" />
                                                            </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">
        try { ace.settings.check('breadcrumbs', 'fixed') } catch (e) { }

        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: "manageNewsImg.aspx/retJson",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data1) {
                    var data = eval("(" + data1 + ")");//由JSON字符串转换为JSON对象                    
                    var name = [];
                    var value1 = [];
                    var value2 = [];
                    for (var a = 0; a < data.length; a++) {
                        name = name.concat([data[a].name]);
                    };
                    for (var b = 0; b < data.length; b++) {
                        value1 = value1.concat([data[b].value1]);
                    };
                    for (var c = 0; c < data.length; c++) {
                        value2 = value2.concat([data[c].value2]);
                    };
                    if (data) {
                        if (data1 == "[{}]") {
                            $('#echart').html("此时间段没有栏目发文记录 >_<~~~~");
                            return;
                        }
                        //设置图表显示高度
                        var h = parseInt(data.length * 100, 10);
                        $("#echart").height(h);
                        var myChart = echarts.init(document.getElementById('echart'),'dark');
                        myChart.setOption({
                            title: {
                                text: '栏目活跃度统计图'
                            },
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'shadow'
                                }
                            },
                            legend: {
                                data: ['栏目发文总数', '栏目发文审核通过数']
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: {
                                type: 'value'
                            },
                            yAxis: {
                                type: 'category',
                                data: name
                            },
                            series: [{
                                name: '栏目发文总数',
                                type: 'bar',
                                data: value1
                            },
                            {
                                name: '栏目发文审核通过数',
                                type: 'bar',
                                data: value2
                            }]
                        });
                        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>
