vdianying-web
/
coreData.html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>核心数据</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-reset.css" rel="stylesheet">
    <link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
    <link href="assets/jquery-easy-pie-chart/jquery.easy-pie-chart.css" rel="stylesheet" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/owl.carousel.css" type="text/css">
    <link rel="stylesheet" type="text/css"  href="css/daterangepicker-bs3.css">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/style-responsive.css" rel="stylesheet" />
    <script src="js/jquery.min.js"></script>
    <script src="js/moment.js"></script>
    <script src="js/daterangepicker.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/echarts.min.js"></script>
</head>

<body>
<section id="container" class="">
    <!--header start-->
    <header class="header white-bg">
        <div class="sidebar-toggle-box">
            <div data-original-title="折叠/展开" data-placement="right" class="icon-reorder tooltips"></div>
        </div>
        <!--logo start-->
        <a href="#" class="logo">数据中心</a>
        <!--logo end-->
        <div class="top-nav ">
            <!--search & user info start-->
            <ul class="nav pull-right top-menu">
                <!-- user login dropdown start-->
                <li class="dropdown">
                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                        <span class="username">王小明</span>
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu extended logout">
                        <div class="log-arrow-up"></div>
                        <li><a href="#"><i class=" icon-suitcase"></i> 账号管理</a></li>
                        <li><a href="#"><i class="icon-cog"></i> 成员管理</a></li>
                        <li><a href="login.html"><i class="icon-key"></i> 注销</a></li>
                    </ul>
                </li>
                <!-- user login dropdown end -->
            </ul>
            <!--search & user info end-->
        </div>
    </header>
    <!--header end-->
    <!--sidebar start-->
    <aside>
        <div id="sidebar" class="nav-collapse ">
            <div class="logo">
                <img src="image/icon-logo.png" alt="logo">
                <p class="sidebar-title">数据中心</p>
            </div>
            <!-- sidebar menu start-->
            <ul class="sidebar-menu">
                <li class="sub-menu">
                    <a href="javascript:;" class="">
                        <i class="icon-book"></i>
                        <span>数据汇总</span>
                        <span class="arrow"></span>
                    </a>
                    <ul class="sub">
                        <li class="selected"><a class="" href="">数据概览</a></li>
                        <li><a class="" href="">核心数据</a></li>
                        <li><a class="" href="">详细数据</a></li>
                    </ul>
                </li>
                <li class="sub-menu">
                    <a href="javascript:;" class="">
                        <i class="icon-cogs"></i>
                        <span>表格管理</span>
                        <span class="arrow"></span>
                    </a>
                    <ul class="sub">
                        <li><a class="" href="">项目管理</a></li>
                        <li><a class="" href="">表格权限</a></li>
                        <li><a class="" href="">编辑表格</a></li>
                        <li><a class="" href="">历史表格</a></li>
                    </ul>
                </li>
            </ul>
            <!-- sidebar menu end-->
        </div>
    </aside>
    <!--sidebar end-->
    <!--main content start-->
    <section id="main-content">
        <header class="header white-bg">
            <!--<div class="sidebar-toggle-box">-->
            <!--<div data-original-title="折叠/展开" data-placement="right" class="icon-reorder tooltips"></div>-->
            <!--</div>-->
            <!--&lt;!&ndash;logo start&ndash;&gt;-->
            <!--<a href="#" class="logo">数据中心</a>-->
            <!--&lt;!&ndash;logo end&ndash;&gt;-->
            <div class="top-nav ">
                <span class="add-channel"><img src="image/icon-addChannel.png" alt=""></span>
                <span class="choose-channel"><span class="cc-content">选择渠道查看详细数据 &nbsp; <img src="image/icon-down2.png" alt=""></span></span>
                <!--search & user info start-->
                <ul class="nav pull-right top-menu">
                    <!-- user login dropdown start-->
                    <li class="dropdown">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <span class="username">王晓蒙</span>
                            <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu extended logout">
                            <div class="log-arrow-up"></div>
                            <li><a href="#"> 账号管理</a></li>
                            <li><a href="#">成员管理</a></li>
                            <!--<li><a href="login.html"><i class="icon-key"></i> <i class=" icon-suitcase"><i class="icon-cog"></i> </i>注销</a></li>-->
                        </ul>
                    </li>
                    <!-- user login dropdown end -->
                </ul>
                <!--search & user info end-->
            </div>
        </header>
        <section class="wrapper">
            <div class="core-data">
                <div class="data-type">
                    <div class="type-name" v-if="element.selected == true" v-for="element in elementList">{{element.name}}</div>
                    <div class="type-name transform"><img class="add-type" src="image/icon-plus.png" alt=""></div>
                    <div class="line"></div>
                </div>
                <div class="color-change">
                    <div class="date-choose">
                        <span class="data-source">微信数据</span>
                        <ul>
                            <li class="dc-date dc-active">近7天</li>
                            <li class="dc-date">近30天</li>
                            <li class="dc-date">本月</li>
                        </ul>
                        <div class="well">
                            <form class="form-horizontal">
                                <fieldset>
                                    <div class="control-group">
                                        <div class="controls">
                                            <div class="input-prepend input-group">
                                                <input type="text" readonly style="width: 200px" name="reservation" id="reservation" class="form-control" value="2017-05-01 - 2017-06-01" />
                                            </div>
                                        </div>
                                    </div>
                                </fieldset>
                            </form>
                        </div>
                        <img class="icon-output" src="image/icon-output.png" alt="">
                        <span class="output">导出</span>
                    </div>
                    <div class="data-exhibite">
                        <div id="wexin-data" style="width: 100%;height: 400px;"></div>

                        <div class="add-project-data">
                            <img class="icon-circle" src="image/icon-circle.png" alt="">
                            <span>选择项目</span>
                            <img class="icon-down" src="image/icon-down2.png" alt="">
                        </div>
                        <div class="project-select">
                            <div class="project-title">
                                <span class="circle add-color"></span>
                                <span>魔力汽车</span>
                            </div>
                            <div class="project-title">
                                <span class="circle"></span>
                                <span>魔力汽车</span>
                            </div>
                            <div class="project-title">
                                <span class="circle"></span>
                                <span>魔力汽车</span>
                            </div>
                            <div class="project-title">
                                <span class="circle"></span>
                                <span>魔力汽车</span>
                            </div>
                            <div class="project-title">
                                <span class="circle"></span>
                                <span>魔力汽车</span>
                            </div>

                        </div>

                    </div>
                </div>
                <div class="type-plus">
                    <div class="type-plus-bg"></div>
                    <div class="type-plus-content">
                        <div class="type-title" v-for="element in elementList">
                            <span v-if="element.selected" class="type-select be-selected"></span>
                            <span v-else="element.selected" class="type-select"></span>
                            <span class="element-name">{{element.name}}</span>
                        </div>
                        <div class="tpc-btn">
                        <button class="tp-btn confirm">确定</button>
                        <button class="tp-btn cancel">取消</button>
                        </div>
                    </div>
                </div>

            </div>
        </section>
    </section>
    <!--main content end-->
</section>
<!-- js placed at the end of the document so the pages load faster -->
<script src="js/jquery.scrollTo.min.js"></script>
<script src="js/jquery.easyui.min.js"></script>
<!--script for this page-->

<script type="text/javascript">
    $(document).ready(function() {

        var app = new Vue({
            el: '#container',
            data: {
                elementList:[],
                testData:[2, 3, 4, 5, 6, 3]
            },
            methods: {

            }
        })

        setTimeout(function() {
            app.testData = [1,1,1,1,1,1];

            myChart.setOption({
                series: [{
                    name: '粉丝总量',
                    type: 'bar',
                    barWidth: 15,//固定柱子宽度
                    data: app.testData,
                    itemStyle: {
                        //通常情况下：
                        normal: {
                            //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                            color: function (params) {
                                var colorList = ['rgb(23,25,238)','rgb(164,205,238)','rgb(64,205,238)','rgb(134,155,48)','rgb(64,205,138)', 'rgb(42,170,227)', 'rgb(25,46,67)', 'rgb(195,99,235)','rgb(123,222,98)'];
                                return colorList[params.dataIndex];
                            },
                            label: {
                                show: true,//是否展示
                                position: 'top',
                                textStyle: {
                                    fontSize : '12',
                                    color: '#615a5a'

                                }
                            }
                        }

                    }
                }]
            });
        }, 1000);

        var element = [];
        element.name = "粉丝总量";
        element.selected = true;
        app.elementList.push(element);

        element = [];
        element.name = "净增粉丝";
        element.selected = true;
        app.elementList.push(element);

        element = [];
        element.name = "播放量";
        element.selected = false;
        app.elementList.push(element);

        setTimeout(bindElement, 200);

        function  bindElement() {
            $(".type-name").bind("click",function () {
                if($(this).hasClass("transform")){
                    return false;
                }
                if(!$(this).hasClass("dt-active")){
                    $(this).siblings().removeClass("dt-active")
                    $(this).addClass("dt-active")
                }
            });
        }
        $('#sidebar .sub-menu > a').click(function () {

            if($(this).hasClass("closed")) {
                $(this).removeClass("closed");
                $(this).next().slideDown(200);
            } else {
                $(this).addClass("closed");
                $(this).next().slideUp(200);
            }
        });
        $(".add-project-data").click(function () {
            if ($(".project-select").is(':visible')){
                $(".project-select").hide();
            }else{
                $(".project-select").show();
            }
        });

        $(".transform").click(function () {
            $(".type-plus").show();
        });
        $(".cancel,.type-plus-bg").click(function() {
            $(".type-plus").hide();
        });
        $(".confirm").click(function () {
            app.elementList = [];
            $(".type-plus-content .type-title").each(function() {
                var array = [];
                array.name = $(this).find("span.element-name").text();
                array.selected = false;
                if($(this).find(".type-select").hasClass("be-selected")) {
                    array.selected = true;
                }
                app.elementList.push(array);
            });

            setTimeout(bindElement, 200);

            $(".type-plus").hide();
        });

        $(".dc-date").bind("click",function () {
            if(!$(this).hasClass("dc-active")){
                $(this).siblings().removeClass("dc-active")
                $(this).addClass("dc-active")
            }
        })

        setTimeout(function() {
            $(".type-select").bind("click", function () {
                if($(this).hasClass('be-selected')){
                    $(this).removeClass('be-selected');
                }else{
                    $(this).addClass('be-selected');
                }
            });
        },200);

        var myChart = echarts.init(document.getElementById('wexin-data'));

        // 指定图表的配置项和数据
        var option = {
            tooltip: {},
            legend: {
                data:['魔力汽车','魔力萌宠','魔力美食','魔力tv','小情书'],
                x:'center',
                y:'bottom'
            },
            toolbox: {
                show : true,
                right:100,
                feature: {
                    dataView: {readOnly: false},
                    magicType: {type: ['line', 'bar']},
                    restore: {}
                }
            },
            calculable : true,
            xAxis: {
                type : 'category',
                axisTick: {
                    show: false
                },
                axisLine: {show: false},
                data: ["魔力汽车","魔力萌宠","魔力美食","魔力tv","小情书","达情书"]
            },
            yAxis: {
                axisTick: {
                    show: false
                },
                axisLine: {show: false}
            },
            series: [{
                name: '粉丝总量',
                type: 'bar',
                barWidth: 15,//固定柱子宽度
                data: app.testData,
                itemStyle: {
                    //通常情况下：
                    normal: {
                        //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                        color: function (params) {
                            var colorList = ['rgb(23,25,238)','rgb(164,205,238)','rgb(64,205,238)','rgb(134,155,48)','rgb(64,205,138)', 'rgb(42,170,227)', 'rgb(25,46,67)', 'rgb(195,99,235)','rgb(123,222,98)'];
                            return colorList[params.dataIndex];
                        },
                        label: {
                            show: true,//是否展示
                            position: 'top',
                            textStyle: {
                                fontSize : '12',
                                color: '#615a5a'

                            }
                        }
                    }

                }
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        myChart.on('click', function (param) {
            switch (param.name) {
                case "魔力汽车":    //柱子1
                    window.location.href = "http://blog.sina.com.cn";
                    break;
                default:
                    break;

            }

        });

        $('#reservation').daterangepicker(null, function(start, end, label) {
            console.log(start.toISOString(), end.toISOString(), label);
        });


    });
</script>
</body>

</html>