short-video-back/web/public/static/simpleboot/admin_index.js

(function(){
  
    /* 设备终端 */
    // 基于准备好的dom，初始化echarts实例
    var echarts_source = echarts.init(document.getElementById('echarts_source'));
    // 指定图表的配置项和数据
    var echarts_source_option = {
        tooltip : {  
            trigger: 'item',  
            formatter: "{c}"  
        },
        legend: {  
            left: 'center',
            top:'bottom',
            itemWidth:10,
            itemHeight:10,
            formatter: '{name}',
            itemGap:50,
            textStyle:{
                color: '#000000',
                fontSize:16
            },
            data:data_source.name
        }
        ,   
        calculable : true,  
        series : [
            {  
                type:'pie',  
                radius :  ['50%', '70%'],//饼图的半径大小  
                center: ['50%', '50%'],//饼图的位置 
                label:{            //饼图图形上的文本标签
                    show:true,
                    textStyle : {
                        fontWeight : 300 ,
                        fontSize : 16    //文字的字体大小
                    },
                    formatter:'{d}%'
                },
                data:data_source.v_n
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    echarts_source.setOption(echarts_source_option);
    
    /* 注册渠道 */
    // 基于准备好的dom，初始化echarts实例
    var echarts_reg = echarts.init(document.getElementById('echarts_reg'));
    // 指定图表的配置项和数据
    var echarts_reg_option = {
        tooltip : {
            trigger: 'auto',
            axisPointer : {
                type : 'shadow'
            }
        },
        xAxis : [
            {
                type : 'category',
                data : data_type.name,
                nameTextStyle:{
                    color: '#323232',
                    padding:[3,0,0,0],
                    fontSize:30
                },
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis : [
            {
                max:'100',
                type : 'value',
                axisLabel: {
                    show: true,
                    interval: 'auto',
                    color:'#969696',
                    formatter: '{value}%'
                }
            }
        ],
        series : [
            {
                type:'bar',
                barWidth: '60%',
                data:data_type.nums_per,
                color: function (params){
                    var colorList = data_type.color;
                    return colorList[params.dataIndex];
                },
                label: {
                    show: true, //开启显示
                    position: 'top', //在上方显示
                    formatter: '{c}%',
                    textStyle: { //数值样式
                        color: '#323232',
                        fontSize: 16
                    }
                }
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    echarts_reg.setOption(echarts_reg_option);
    
    /* 七天数据 */
    // 基于准备好的dom，初始化echarts实例
    var echarts_week = echarts.init(document.getElementById('echarts_week'));
    // 指定图表的配置项和数据
    var echarts_week_option = {
        legend: {
            left: 'right',
            itemWidth:10,
            itemHeight:10,
            formatter: '{name}',
            itemGap:50,
            textStyle:{
                color: '#000000',
                fontSize:16
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: data_week.date
        },
        yAxis: {
            type: 'value',
            minInterval:'1'
        },
        tooltip : {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }   
            }
        },
        series: [{
            name:'新增视频',
            data: data_week.value,
            type: 'line',
            smooth: true,
            lineStyle:{
                color:'#4da2ff'
            },
            itemStyle: { 
                color: '#4da2ff',
            },
            symbolSize:10, //折线点的大小
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#4da2ff' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#fff' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }
            }
        },{
            name:'点赞数',
            data: data_week.likes,
            type: 'line',
            smooth: true,
            lineStyle:{
                color:'#ff7a8b'
            },
            itemStyle: { 
                color: '#ff7a8b',
            },
            symbolSize:10, //折线点的大小
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#ff7a8b' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#fff' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }
            }
        },{
            name:'粉丝数',
            data: data_week.fans,
            type: 'line',
            smooth: true,
            lineStyle:{
                color:'#83d688'
            },
            itemStyle: { 
                color: '#83d688',
            },
            symbolSize:10, //折线点的大小
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#83d688' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#fff' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }
            }
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    echarts_week.setOption(echarts_week_option);  

    /* 广告数据 */
    // 基于准备好的dom，初始化echarts实例
    var echarts_ad = echarts.init(document.getElementById('echarts_ad'));
    // 指定图表的配置项和数据
    var echarts_ad_option = {
        legend: {
            left: 'right',
            itemWidth:10,
            itemHeight:10,
            formatter: '{name}',
            itemGap:50,
            textStyle:{
                color: '#000000',
                fontSize:16
            },
            data:['广告数量','浏览数量']
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: data_ad.date
        },
        yAxis: {
            type: 'value',
            minInterval:'1'
        },
        tooltip : {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }   
            }
        },
        series: [{
            name:'广告数量',
            data: data_ad.value,
            type: 'line',
            smooth: true,
            symbol:'circle',
            lineStyle:{
                color:'#9e80fc'
            },
            itemStyle: { 
                color: '#9e80fc',
            }
        },
        {
            name:'浏览数量',
            data: data_ad.videoviews,
            type: 'line',
            smooth: true,
            symbol:'circle',
            lineStyle:{
                color:'#ff7a8b'
            },
            itemStyle: { 
                color: '#ff7a8b',
            }
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    echarts_ad.setOption(echarts_ad_option);    
    


    /* ajax */
    function getData(request_data){
        $.ajax({
            url:'/admin/main/getdata.html',
            type:'POST',
            data:request_data,
            dataType:'json',
            success:function(data){
                var code=data.code;
                var info=data.msg;
                if(code!=1){
                    alert(info);
                    //parent.location.reload();
                    return !1;
                }
                
                var action=request_data.action;
                switch(action){
                    case '1':
                        /* 基本指标 */
                        $(".basic_list li.newusers .basic_list_n span").text(info.newusers);
                        $(".basic_list li.launches .basic_list_n span").text(info.launches);
                        $(".basic_list li.durations .basic_list_n span").text(info.durations);
                        $(".basic_list li.activityusers .basic_list_n span").text(info.activeusers);
                        //$(".basic_list li.users_total .basic_list_n span").text(info.nums);
                        break;
                    case '2':
                        /* 七天数据 */
                        echarts_week_option.xAxis.data=[];
                        echarts_week_option.series[0].data=[];
                        echarts_week.setOption(echarts_week_option);    
                        break;
                    case '3':
                        /* 广告数据 */
                        echarts_ad_option.xAxis.data=info.date;
                        echarts_ad_option.series[0].data=info.value;
                        echarts_ad_option.series[1].data=info.videoviews;
                        echarts_ad.setOption(echarts_ad_option);    
                        break;
                }
            },
            error:function(){
                
            }
        })
    }

   
    $(".search").click(function(){
        var _this=$(this);
        var start_time=_this.parents('.bd_title').find("input[name=start_time]").val();
        var end_time=_this.parents('.bd_title').find("input[name=end_time]").val();

        var action=_this.parents('.bd_title').find(".action").val();


        var request_data={action:action,start_time:start_time,end_time:end_time};
        getData(request_data);
    })

    
    $(".export").click(function(){
        var _this=$(this);

        var action=_this.parents('.bd_title').find(".action").val();
        var start_time=_this.parents('.bd_title').find("input[name=start_time]").val();
        var end_time=_this.parents('.bd_title').find("input[name=end_time]").val();


        location.href='/admin/main/export.html&action='+action+'&start_time='+start_time+'&end_time='+end_time;
    })
    
})()