/**
 * Created by sff on 2018/4/2.
 */
$(function(){
    //alert(2);
    // $(document).on("click",function(){
    //     $(".btn-hamburger").hide();
    // })
    // document.querySelector('.js-slideout-toggle').addEventListener('click', function() {
    //     slideout.toggle();
    // });

    // document.querySelector('.menu').addEventListener('click', function(eve) {
    //     if (eve.target.nodeName === 'A') { slideout.close(); }
    // });
    var topChar1 = echarts.init(document.getElementById('topChar1'));
    // 指定图表的配置项和数据
    var seriesLabel = {
        normal: {
            show: true,
            position: 'right',
            //textBorderColor: '#333',
            // textBorderWidth: 2
        }
    };

    var topOption1 = {
        grid: {
            left: '3%',
            right: '3%',
            top: '5%',
            bottom: '5%',
            containLabel: true
        },
        color: ['#65fbe3'],
        tooltip: {
            formatter:'{b}\n{c}%'
        },

        xAxis: {
            data: ["网销1组","网销2组","网销3组","网销4组","网销5组"],
            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;  
                     }  
                 }  
             } 
            
        },
        yAxis: {
            axisLine:{
                lineStyle:{
                    color:'#fff',
                    width:1
                }
            }
            
        },
        series: [{
            name: '',
            type: 'bar',
            data: [46, 26, 33, 39, 32],
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        position: 'top',
                    }
                }
            },
        }]
    };

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


    var topChar2 = echarts.init(document.getElementById('topChar2'));
    // 指定图表的配置项和数据
    var topOption2 = {
        grid: {
            left: '3%',
            right: '3%',
            top: '5%',
            bottom: '5%',
            containLabel: true
        },
        color: ['#65fbe3'],
        tooltip: {
            formatter:'{b}\n{c}%'
        },

        xAxis: {
            data: ["网销1组","网销2组","网销3组","网销4组","网销5组"],
            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;  
                     }  
                 }  
             } 
            
        },
        yAxis: {
            axisLine:{
                lineStyle:{
                    color:'#fff',
                    width:1
                }
            },
            max:200,
            min:0,
            
        },
        series: [{
            name: '',
            type: 'bar',
            data: [180, 126, 160, 110, 100],
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        position: 'top',
                    }
                }
            },
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    topChar2.setOption(topOption2);

    // 基于准备好的dom，初始化echarts实例
    var chart1 = echarts.init(document.getElementById('chart1'));
    // 指定图表的配置项和数据
    var option1 = {
        grid: {
            x:55,
            y:0,
            x2:15,
            y2:30,
            borderWidth:1
        },
        color: ['#66e0ff'],
        tooltip: {
            formatter:'{b}\n{c}%'　　　　//这是关键，在需要的地方加上就行了
        },

        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: [5,10,20,30,40,50,60,70,80,90,5,10,20,30,40,50,60,70,80,90],
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        position: 'right',
                        // formatter: '{c}%'　　　　//这是关键，在需要的地方加上就行了
                    }
                }
            },
        }],
    };
    // 使用刚指定的配置项和数据显示图表。
    chart1.setOption(option1);


    var chart2 = echarts.init(document.getElementById('chart2'));
    // 指定图表的配置项和数据
    var option2 = {
        grid: {
            x:10,
            y:0,
            x2:10,
            y2:15,
            containLabel: true
        },
        color: ['#65fbe3'],
        tooltip: {
            formatter:'{b}\n{c}%'　　　　//这是关键，在需要的地方加上就行了
        },

        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: [5,10,20,30,40,50,60,70,80,90,5,10,20,30,40,50,60,70,80,90],
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        position: 'right',
                        formatter: '{c}%'　　　　//这是关键，在需要的地方加上就行了
                    }
                }
            },
        }],

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

    

    $(".menu-section-list li").click(function(){
        alert(1);
    })
})