/**
 * 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);
    var galleryThumbs = new Swiper('.gallery-thumbs', {
        spaceBetween: 0,
        slidesPerView: 4,
        loop: false,
        freeMode: true,
        loopedSlides: 4, //looped slides should be the same
        watchSlidesVisibility: true,
        watchSlidesProgress: true,
        preventClicksPropagation : false,
        on: {
            init: function(){
                // loop1
                var dom = document.getElementById("loop1");
                var myChart = echarts.init(dom);
                var app = {};
                option = null;
                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow',
                            crossStyle: {
                                color: '#ffffff'
                            }
                        }
                    },
                    grid: {
                        left: '5%',
                        right: '5%',
                        top: '5%',
                        bottom: '5%',
                        containLabel: true
                    },
                    color: ['#85e6ff','#fff100','#fcdd7f'],
                    toolbox: {
                        feature: {
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: ['line', 'bar']},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        },
                        show: false
                    },
                    legend: {
                        data: [ '月营收', '满意度'],
                        show: false
                    },
                    xAxis: [
                        {
                            type: 'category',
                            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'],
                            axisPointer: {
                                type: 'shadow'
                            },
                            axisLine:{
                                lineStyle:{
                                    color:'#fff',
                                    width:1
                                }
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '月营收',
                            min: 0,
                            max: 25,
                            interval: 5,
                            axisLabel: {
                                formatter: '{value} W'
                            },
                            axisLine:{
                                lineStyle:{
                                    color:'#fff',
                                    width:1
                                }
                            }
                        },
                        {
                            type: 'value',
                            name: '满意度',
                            min: 0,
                            max: 100,
                            interval: 20,
                            axisLabel: {
                                formatter: '{value} %'
                            },
                            axisLine:{
                                lineStyle:{
                                    color:'#fff',
                                    width:1
                                }
                            }
                        }
                    ],
                    series: [
                        {
                            name: '月营收',
                            type: 'bar',
                            data: [2.6, 5.9, 9.0, 21.4, 23.7, 20.7, 17.6, 12.2, 8.7, 18.8, 6.0, 2.6, 5.9, 9.0, 21.4, 23.7,2.6, 5.9, 9.0, 21.4, 23.7, 20.7, 17.6, 12.2, 8.7, 18.8, 20.7, 17.6, 12.2, 8.7, 18.8,]
                        },
                        {
                            name: '满意度',
                            type: 'line',
                            yAxisIndex: 1,
                            data: [40.0, 82.2, 73.3, 64.5, 40.0, 82.2, 73.3, 64.5, 86.3, 90.2, 90.3, 93.4, 73.0, 96.5, 86.3, 90.2, 90.3, 93.4, 40.0, 82.2, 73.3, 64.5, 86.3, 90.2, 90.3, 93.4, 73.0, 96.5, 73.0, 96.5, 92.0, 96.2]
                        }
                    ]
                };
                myChart.setOption(option, true);


                // loop2
                var dom = document.getElementById("loop2");
                var myChart = echarts.init(dom);
                var app = {};
                option = null;
                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow',
                            crossStyle: {
                                color: '#ffffff'
                            }
                        }
                    },
                    grid: {
                        left: '5%',
                        right: '5%',
                        top: '5%',
                        bottom: '5%',
                        containLabel: true
                    },
                    color: ['#fcdd7f','#00ffd6','#fcdd7f'],
                    toolbox: {
                        feature: {
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: ['line', 'bar']},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        },
                        show: false
                    },
                    legend: {
                        data: [ '实收业绩', '达成率'],
                        show: false
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['网销', '爱婴', '门店', '市场', '旅拍', '微电影'],
                            axisPointer: {
                                type: 'shadow'
                            },
                            axisLine:{
                                lineStyle:{
                                    color:'#fff',
                                    width:1
                                }
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '实收业绩',
                            min: 0,
                            max: 25,
                            interval: 5,
                            axisLabel: {
                                formatter: '{value} W'
                            },
                            axisLine:{
                                lineStyle:{
                                    color:'#fff',
                                    width:1
                                }
                            }
                        },
                        {
                            type: 'value',
                            name: '达成率',
                            min: 0,
                            max: 100,
                            interval: 20,
                            axisLabel: {
                                formatter: '{value} %'
                            },
                            axisLine:{
                                lineStyle:{
                                    color:'#fff',
                                    width:1
                                }
                            }
                        }
                    ],
                    series: [
                        {
                            name: '实收业绩',
                            type: 'bar',
                            data: [2.6, 5.9, 9.0, 21.4, 23.7, 20.7]
                        },
                        {
                            name: '达成率',
                            type: 'bar',
                            yAxisIndex: 1,
                            data: [40.0, 82.2, 73.3, 64.5, 40.0, 82.2]
                        }
                    ]
                };
                myChart.setOption(option, true);



                // loop3
                var dom = document.getElementById("loop3");
                var myChart = echarts.init(dom);
                var app = {};
                option = null;
                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow',
                            crossStyle: {
                                color: '#ffffff'
                            }
                        }
                    },
                    grid: {
                        left: '5%',
                        right: '5%',
                        top: '5%',
                        bottom: '5%',
                        containLabel: true
                    },
                    color: ['#85e6ff','#fff100','#fcdd7f'],
                    toolbox: {
                        feature: {
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: ['bar', 'bar']},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        },
                        show: false
                    },
                    legend: {
                        data: [ '月营收', '满意度'],
                        show: false
                    },
                    xAxis: [
                        {
                            type: 'category',
                            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'],
                            axisPointer: {
                                type: 'shadow'
                            },
                            axisLine:{
                                lineStyle:{
                                    color:'#fff',
                                    width:1
                                }
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '月营收',
                            min: 0,
                            max: 25,
                            interval: 5,
                            axisLabel: {
                                formatter: '{value} W'
                            },
                            axisLine:{
                                lineStyle:{
                                    color:'#fff',
                                    width:1
                                }
                            }
                        },
                        {
                            type: 'value',
                            name: '满意度',
                            min: 0,
                            max: 100,
                            interval: 20,
                            axisLabel: {
                                formatter: '{value} %'
                            },
                            axisLine:{
                                lineStyle:{
                                    color:'#fff',
                                    width:1
                                }
                            }
                        }
                    ],
                    series: [
                        {
                            name: '月营收',
                            type: 'bar',
                            data: [2.6, 5.9, 9.0, 21.4, 23.7, 20.7, 17.6, 12.2, 8.7, 18.8, 6.0, 2.6, 5.9, 9.0, 21.4, 23.7,2.6, 5.9, 9.0, 21.4, 23.7, 20.7, 17.6, 12.2, 8.7, 18.8, 20.7, 17.6, 12.2, 8.7, 18.8,]
                        },
                        {
                            name: '满意度',
                            type: 'line',
                            yAxisIndex: 1,
                            data: [40.0, 82.2, 73.3, 64.5, 40.0, 82.2, 73.3, 64.5, 86.3, 90.2, 90.3, 93.4, 73.0, 96.5, 86.3, 90.2, 90.3, 93.4, 40.0, 82.2, 73.3, 64.5, 86.3, 90.2, 90.3, 93.4, 73.0, 96.5, 73.0, 96.5, 92.0, 96.2]
                        }
                    ]
                };
                myChart.setOption(option, true);

                // loop4a
                var dom = document.getElementById("loop4a");
                var myChart = echarts.init(dom);
                var app = {};
                option = null;
                option = {
                    title: {
                        text: '当日预约排控率',
                        subtext: '当日预约排控率',
                        left: 'center',
                        show: false
                    },
                    textStyle:{
                        color:'#fff',
                        fontSize: 18
                    },
                    color: ['#285d8d','#62c9e4'],
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['', ''],
                        show: false
                    },
                    series: [
                        {
                            name: '当日预约排控率',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '50%'],
                            data: [
                                {value: 35, name: '35'},
                                {value: 310, name: '310'}
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                myChart.setOption(option, true);

                // loop4b
                var dom = document.getElementById("loop4b");
                var myChart = echarts.init(dom);
                var app = {};
                option = null;
                option = {
                    title: {
                        text: '当日选片排控率',
                        subtext: '当日选片排控率',
                        left: 'center',
                        show: false
                    },
                    textStyle:{
                        color:'#fff',
                        fontSize: 18
                    },
                    color: ['#285d8d','#62c9e4'],
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['', ''],
                        show: false
                    },
                    series: [
                        {
                            name: '当日选片排控率',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '50%'],
                            data: [
                                {value: 35, name: '35'},
                                {value: 310, name: '310'}
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                myChart.setOption(option, true);

                // loop4c
                var dom = document.getElementById("loop4c");
                var myChart = echarts.init(dom);
                var app = {};
                option = null;
                option = {
                    title: {
                        text: '本月目标',
                        subtext: '本月目标',
                        left: 'center',
                        show: false
                    },
                    textStyle:{
                        color:'#fff',
                        fontSize: 18
                    },
                    color: ['#285d8d','#62c9e4'],
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['', ''],
                        show: false
                    },
                    series: [
                        {
                            name: '本月目标',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '50%'],
                            data: [
                                {value: 200000, name: '200000'},
                                {value: 3100000, name: '3100000'}
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                myChart.setOption(option, true);

                // loop4d
                var dom = document.getElementById("loop4d");
                var myChart = echarts.init(dom);
                var app = {};
                option = null;
                option = {
                    title: {
                        text: '年度目标',
                        subtext: '年度目标',
                        left: 'center',
                        show: false
                    },
                    textStyle:{
                        color:'#fff',
                        fontSize: 18
                    },
                    color: ['#285d8d','#62c9e4'],
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['', ''],
                        show: false
                    },
                    series: [
                        {
                            name: '年度目标',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '50%'],
                            data: [
                                {value: 400000, name: '400000'},
                                {value: 3100000, name: '3100000'}
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                myChart.setOption(option, true);

                
                // loop5
                var dom = document.getElementById("loop5");
                var myChart = echarts.init(dom);
                var option = {
                    color: ['#00f3e1', '#f80e6f', '#c25b5c', '#ffe417', '#665cd3', '#0162e2'],
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    textStyle: {
                        fontWeight: 600,
                        fontSize: 14
                    },
                    legend: {
                        orient: 'vertical',
                        right: '30',
                        top: '60',
                        data: ['网销：27.6%', '体验：14.1%', '回客：17.4%', '转介绍：17.2%', '套系：10.3%', '爱婴：6.9%'],
                        textStyle: {
                            fontWeight: 300,
                            fontSize: 14,    //文字的字体大小
                            color: '#fff'//文字的字体颜色
                        }
                    },
                    series: [
                        {
                            name: '订单来源分析',
                            type: 'pie',
                            radius: [30, 110],
                            center: ['35%', '48%'],
                            roseType: 'area',
                            data: [
                                {value: 27.6, name: '网销：27.6%'},
                                {value: 24.1, name: '体验：14.1%'},
                                {value: 17.4, name: '回客：17.4%'},
                                {value: 17.2, name: '转介绍：17.2%'},
                                {value: 10.3, name: '套系：10.3%'},
                                {value: 6.9, name: '爱婴：6.9%'}
                            ]
                        }
                    ]
                };

                myChart.setOption(option, true);


                // loop6
                var dom = document.getElementById("loop6");
                var myChart = echarts.init(dom);
                var option = {
                    color: ['#00f3e1', '#f80e6f', '#c25b5c', '#ffe417', '#665cd3', '#0162e2'],
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    textStyle: {
                        fontWeight: 600,
                        fontSize: 14
                    },
                    legend: {
                        orient: 'vertical',
                        right: '30',
                        top: '60',
                        data: ['1w以下：27.6%', '1W-2W：14.1%', '2W-4W：17.4%', '4W-6W：17.2%', '6W-8W：10.3%', '8W-10W：6.9%'],
                        textStyle: {
                            fontWeight: 300,
                            fontSize: 14,    //文字的字体大小
                            color: '#fff'//文字的字体颜色
                        }
                    },
                    series: [
                        {
                            name: '价格区间分析',
                            type: 'pie',
                            radius: [30, 110],
                            center: ['35%', '48%'],
                            roseType: 'area',
                            data: [
                                {value: 27.6, name: '1w以下：27.6%'},
                                {value: 24.1, name: '1W-2W：14.1%'},
                                {value: 17.4, name: '2W-4W：17.4%'},
                                {value: 17.2, name: '4W-6W：17.2%'},
                                {value: 10.3, name: '6W-8W：10.3%'},
                                {value: 6.9, name: '8W-10W：6.9%'}
                            ]
                        }
                    ]
                };

                myChart.setOption(option, true);


                // loop9
                var dom = document.getElementById("loop9");
                var myChart = echarts.init(dom);
                var app = {};
                option = null;
                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow',
                            crossStyle: {
                                color: '#ffffff'
                            }
                        }
                    },
                    grid: {
                        left: '5%',
                        right: '5%',
                        top: '10%',
                        bottom: '5%',
                        containLabel: true
                    },
                    color: ['#fcdd7f','#00ffd6'],
                    toolbox: {
                        feature: {
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: ['line', 'bar']},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        },
                        show: false
                    },
                    legend: {
                        data: [ '实收业绩', '转换率'],
                        show: true,
                        textStyle: {
                            fontWeight: 300,
                            fontSize: 14,    //文字的字体大小
                            color: '#fff'//文字的字体颜色
                        }
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['儿童网付组', '笑笑组', '新人组', '叶子组', '秋明旭', '张海纳组'],
                            axisPointer: {
                                type: 'shadow'
                            },
                            axisLine:{
                                lineStyle:{
                                    color:'#fff',
                                    width:1
                                }
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '实收业绩',
                            min: 0,
                            max: 25,
                            interval: 5,
                            axisLabel: {
                                formatter: '{value} W'
                            },
                            axisLine:{
                                lineStyle:{
                                    color:'#fff',
                                    width:1
                                }
                            }
                        },
                        {
                            type: 'value',
                            name: '达成率',
                            min: 0,
                            max: 100,
                            interval: 20,
                            axisLabel: {
                                formatter: '{value} %'
                            },
                            axisLine:{
                                lineStyle:{
                                    color:'#fff',
                                    width:1
                                }
                            }
                        }
                    ],
                    series: [
                        {
                            name: '实收业绩',
                            type: 'bar',
                            data: [2.6, 5.9, 9.0, 21.4, 23.7, 20.7]
                        },
                        {
                            name: '转换率',
                            type: 'bar',
                            yAxisIndex: 1,
                            data: [40.0, 82.2, 73.3, 64.5, 40.0, 82.2]
                        },
                        {
                            name: '达成率',
                            type: 'bar',
                            data: [2.6, 5.9, 9.0, 21.4, 23.7, 20.7]
                        },
                    ]
                };
                myChart.setOption(option, true);



                //loop10
                var dom = document.getElementById("loop10");
                var myChart = echarts.init(dom);
                var app = {};
                option = null;
                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow',
                            crossStyle: {
                                color: '#fff'
                            },
                        },
                        show: true
                    },
                    grid: {
                        left: '3%',
                        right: '0',
                        top: '10%',
                        bottom: '5%',
                        containLabel: true
                    },
                    color: ['#fcdd7f','#00ffd6','#fcdd7f'],
                    toolbox: {
                        feature: {
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: ['line', 'bar']},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        },
                        show: false
                    },
                    legend: {
                        data: [ '毛客资', '有效客资'],
                        show: true,
                        textStyle: {
                            fontWeight: 300,
                            fontSize: 14,    //文字的字体大小
                            color: '#fff'//文字的字体颜色
                        }
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['抖音', '微信', '平台类', '自媒体微信', '外包', '百度', '自媒体快手', '其它', '360', '神马', '微博', '小红书', '搜狗', '今日头条', '婚嫁114', '广点通', '快手', '百合网', '有榜网', '自媒体抖音'],
                            axisPointer: {
                                type: 'shadow'
                            },
                            'axisLabel':{'interval':0},
                            axisLine:{
                                lineStyle:{
                                    color:'#fff',
                                    width:1
                                }
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '毛客资',
                            min: 0,
                            max: 500,
                            interval: 100,
                            axisLabel: {
                                formatter: '{value} W'
                            },
                            axisLine:{
                                lineStyle:{
                                    color:'#fff',
                                    width:1
                                }
                            }
                        },
                        {
                            type: 'value',
                            name: '有效客资',
                            min: 0,
                            max: 100,
                            interval: 20,
                            axisLabel: {
                                formatter: '{value} %'
                            },
                            axisLine:{
                                lineStyle:{
                                    color:'#fff',
                                    width:1
                                }
                            },
                            show: false
                        }
                    ],
                    series: [
                        {
                            name: '毛客资',
                            type: 'bar',
                            data: [2.6, 5.9, 9.0, 21.4, 23.7, 20.7, 5.9, 9.0, 21.4, 23.7, 20.7, 5.9, 9.0, 21.4, 23.7, 20.7, 5.9, 9.0, 21.4, 23.7]
                        },
                        {
                            name: '有效客资',
                            type: 'bar',
                            yAxisIndex: 1,
                            data: [40.0, 82.2, 73.3, 64.5, 40.0, 82.2, 82.2, 73.3, 64.5, 40.0, 82.2, 82.2, 73.3, 64.5, 40.0, 82.2, 82.2, 73.3, 64.5, 40.0]
                        }
                    ]
                };
                myChart.setOption(option, true);
                

                // loop11
                var dom = document.getElementById("loop11");
                var myChart = echarts.init(dom);
                var app = {};
                option = null;
                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow',
                            crossStyle: {
                                color: '#fff'
                            },
                        },
                        formatter:'{b}\n{c}%',　　　　//这是关键，在需要的地方加上就行了
                        show: true
                    },
                    grid: {
                        left: '5%',
                        right: '8%',
                        top: '3%',
                        bottom: '5%',
                        containLabel: true
                    },
                    visualMap: {
                        orient: 'horizontal',
                        left: 'center',
                        min: 10,
                        max: 100,
                        text: ['High Score', 'LowHigh Score'],
                        // Map the score column to color
                        dimension: 0,
                        inRange: {
                            color: ['#ffaf74', '#65fbe3', '#ffae95', '#85e6ff', '#65fbe3', '#ffaf74']
                        },
                        show: false
                    },

                    yAxis: {
                    data: ['张海娜组', '邱明轩组', '叶子组', '新人组', '笑笑组', '儿童网付组',  ],
                    axisLine:{
                        lineStyle:{
                            color:'#fff',
                            width:1
                        }
                    },
                    axisLabel: {  
                         interval: 0, 
                         // rotate: 20, 
                         formatter:function(value)  
                            {  
                                var ret = "";//拼接加\n返回的类目项  
                                var maxLength = 4;//每项显示文字个数  
                                var valLength = value.length;//X轴类目项的文字个数  
                                var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数  
                                if (rowN > 1)//如果类目项的文字大于3,  
                                {  
                                    for (var i = 0; i < rowN; i++) {  
                                        var temp = "";//每次截取的字符串  
                                        var start = i * maxLength;//开始截取的位置  
                                        var end = start + maxLength;//结束截取的位置  
                                        //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧  
                                        temp = value.substring(start, end) + "\n";  
                                        ret += temp; //凭借最终的字符串  
                                    }  
                                    return ret;  
                                }  
                                else {  
                                     return value;  
                                }  
                             }  
                         }
                    
                    },
                    xAxis: {
                        axisLine:{
                            lineStyle:{
                                color:'#fff',
                                width:1
                            }
                        }
                        
                    },
                    series: [{
                        name: '',
                        type: 'bar',
                        data: [10,30,40,70,80,90],
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    position: 'right',
                                    formatter: '{c}%'　　　　//这是关键，在需要的地方加上就行了
                                }
                            }
                        },
                        barWidth : 30,//柱图宽度
                    }],

                };
                myChart.setOption(option, true);


                // loop12
                var dom = document.getElementById("loop12");
                var myChart = echarts.init(dom);
                var app = {};
                option = null;
                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow',
                            crossStyle: {
                                color: '#fff'
                            },
                        },
                        formatter:'{b}\n{c}%',　　　　//这是关键，在需要的地方加上就行了
                        show: true
                    },
                    grid: {
                        left: '5%',
                        right: '8%',
                        top: '3%',
                        bottom: '5%',
                        containLabel: true
                    },
                    visualMap: {
                        orient: 'horizontal',
                        left: 'center',
                        min: 10,
                        max: 100,
                        text: ['High Score', 'LowHigh Score'],
                        // Map the score column to color
                        dimension: 0,
                        inRange: {
                            color: ['#ffaf74', '#65fbe3', '#ffae95', '#85e6ff', '#65fbe3', '#ffaf74']
                        },
                        show: false
                    },

                    yAxis: {
                    data: ['张海娜组', '邱明轩组', '叶子组', '新人组', '笑笑组', '儿童网付组',  ],
                    axisLine:{
                        lineStyle:{
                            color:'#fff',
                            width:1
                        }
                    },
                    axisLabel: {  
                         interval: 0, 
                         // rotate: 20, 
                         formatter:function(value)  
                            {  
                                var ret = "";//拼接加\n返回的类目项  
                                var maxLength = 4;//每项显示文字个数  
                                var valLength = value.length;//X轴类目项的文字个数  
                                var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数  
                                if (rowN > 1)//如果类目项的文字大于3,  
                                {  
                                    for (var i = 0; i < rowN; i++) {  
                                        var temp = "";//每次截取的字符串  
                                        var start = i * maxLength;//开始截取的位置  
                                        var end = start + maxLength;//结束截取的位置  
                                        //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧  
                                        temp = value.substring(start, end) + "\n";  
                                        ret += temp; //凭借最终的字符串  
                                    }  
                                    return ret;  
                                }  
                                else {  
                                     return value;  
                                }  
                             }  
                         }
                    
                    },
                    xAxis: {
                        axisLine:{
                            lineStyle:{
                                color:'#fff',
                                width:1
                            }
                        }
                        
                    },
                    series: [{
                        name: '',
                        type: 'bar',
                        data: [10,30,40,70,80,90],
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    position: 'right',
                                    formatter: '{c}%'　　　　//这是关键，在需要的地方加上就行了
                                }
                            }
                        },
                        barWidth : 30,//柱图宽度
                    }],

                };
                myChart.setOption(option, true);


                // loop14
                var dom = document.getElementById("loop14");
                var myChart = echarts.init(dom);
                var option = {
                    color: ['#85e6ff', '#00ffd6', '#ffdb5c'],
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    textStyle: {
                        fontWeight: 600,
                        fontSize: 14
                    },
                    legend: {
                        // orient: 'vertical',
                        left: 'center',
                        top: '80%',
                        data: ['男生：50%', '女生：30%', '未知：20%'],
                        textStyle: {
                            fontWeight: 300,
                            fontSize: 14,    //文字的字体大小
                            color: '#fff'//文字的字体颜色
                        }
                    },
                    series: [
                        {
                            name: '订单来源分析',
                            type: 'pie',
                            radius: [30, 110],
                            center: ['50%', '35%'],
                            roseType: 'area',
                            data: [
                                {value: 500, name: '男生：50%'},
                                {value: 300, name: '女生：30%'},
                                {value: 200, name: '未知：20%'}
                            ]
                        }
                    ]
                };

                myChart.setOption(option, true);




                // loop15
                var dom = document.getElementById("loop15");
                var myChart = echarts.init(dom);
                var option = {
                    color: ['#85e6ff', '#ffaf74', '#00ffd6', '#ffdb5c'],
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    textStyle: {
                        fontWeight: 600,
                        fontSize: 14
                    },
                    legend: {
                        // orient: 'vertical',
                        left: 'center',
                        top: '80%',
                        data: ['25以下：50%', '25~30：30%', '30~35：10%', '35及以上：10%'],
                        textStyle: {
                            fontWeight: 300,
                            fontSize: 14,    //文字的字体大小
                            color: '#fff'//文字的字体颜色
                        }
                    },
                    series: [
                        {
                            name: '订单来源分析',
                            type: 'pie',
                            radius: [30, 110],
                            center: ['50%', '35%'],
                            roseType: 'area',
                            data: [
                                {value: 500, name: '25以下：50%'},
                                {value: 300, name: '25~30：30%'},
                                {value: 100, name: '30~35：10%'},
                                {value: 100, name: '35及以上：10%'}
                            ]
                        }
                    ]
                };

                myChart.setOption(option, true);




                // loop16
                var dom = document.getElementById("loop16");
                var myChart = echarts.init(dom);
                var option = {
                    color: ['#85e6ff', '#ffaf74', '#00ffd6', '#ffdb5c'],
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    textStyle: {
                        fontWeight: 600,
                        fontSize: 14
                    },
                    legend: {
                        // orient: 'vertical',
                        left: 'center',
                        top: '80%',
                        data: ['转正1～3年：35%', '试用：20%', '转正1年内：25%', '转正3年以上:20%'],
                        textStyle: {
                            fontWeight: 300,
                            fontSize: 14,    //文字的字体大小
                            color: '#fff'//文字的字体颜色
                        }
                    },
                    series: [
                        {
                            name: '订单来源分析',
                            type: 'pie',
                            radius: [30, 110],
                            center: ['50%', '35%'],
                            roseType: 'area',
                            data: [
                                {value: 500, name: '转正1～3年：35%'},
                                {value: 300, name: '试用：20%'},
                                {value: 200, name: '转正1年内：25%'},
                                {value: 200, name: '转正3年以上:20%'}
                            ]
                        }
                    ]
                };

                myChart.setOption(option, true);




                // loop17
                var dom = document.getElementById("loop17");
                var myChart = echarts.init(dom);
                var option = {
                    color: ['#85e6ff', '#ffaf74', '#00ffd6', '#ffdb5c'],
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    textStyle: {
                        fontWeight: 600,
                        fontSize: 14
                    },
                    legend: {
                        // orient: 'vertical',
                        left: 'center',
                        top: '80%',
                        data: ['专业类：35%', '职能类：20%', '经营类：25%', '技术支持类:20%'],
                        textStyle: {
                            fontWeight: 300,
                            fontSize: 14,    //文字的字体大小
                            color: '#fff'//文字的字体颜色
                        }
                    },
                    series: [
                        {
                            name: '订单来源分析',
                            type: 'pie',
                            radius: [30, 110],
                            center: ['50%', '35%'],
                            roseType: 'area',
                            data: [
                                {value: 500, name: '专业类：35%'},
                                {value: 300, name: '职能类：20%'},
                                {value: 200, name: '经营类：25%'},
                                {value: 200, name: '技术支持类:20%'}
                            ]
                        }
                    ]
                };

                myChart.setOption(option, true);





                // loop18
                var dom = document.getElementById("loop18");
                var myChart = echarts.init(dom);
                var option = {
                    color: ['#8378ea', '#e7bcf3', '#fb7293', '#ffaf74', '#ffdb5c', '#9fe6b8', '#32c5e9', '#37a2da', '#00ffd6', '#0072ff'],
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    textStyle: {
                        fontWeight: 600,
                        fontSize: 14
                    },
                    legend: {
                        // orient: 'vertical',
                        left: 'center',
                        top: '75%',
                        data: ['博士后：10%','博士：10%','硕士：10%','本科：10%','大专：10%','高职：10%','技校：10%','中专：10%','高中：10%','初中及以下：10%'],
                        textStyle: {
                            fontWeight: 300,
                            fontSize: 14,    //文字的字体大小
                            color: '#fff'//文字的字体颜色
                        }
                    },
                    series: [
                        {
                            name: '订单来源分析',
                            type: 'pie',
                            radius: [30, 110],
                            center: ['50%', '35%'],
                            roseType: 'area',
                            data: [
                                {value: 10, name: '博士后：10%'},
                                {value: 10, name: '博士：10%'},
                                {value: 10, name: '硕士：10%'},
                                {value: 10, name: '本科：10%'},
                                {value: 10, name: '大专：10%'},
                                {value: 10, name: '高职：10%'},
                                {value: 10, name: '技校：10%'},
                                {value: 10, name: '中专：10%'},
                                {value: 10, name: '高中：10%'},
                                {value: 10, name: '初中及以下：10%'}
                            ]
                        }
                    ]
                };

                myChart.setOption(option, true);





                //loop19
                var dom = document.getElementById("loop19");
                var myChart = echarts.init(dom);
                var app = {};
                option = null;
                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow',
                            crossStyle: {
                                color: '#fff'
                            },
                        formatter:'{b}\n{c}%'//这是关键，在需要的地方加上就行了
                        },
                        show: true
                    },
                    grid: {
                        left: '3%',
                        right: '0',
                        top: '10%',
                        bottom: '5%',
                        containLabel: true
                    },
                    color: ['#fcdd7f','#00ffd6','#fcdd7f'],
                    toolbox: {
                        feature: {
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: ['line', 'bar']},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        },
                        show: false
                    },
                    legend: {
                        data: [ '编制人数', '员工人数'],
                        show: true,
                        textStyle: {
                            fontWeight: 300,
                            fontSize: 14,    //文字的字体大小
                            color: '#fff'//文字的字体颜色
                        }
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['北欧馆', '潮拍馆', '韩国馆', '炫酷管', '欧美馆', '轻奢馆', '高端亲子馆', '光华店', '花棉店', '小南店', '美丽孕记', '爱婴中心', '网销中心', '市场部', '客服部', '微电影', '运营中心', '利蒂希雅', '东门亲子馆', '挪威店', '新加坡馆'],
                            axisPointer: {
                                type: 'shadow'
                            },
                            axisLabel:{
                                interval: 0,
                                rotate: 20,
                                formatter:function(value)  
                                 {  
                                     var ret = "";//拼接加\n返回的类目项  
                                     var maxLength = 4;//每项显示文字个数  
                                     var valLength = value.length;//X轴类目项的文字个数  
                                     var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数  
                                     if (rowN > 1)//如果类目项的文字大于3,  
                                     {  
                                         for (var i = 0; i < rowN; i++) {  
                                             var temp = "";//每次截取的字符串  
                                             var start = i * maxLength;//开始截取的位置  
                                             var end = start + maxLength;//结束截取的位置  
                                             //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧  
                                             temp = value.substring(start, end) + "\n";  
                                             ret += temp; //凭借最终的字符串  
                                         }  
                                         return ret;  
                                     }  
                                     else {  
                                         return value;  
                                     }  
                                 } 
                            },
                            axisLine:{
                                lineStyle:{
                                    color:'#fff',
                                    width:1
                                }
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '编制人数',
                            min: 0,
                            max: 100,
                            interval: 20,
                            axisLabel: {
                                formatter: '{value} '
                            },
                            axisLine:{
                                lineStyle:{
                                    color:'#fff',
                                    width:1
                                }
                            }
                        },
                        {
                            type: 'value',
                            name: '员工人数',
                            min: 0,
                            max: 100,
                            interval: 20,
                            axisLabel: {
                                formatter: '{value} ',
                            },
                            axisLine:{
                                lineStyle:{
                                    color:'#fff',
                                    width:1
                                }
                            },
                            show: false
                        }
                    ],
                    series: [
                        {
                            name: '编制人数',
                            type: 'bar',
                            data: [26, 59, 90, 24, 27, 20, 59, 90, 21, 23, 20, 59, 95, 21, 23, 27, 50, 90, 21, 27, 24],
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        position: 'top',
                                        // formatter: '{b}\n{c}%'　　　　//这是关键，在需要的地方加上就行了
                                    }
                                }
                            }
                        },
                        {
                            name: '员工人数',
                            type: 'bar',
                            yAxisIndex: 1,
                            data: [40, 82, 73, 65, 40, 81, 80, 79, 66, 43, 90, 82, 73, 65, 40, 80, 82, 73, 64, 40, 21],
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        position: 'top',
                                        // formatter: '{b}\n{c}%'　　　　//这是关键，在需要的地方加上就行了
                                    }
                                }
                            }
                        }
                    ]
                };
                myChart.setOption(option, true);


            }, 

            //获取点击内容的索引
            click: function(){
                this.active = this.realIndex;
                alert(galleryTop.activeIndex)
            },
        },
    });

    var galleryTop = new Swiper('.gallery-top', {
        spaceBetween: 10,
        loop: false,
        // direction: 'vertical',
        // effect : 'fade',
        speed: 1000,
        loopedSlides: 4, //looped slides should be the same
        thumbs: {
            swiper: galleryThumbs,
            },
    });

    // layui方法
    layui.use(['form', 'layedit', 'laydate', 'table'], function(){
        var form = layui.form
        ,laydate = layui.laydate

        laydate.render({
        elem: '#loop1dateStar'
        });

        laydate.render({
        elem: '#loop1dateEnd'
        });

        laydate.render({
        elem: '#loop5dateStar'
        });

        laydate.render({
        elem: '#loop5dateEnd'
        });

        laydate.render({
        elem: '#loop6dateStar'
        });

        laydate.render({
        elem: '#loop6dateEnd'
        });

        laydate.render({
        elem: '#loop7dateStar'
        });

        laydate.render({
        elem: '#loop7dateEnd'
        });

        laydate.render({
        elem: '#loop8dateStar'
        });

        laydate.render({
        elem: '#loop8dateEnd'
        });

        laydate.render({
        elem: '#loop2dateStar'
        });

        laydate.render({
        elem: '#loop2dateEnd'
        });

        laydate.render({
        elem: '#loop3dateStar'
        });

        laydate.render({
        elem: '#loop3dateEnd'
        });

        laydate.render({
        elem: '#e1dateStar'
        });

        laydate.render({
        elem: '#e1dateEnd'
        });

        laydate.render({
        elem: '#e2dateStar'
        });

        laydate.render({
        elem: '#e2dateEnd'
        });

        laydate.render({
        elem: '#e11dateStar'
        });

        laydate.render({
        elem: '#e11dateEnd'
        });

        laydate.render({
        elem: '#e12dateStar'
        });

        laydate.render({
        elem: '#e12dateEnd'
        });
  
    });
});

