/**
 * Created by sff on 2018/1/3.
 */

$(function(){
    //设置尺寸
    function setRem ()// 绑定到窗口的这个事件中
    {
        var whdef = 100/1920;// 表示1920的设计图,使用100PX的默认值
        var wH = window.innerHeight;// 当前窗口的高度
        var wW = window.innerWidth<=1920?1920:window.innerWidth;// 当前窗口的宽度
        var rem = wW * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
        $('html').css('font-size', rem + "px");
    }
    setRem ();
   $(window).resize(function(){
       setRem ();
       window.location.reload();
   });
    // 右上角时间显示
    $("#Timer").text(new Date().toLocaleString());
    setInterval(function(){
        $("#Timer").text(new Date().toLocaleString());
    },1000);
    // 基于准备好的dom，初始化echarts实例
    var topChar1 = echarts.init(document.getElementById('topChar1'));
    // 指定图表的配置项和数据
    var seriesLabel = {
        normal: {
            show: true,
            position: 'right'
            //textBorderColor: '#333',
            //textBorderWidth: 2
        }
    };

    var topOption1 = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['毛客资','有效客资','获取手机','进店','订单'],
            itemWidth: 15,
            itemHeight: 10,
            itemGap: 5,
            textStyle: {
                fontSize: 12,
                color: '#fff'
            }
        },
        grid: {
            x:'10%',
            y:'20%',
            x2:'10%',
            y2:"15%",
            borderWidth:1
        },
        xAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value}'
            },
            axisLine:{
                lineStyle:{
                    color:'#fff',
                    width:1
                }
            }
        },
        yAxis: {
            show:false,
            type: 'category'
        },
        series: [
            {
                name: '毛客资',
                type: 'bar',
                label: seriesLabel,
                data: [150],
                itemStyle:{
                    normal:{
                        color:'#ffaf74'
                    }
                }
            },
            {
                name: '有效客资',
                type: 'bar',
                label: seriesLabel,
                data: [150],
                itemStyle:{
                    normal:{
                        color:'#65fbe3'
                    }
                }
            },
            {
                name: '获取手机',
                type: 'bar',
                label: seriesLabel,
                data: [220],
                itemStyle:{
                    normal:{
                        color:'#ffae95'
                    }
                }
            },
            {
                name: '进店',
                type: 'bar',
                label: seriesLabel,
                data: [150],
                itemStyle:{
                    normal:{
                        color:'#85e6ff'
                    }
                }
            },
            {
                name: '订单',
                type: 'bar',
                label: seriesLabel,
                data: [220],
                itemStyle:{
                    normal:{
                        color:'#fcdd7f'
                    }
                }
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    topChar1.setOption(topOption1);


    var topChar2 = echarts.init(document.getElementById('topChar2'));
    // 指定图表的配置项和数据
    var topOption2 = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['毛客资','有效客资','获取手机','进店','订单'],
            itemWidth: 15,
            itemHeight: 10,
            itemGap: 5,
            textStyle: {
                fontSize: 12,
                color: '#fff'
            }
        },
        grid: {
            x:'10%',
            y:'20%',
            x2:'10%',
            y2:"15%",
            borderWidth:1
        },
        xAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value}'
            },
            axisLine:{
                lineStyle:{
                    color:'#fff',
                    width:1
                }
            }
        },
        yAxis: {
            show:false,
            type: 'category'
        },
        series: [
            {
                name: '毛客资',
                type: 'bar',
                label: seriesLabel,
                data: [150],
                itemStyle:{
                    normal:{
                        color:'#ffaf74'
                    }
                }
            },
            {
                name: '有效客资',
                type: 'bar',
                label: seriesLabel,
                data: [150],
                itemStyle:{
                    normal:{
                        color:'#65fbe3'
                    }
                }
            },
            {
                name: '获取手机',
                type: 'bar',
                label: seriesLabel,
                data: [220],
                itemStyle:{
                    normal:{
                        color:'#ffae95'
                    }
                }
            },
            {
                name: '进店',
                type: 'bar',
                label: seriesLabel,
                data: [150],
                itemStyle:{
                    normal:{
                        color:'#85e6ff'
                    }
                }
            },
            {
                name: '订单',
                type: 'bar',
                label: seriesLabel,
                data: [220],
                itemStyle:{
                    normal:{
                        color:'#fcdd7f'
                    }
                }
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    topChar2.setOption(topOption2);


    // 基于准备好的dom，初始化echarts实例
    var chart1 = echarts.init(document.getElementById('chart1'));
    // 指定图表的配置项和数据
    var option1 = {
        color: ['#66e0ff'],
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            x:'10%',
            y:'10%',
            x2:'5%',
            y2:"20%",
            borderWidth:1
        },
        xAxis:  {
            type: 'category',
            boundaryGap: false,
            data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31],
            axisLine:{
                lineStyle:{
                    color:'#fff',
                    width:1
                }
            }
        },
        yAxis: {
                type: 'value',
                max:800,
                min:0,
                axisLine:{
                    lineStyle:{
                        color:'#fff',
                        width:1
                    }
                }
        },
        series: [
            {
                name:'毛客资量',
                type:'bar',
                data:[5,100, 500,30, 800, 150, 80, 162.2, 32.6, 20.0, 6.4, 3.3,5, 100, 500,30, 800, 150, 80, 162.2, 32.6, 20.0, 6.4, 3.3,5, 100, 500,30, 800, 150]
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    chart1.setOption(option1);


    var chart2 = echarts.init(document.getElementById('chart2'));
    // 指定图表的配置项和数据
    var option2 = {
        color: ['#fcdd7f'],
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            x:'8%',
            y:'10%',
            x2:'6%',
            y2:"20%",
            borderWidth:1
        },
        xAxis:  {
            type: 'category',
            boundaryGap: false,
            data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31],
            axisLine:{
                lineStyle:{
                    color:'#fff',
                    width:1
                }
            }
        },
        yAxis: {
            type: 'value',
            max:800,
            min:0,
            axisLine:{
                lineStyle:{
                    color:'#fff',
                    width:1
                }
            }
        },
        series: [
            {
                name:'毛客资量',
                type:'bar',
                data:[5,100, 500,30, 800, 150, 80, 162.2, 32.6, 20.0, 6.4, 3.3,5, 100, 500,30, 800, 150, 80, 162.2, 32.6, 20.0, 6.4, 3.3,5, 100, 500,30, 800, 150]
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    chart2.setOption(option2);

    var chart3 = echarts.init(document.getElementById('chart3'));
    // 指定图表的配置项和数据
    var option3 = {
        color: ['#00ffd6'],
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            x:'10%',
            y:'10%',
            x2:'5%',
            y2:"20%",
            borderWidth:1
        },
        xAxis:  {
            type: 'category',
            boundaryGap: false,
            data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31],
            axisLine:{
                lineStyle:{
                    color:'#fff',
                    width:1
                }
            }
        },
        yAxis: {
            type: 'value',
            max:800,
            min:0,
            axisLine:{
                lineStyle:{
                    color:'#fff',
                    width:1
                }
            }
        },
        series: [
            {
                name:'毛客资量',
                type:'bar',
                data:[5,100, 500,30, 800, 150, 80, 162.2, 32.6, 20.0, 6.4, 3.3,5, 100, 500,30, 800, 150, 80, 162.2, 32.6, 20.0, 6.4, 3.3,5, 100, 500,30, 800, 150]
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    chart3.setOption(option3);


    var chart4 = echarts.init(document.getElementById('chart4'));
    // 指定图表的配置项和数据
    var option4 = {
        color: ['#ffae95'],
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            x:'8%',
            y:'10%',
            x2:'6%',
            y2:"20%",
            borderWidth:1
        },
        xAxis:  {
            type: 'category',
            boundaryGap: false,
            data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31],
            axisLine:{
                lineStyle:{
                    color:'#fff',
                    width:1
                }
            }
        },
        yAxis: {
            type: 'value',
            min: 0,
            max: 100,
            interval: 25,
            axisLabel: {
                formatter: '{value} %'
            },
            axisLine:{
                lineStyle:{
                    color:'#fff',
                    width:1
                }
            }
        },
        series: [
            {
                //name:'毛客资量',
                type:'line',
                data:[5,20, 30,3, 15, 30, 38, 41, 32, 45,80, 100,95, 25,18,14,84,16,40, 53, 55, 78, 65, 78,5, 100, 23,30, 80, 15]
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    chart4.setOption(option4);

//    中间右侧图表
    var kzChart = echarts.init(document.getElementById('kzChart'));
    // 指定图表的配置项和数据
    var kzOption = {
        color: ['#fcdd7f'],
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            x:'10%',
            y:'10%',
            x2:'5%',
            y2:"30%",
            borderWidth:1
        },
        xAxis:  {
            type: 'category',
            data: ['百度','搜狗','抖音','婚礼纪','哪儿拍网','婚百科','大众点评','今日头条','百度','搜狗','抖音','婚礼纪','哪儿拍网','婚百科','大众点评','今日头条','百度','搜狗','抖音','婚礼纪'],
            axisLine:{
                lineStyle:{
                    color:'#fff',
                    width:1
                }
            },
            axisLabel : {
                show:true,
                interval: 0,
                rotate:  45,
                 margin: 8

            }
        },
        yAxis: {
            type: 'value',
            axisLine:{
                lineStyle:{
                    color:'#fff',
                    width:1
                }
            }
        },
        series: [
            {
                name:'毛客资量',
                type:'bar',
                barWidth: '40%',
                data:[20,30, 80,30, 5, 100, 80, 50, 32.6, 20.0, 6.4, 3.3,5, 100, 80,30, 50, 100, 80, 60.2]
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    kzChart.setOption(kzOption);
    //    中间右侧图表
    var timeChart = echarts.init(document.getElementById('timeChart'));
    // 指定图表的配置项和数据
    var timeOption = {
        color: ['#ffae95'],
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            x:'10%',
            y:'10%',
            x2:'5%',
            y2:"30%",
            borderWidth:1
        },
        xAxis:  {
            type: 'category',
            data: ['0/12点','12/16点','16/18点','18/22点'],
            axisLine:{
                lineStyle:{
                    color:'#fff',
                    width:1
                }
            },
             axisLabel : {
                 show:true,
                 interval: 0
             }
        },
        yAxis: {
            type: 'value',
            axisLine:{
                lineStyle:{
                    color:'#fff',
                    width:1
                }
            }
        },
        series: [
            {
                name:'毛客资量',
                type:'bar',
                barWidth: '30%',
                data:[3,5,1,0.3]
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    timeChart.setOption(timeOption);

//    顶部进度条
    var pecent=0;
    var progressFn=function(){
        for(var i=0;i<$(".li-wrap").length;i++){
            pecent=($(".li-wrap").eq(i).find(".mounth-num").html()/$(".li-wrap").eq(i).find(".count-num").html()*100).toFixed(2);
            $(".li-wrap").eq(i).find(".progress-value").html(pecent+'%');
            $(".li-wrap").eq(i).find(".progress-bar").css('width',pecent>100?100+'%':pecent+'%');
        }
    };
    progressFn();
});