$(window).load(function() {
     $(".loading").fadeOut()
 })

 /****/
 $(document).ready(function() {
     var whei = $(window).width()
     $("html").css({ fontSize: whei / 20 })
     $(window).resize(function() {
         var whei = $(window).width()
         $("html").css({ fontSize: whei / 20 })
     });
 });


 
 // ***********************************************
 let myChart1 = echarts.init(document.getElementsByClassName('sycm')[0]);
 let myChart2 = echarts.init(document.getElementsByClassName('sycm')[1]);
 let myChart3 = echarts.init(document.getElementsByClassName('sycm')[2]);
 let myChart4 = echarts.init(document.getElementsByClassName('sycm')[3]);
 let myChart5 = echarts.init(document.getElementsByClassName('sycm')[4]);
 let myChart6 = echarts.init(document.getElementsByClassName('sycm')[5]);
 let myChart8 = echarts.init(document.getElementsByClassName('sycm')[7]);

 let option1 = {
     title: {
         show: false,
         subtextStyle: {
             color: '#0c84e3',
         }
     },
     tooltip: {},
     textStyle: {
         color: '#0082d2'
     },
     grid: {
         top: '10%',
         left: '15%',
         bottom: 50,
         right: '8%',
         borderColor: '#192358'
     },
     legend: {
         itemWidth: 35,
         itemHeight: 8,
         itemGap: 30,
         bottom: -5,
         textStyle: {
             padding: [8, 8]
         },
         data: [{
                 name: '实际值',
                 icon: 'rect',
                 textStyle: {
                     color: '#c7b851'
                 },
             },
             {
                 name: '目标值',
                 icon: 'rect',
                 textStyle: {
                     color: '#0c84e3'
                 },
             }
         ]
     },
     xAxis: {
         boundaryGap: ['5%', '5%'],
         splitLine: {
             lineStyle: {
                 color: '#192358'
             }
         }
     },
     yAxis: {
         name: '单位:万',
         nameGap: 8,
         data: ["第一季度", "第二季度", "第三季度", "第四季度"],
     },
     series: [{
         name: '实际值',
         type: 'bar',
         data: [1560, 1000, 1380, 4000],
         label: {
             normal: {
                 show: true,
                 formatter: function(data) {
                     return data.value / 100 + '%'
                 },
                 position: 'right',
                 color: '#fff'
             }
         },
         color: new echarts.graphic.LinearGradient(
             1, 0, 0, 0, [
                 { offset: 1, color: '#010d37' },
                 { offset: 0, color: '#c7b851' }
             ]
         )
     }, {
         name: '目标值',
         type: 'bar',
         data: [2000, 2000, 2500, 3500],
         label: {
             normal: {
                 show: true,
                 position: 'insideRight',
                 color: '#fff'
             }
         },
         color: new echarts.graphic.LinearGradient(
             1, 0, 0, 0, [
                 { offset: 1, color: '#010d37' },
                 { offset: 0, color: '#0c84e3' }
             ]
         )
     }]
 };

 let option2 = {
     tooltip: {
         show: true,
         trigger: 'axis',

     },
     textStyle: {
         color: '#0082d2'
     },
     grid: {
         top: '10%',
         left: '10%',
         bottom: 50,
         right: '10%',
         borderColor: '#192358'
     },
     legend: {
         itemWidth: 18,
         itemHeight: 10,
         itemGap: 30,
         bottom: -5,
         textStyle: {
             padding: [8, 8]
         },
         data: [{
                 name: '年度总接单数',
                 textStyle: {
                     color: '#219eec',

                 },
             },
             {
                 name: '本季接单数',
                 textStyle: {
                     color: '#3fd3e1',

                 },
             },
             {
                 name: '年度订单金额',
                 textStyle: {
                     color: '#c4b856',

                 },
             }
         ]
     },
     xAxis: {
         type: 'category',
         data: ['第一季度', '第二季度', '第三季度', '第四季度'],
         boundaryGap: false,
         axisPointer: {
             show: true,
             type: 'line'
         }
     },
     yAxis: [{
         name: '订单总数',
         nameGap: 8,
         type: 'value',
         boundaryGap: ['5%', '5%'],
         splitLine: {
             show: true,
             lineStyle: {
                 color: ['rgb(25,35,88)'],
                 width: 1,
                 type: 'solid'
             }　　
         }
     }, {
         name: '单位(千万)',
         nameGap: 8,
         type: 'value',
         axisLabel: {
             formatter: '￥{value}'
         },
         boundaryGap: ['5%', '5%'],
         splitLine: {
             show: false,
             　　
         }
     }],
     series: [{
         name: '年度总接单数',
         data: [820, 932, 901, 1334],
         type: 'line',
         symbolSize: 5,
         symbol: 'circle',
         yAxisIndex: 0,
         smooth: true,
         itemStyle: {
             normal: {
                 color: '#1e90d7',
             }
         },
         areaStyle: {
             color: {
                 type: 'linear',
                 x: 0,
                 y: 0,
                 x2: 0,
                 y2: 1,
                 colorStops: [{
                     offset: 0,
                     color: '#0b7cd8' // 0% 处的颜色
                 }, {
                     offset: 1,
                     color: '#00092a' // 100% 处的颜色
                 }],
                 global: false
             }
         }
     }, {
         name: '本季接单数',
         data: [420, 532, 601, 834],
         type: 'line',
         symbolSize: 5,
         symbol: 'circle',
         yAxisIndex: 0,
         smooth: true,
         itemStyle: {
             normal: {
                 color: '#66d5f1',
             }
         },
         areaStyle: {
             color: {
                 type: 'linear',
                 x: 0,
                 y: 0,
                 x2: 0,
                 y2: 1,
                 colorStops: [{
                     offset: 0,
                     color: '#2a7592' // 0% 处的颜色
                 }, {
                     offset: 1,
                     color: '#00092a' // 100% 处的颜色
                 }],
                 // global: false 
             }
         }
     }, {
         name: '年度订单金额',
         data: [80, 32, 101, 34],
         type: 'line',
         yAxisIndex: 1,
         symbolSize: 5,
         symbol: 'circle',
         smooth: true,
         itemStyle: {
             normal: {
                 color: '#c4b856',
             }
         },
         areaStyle: {
             color: {
                 type: 'linear',
                 x: 0,
                 y: 0,
                 x2: 0,
                 y2: 1,
                 colorStops: [{
                     offset: 0,
                     color: '#a99e4d' // 0% 处的颜色
                 }, {
                     offset: 1,
                     color: '#00092a' // 100% 处的颜色
                 }],
                 global: false
             }
         }
     }]
 };
 let colors = ['#0e78cc', '#ccbb47', '#d63cb6'];
 let option3 = {
     color: colors,
     textStyle: {
         color: '#0082d2'
     },
     tooltip: {
         trigger: 'axis',
         axisPointer: {
             type: 'cross'
         }
     },
     grid: {
         top: '12%',
         left: '10%',
         bottom: 50,
         right: '10%',
         borderColor: '#192358'
     },
     legend: {
         itemWidth: 30,
         itemHeight: 8,
         itemGap: 30,
         bottom: -5,
         textStyle: {
             padding: [8, 8]
         },
         data: [{
             name: '最近采购价',
             textStyle: {
                 color: colors[0]
             }
         }, {
             name: '目前市场价',
             textStyle: {
                 color: colors[1]
             }
         }, {
             name: '价格波动率',
             textStyle: {
                 color: colors[2]
             }
         }]
     },
     xAxis: [{
         type: 'category',
         axisTick: {
             alignWithLabel: true
         },
         data: ['高弹纱线', '尼龙纱线', '竹炭纱线', '涤纶纱线', '混纺纱线']
     }],
     yAxis: [{
             type: 'value',
             name: '单位(千万)',
             axisLine: {
                 lineStyle: {
                     color: '#192358'
                 }
             },
             axisLabel: {
                 formatter: '{value}'
             },
             splitLine: {
                 show: true,
                 lineStyle: {
                     color: ['rgb(25,35,88)'],
                     width: 1,
                     type: 'solid'
                 }　　
             }
         },
         {
             type: 'value',
             min: 0,
             max: 100,
             position: 'right',
             splitLine: {
                 show: false,
                 　　
             },
             axisLine: {
                 lineStyle: {
                     color: '#192358'
                 }
             },
             axisLabel: {
                 formatter: '{value} %'
             }
         }
     ],
     series: [{
             name: '最近采购价',
             type: 'bar',
             yAxisIndex: 0,
             data: [2.0, 4.9, 7.0, 23.2, 25.6],
             color: new echarts.graphic.LinearGradient(
                 0, 0, 0, 1, [
                     { offset: 1, color: '#010941' },
                     { offset: 0, color: colors[0] }
                 ]
             )
         },
         {
             name: '目前市场价',
             type: 'bar',
             yAxisIndex: 0,
             data: [2.6, 5.9, 9.0, 26.4, 28.7],
             color: new echarts.graphic.LinearGradient(
                 0, 0, 0, 1, [
                     { offset: 1, color: '#010941' },
                     { offset: 0, color: colors[1] }
                 ]
             )
         },
         {
             name: '价格波动率',
             type: 'line',
             symbolSize: 5,
             symbol: 'circle',
             yAxisIndex: 1,
             data: [20, 45, 33, 45, 65],
             color: colors[2]
         }
     ]
 };
 let color4 = ['#38bdf1', '#2cebff', '#f3da62', '#fe2755']
 let option4 = {
    series : [
        {
            name:'业务指标',
            type:'gauge',
            radius: '98%',
            splitNumber: 4,
            center: ['10%', '50%'],  
            label:{
                position: 'inner'
            },
            axisTick: {
                show:false,
            },  
            title : {
                show : true,
                offsetCenter: [0, '77%'],      
                textStyle: {       
                    fontWeight: 'bolder',
                    fontSize : 15,
                    color: color4[0]
                }
            },   
            axisLine: {           
                lineStyle: {       
                    color: [[0.8, color4[0]],[1, 'rgba(255,255,255,0.2)']], 
                    width: 20
                }
            },
            axisLabel: { 
                show:true,     
                margin: 0,
                distance: -24,  
                splitLine: {
                    show:false
                },
                textStyle: {  
                    color: '#fff',
                    align:'right',
                    baseline: 'middle'
                }
            },
            splitLine: {           
                show: false,       
            },
            pointer : {
                width : 0
            },
            detail : {
                formatter:'{value}%',
                offsetCenter: [0, '0%'],
                textStyle: {       
                    color: '#fff',
                    fontWeight: 'bolder',
                }
            },
            data:[{value: 80, name: '开发及时率'}]
        },{
            name:'业务指标',
            type:'gauge',
            radius: '98%',
            splitNumber: 4,
            center: ['36%', '50%'],  
            label:{
                position: 'inner'
            },
            axisTick: {
                show:false,
            },  
            title : {
                show : true,
                offsetCenter: [0, '77%'],      
                textStyle: {       
                    fontWeight: 'bolder',
                    fontSize : 15,
                    color: color4[1]
                }
            },   
            axisLine: {           
                lineStyle: {       
                    color: [[0.87, color4[1]],[1, 'rgba(255,255,255,0.2)']], 
                    width: 20
                }
            },
            axisLabel: { 
                show:true,     
                margin: 0,
                distance: -24,  
                splitLine: {
                    show:false
                },
                textStyle: {  
                    color: '#fff',
                    align:'right',
                    baseline: 'middle'
                }
            },
            splitLine: {           
                show: false,       
            },
            pointer : {
                width : 0
            },
            detail : {
                formatter:'{value}%',
                offsetCenter: [0, '0%'],
                textStyle: {       
                    color: '#fff',
                    fontWeight: 'bolder',
                }
            },
            data:[{value: 87, name: '供应合格率'}]
        },{
            name:'业务指标',
            type:'gauge',
            radius: '98%',
            splitNumber: 4,
            center: ['62%', '50%'],  
            label:{
                position: 'inner'
            },
            axisTick: {
                show:false,
            },  
            title : {
                show : true,
                offsetCenter: [0, '77%'],      
                textStyle: {       
                    fontWeight: 'bolder',
                    fontSize : 15,
                    color: color4[2]
                }
            },   
            axisLine: {           
                lineStyle: {       
                    color: [[0.83, color4[2]],[1, 'rgba(255,255,255,0.2)']], 
                    width: 20
                }
            },
            axisLabel: { 
                show:true,     
                margin: 0,
                distance: -24,  
                splitLine: {
                    show:false
                },
                textStyle: {  
                    color: '#fff',
                    align:'right',
                    baseline: 'middle'
                }
            },
            splitLine: {           
                show: false,       
            },
            pointer : {
                width : 0
            },
            detail : {
                formatter:'{value}%',
                offsetCenter: [0, '0%'],
                textStyle: {       
                    color: '#fff',
                    fontWeight: 'bolder',
                }
            },
            data:[{value: 83, name: '库存周转率'}]
        },{
            name:'业务指标',
            type:'gauge',
            radius: '98%',
            splitNumber: 4,
            center: ['88%', '50%'],  
            label:{
                position: 'inner'
            },
            axisTick: {
                show:false,
            },  
            title : {
                show : true,
                offsetCenter: [0, '77%'],      
                textStyle: {       
                    fontWeight: 'bolder',
                    fontSize : 15,
                    color: color4[3]
                }
            },   
            axisLine: {           
                lineStyle: {       
                    color: [[0.91, color4[3]],[1, 'rgba(255,255,255,0.2)']], 
                    width: 20
                }
            },
            axisLabel: { 
                show:true,     
                margin: 0,
                distance: -24,  
                splitLine: {
                    show:false
                },
                textStyle: {  
                    color: '#fff',
                    align:'right',
                    baseline: 'middle'
                }
            },
            splitLine: {           
                show: false,       
            },
            pointer : {
                width : 0
            },
            detail : {
                formatter:'{value}%',
                offsetCenter: [0, '0%'],
                textStyle: {       
                    color: '#fff',
                    fontWeight: 'bolder',
                }
            },
            data:[{value: 91, name: '及时交付率'}]
        },
        ]
};
let color5 = ['#38bdf1', '#2cebff', '#f3da62', '#fe2755']
let option5 = {
    series : [
        {
            name:'业务指标',
            type:'gauge',
            radius: '80%',
            splitNumber: 4,
            center: ['13%', '50%'],  
            label:{
                position: 'inner'
            },
            axisTick: {
                show:false,
            },  
            title : {
                show : true,
                offsetCenter: [0, '77%'],      
                textStyle: {       
                    fontWeight: 'bolder',
                    fontSize : 12,
                    color: color5[0]
                }
            },   
            axisLine: {           
                lineStyle: {       
                    color: [[0.8, color5[0]],[1, 'rgba(255,255,255,0.2)']], 
                    width: 20
                }
            },
            axisLabel: { 
                show:true,     
                margin: 0,
                distance: -24,  
                splitLine: {
                    show:false
                },
                textStyle: {  
                    color: '#fff',
                    align:'right',
                    baseline: 'middle'
                }
            },
            splitLine: {           
                show: false,       
            },
            pointer : {
                width : 0
            },
            detail : {
                formatter:'{value}%',
                offsetCenter: [0, '0%'],
                textStyle: {       
                    color: '#fff',
                    fontWeight: 'bolder',
                    fontSize: 22
                }
            },
            data:[{value: 80, name: '产能达成率'}]
        },{
            name:'业务指标',
            type:'gauge',
            radius: '80%',
            splitNumber: 4,
            center: ['38%', '50%'],  
            label:{
                position: 'inner'
            },
            axisTick: {
                show:false,
            },  
            title : {
                show : true,
                offsetCenter: [0, '77%'],      
                textStyle: {       
                    fontWeight: 'bolder',
                    fontSize : 12,
                    color: color5[1]
                }
            },   
            axisLine: {           
                lineStyle: {       
                    color: [[0.94, color5[1]],[1, 'rgba(255,255,255,0.2)']], 
                    width: 20
                }
            },
            axisLabel: { 
                show:true,     
                margin: 0,
                distance: -24,  
                splitLine: {
                    show:false
                },
                textStyle: {  
                    color: '#fff',
                    align:'right',
                    baseline: 'middle'
                }
            },
            splitLine: {           
                show: false,       
            },
            pointer : {
                width : 0
            },
            detail : {
                formatter:'{value}%',
                offsetCenter: [0, '0%'],
                textStyle: {       
                    color: '#fff',
                    fontWeight: 'bolder',
                    fontSize: 22
                }
            },
            data:[{value: 94, name: '生产合格率'}]
        },{
            name:'业务指标',
            type:'gauge',
            radius: '80%',
            splitNumber: 4,
            center: ['63%', '50%'],  
            label:{
                position: 'inner'
            },
            axisTick: {
                show:false,
            },  
            title : {
                show : true,
                offsetCenter: [0, '77%'],      
                textStyle: {       
                    fontWeight: 'bolder',
                    fontSize : 12,
                    color: color5[2]
                }
            },   
            axisLine: {           
                lineStyle: {       
                    color: [[0.70, color5[2]],[1, 'rgba(255,255,255,0.2)']], 
                    width: 20
                }
            },
            axisLabel: { 
                show:true,     
                margin: 0,
                distance: -24,  
                splitLine: {
                    show:false
                },
                textStyle: {  
                    color: '#fff',
                    align:'right',
                    baseline: 'middle'
                }
            },
            splitLine: {           
                show: false,       
            },
            pointer : {
                width : 0
            },
            detail : {
                formatter:'{value}%',
                offsetCenter: [0, '0%'],
                textStyle: {       
                    color: '#fff',
                    fontWeight: 'bolder',
                    fontSize: 22
                }
            },
            data:[{value: 70, name: '设备开机率'}]
        },{
            name:'业务指标',
            type:'gauge',
            radius: '80%',
            splitNumber: 4,
            center: ['88%', '50%'],  
            label:{
                position: 'inner'
            },
            axisTick: {
                show:false,
            },  
            title : {
                show : true,
                offsetCenter: [0, '77%'],      
                textStyle: {       
                    fontWeight: 'bolder',
                    fontSize : 12,
                    color: color5[3]
                }
            },   
            axisLine: {           
                lineStyle: {       
                    color: [[0.60, color5[3]],[1, 'rgba(255,255,255,0.2)']], 
                    width: 20
                }
            },
            axisLabel: { 
                show:true,     
                margin: 0,
                distance: -24,  
                splitLine: {
                    show:false
                },
                textStyle: {  
                    color: '#fff',
                    align:'right',
                    baseline: 'middle'
                }
            },
            splitLine: {           
                show: false,       
            },
            pointer : {
                width : 0
            },
            detail : {
                formatter:'{value}%',
                offsetCenter: [0, '0%'],
                textStyle: {       
                    color: '#fff',
                    fontWeight: 'bolder',
                    fontSize: 22
                }
            },
            data:[{value: 60, name: '设备QEE'}]
        },
        ]
};
 let color6 = ['#07a0f8', '#39eced', '#e7cf59', '#f42a51'];
 let option6 = {
    tooltip: {
        show: true,
        trigger: 'axis',

    },
    textStyle: {
        color: '#0082d2'
    },
    grid: {
        top: '12%',
        left: '10%',
        bottom: 50,
        right: '5%',
        borderColor: '#192358'
    },
    legend: {
        itemWidth: 15,
        itemHeight: 10,
        itemGap: 10,
        bottom: -2,
        textStyle: {
            padding: [2, 2]
        },
        data: [{
                name: '产能达成率',
                textStyle: {
                    color: color6[0],
                },
            },
            {
                name: '生产合格率',
                textStyle: {
                    color: color6[1],

                },
            },
            {
                name: '设备开机率',
                textStyle: {
                    color: color6[2],

                },
            },{
                name: '设备综合利用率',
                textStyle: {
                    color: color6[3],

                },
            }
        ]
    },
    xAxis: {
        type: 'category',
        data: ['2018年10月', '2018年11月', '2018年12月', '2019年1月', ],
        boundaryGap: true,
        axisPointer: {
            show: true,
            type: 'line'
        }
    },
    yAxis: [{
        name: '单位(千万)',
        nameGap: 8,
        type: 'value',
        axisLabel: {
            formatter: '{value}%'
        },
        max: 100,
        min: 0,
        splitLine: {
            show: true,
            lineStyle: {
                color: ['rgb(25,35,88)'],
                width: 1,
                type: 'solid'
            }　　
        }
    }],
    series: [{
        name: '产能达成率',
        data: [20, 32, 90, 54],
        type: 'line',
        symbolSize: 5,
        symbol: 'circle',
        smooth: true,
        itemStyle: {
            normal: {
                color: color6[0],
            }
        },
        
    }, {
        name: '生产合格率',
        data: [40, 52, 61, 34],
        type: 'line',
        symbolSize: 5,
        symbol: 'circle',
        smooth: true,
        itemStyle: {
            normal: {
                color: color6[1],
            }
        },
        
    }, {
        name: '设备开机率',
        data: [80, 12, 10, 64],
        type: 'line',
        symbolSize: 5,
        symbol: 'circle',
        smooth: true,
        itemStyle: {
            normal: {
                color: color6[2],
            }
        },
    },{
        name: '设备综合利用率',
        data: [18, 22, 51, 14],
        type: 'line',
        symbolSize: 5,
        symbol: 'circle',
        smooth: true,
        itemStyle: {
            normal: {
                color: color6[3],
            }
        }
    }]
};
let color8 = ['#00a5f4', '#3bd9f6', '#fbe738', '#e92fbd'];
let option8 = {
    title: {
        show: false,
        subtextStyle: {
            color: '#0c84e3',
        }
    },
    tooltip: {},
    textStyle: {
        color: '#0082d2'
    },
    grid: {
        top: '16%',
        left: '15%',
        bottom: 50,
        right: '8%',
        borderColor: '#192358'
    },
    legend: {
        itemWidth: 25,
        itemHeight: 6,
        itemGap: 5,
        bottom: -5,
        textStyle: {
            padding: [8, 8]
        },
        data: [{
                name: '原材料库存',
                icon: 'rect',
                textStyle: {
                    color: '#c7b851'
                },
            },
            {
                name: '半成品库存',
                icon: 'rect',
                textStyle: {
                    color: '#0c84e3'
                },
            },
            {
                name: '成品库存',
                icon: 'rect',
                textStyle: {
                    color: '#0c84e3'
                },
            },
            {
                name: '其他库存',
                icon: 'rect',
                textStyle: {
                    color: '#0c84e3'
                },
            }
        ]
    },
    yAxis: {
        name: '单位:千万',
        boundaryGap: ['5%', '5%'],
        splitLine: {
            lineStyle: {
                color: '#192358'
            }
        }
    },
    xAxis: {
        nameGap: 8,
        data: ["目前库存", "本月新增", "上月剩余"],
    },
    series: [{
        name: '原材料库存',
        type: 'bar',
        data: [1.5, 1, 4],
        color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1, [
                { offset: 1, color: '#00083f' },
                { offset: 0, color: color8[0] }
            ]
        )
    }, {
        name: '半成品库存',
        type: 'bar',
        data: [2, 2.5, 2.5],
        color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1, [
                { offset: 1, color: '#00083f' },
                { offset: 0, color: color8[1] }
            ]
        )
    }, {
        name: '成品库存',
        type: 'bar',
        data: [2.8, 4, 3.5],
        color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1, [
                { offset: 1, color: '#00083f' },
                { offset: 0, color: color8[2] }
            ]
        )
    }, {
        name: '其他库存',
        type: 'bar',
        data: [2, 4.5, 2.5],
        color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1, [
                { offset: 1, color: '#00083f' },
                { offset: 0, color: color8[3] }
            ]
        )
    }]
}



 myChart1.setOption(option1);
 myChart2.setOption(option2);
 myChart3.setOption(option3);
 myChart4.setOption(option4);
 myChart5.setOption(option5);
 myChart6.setOption(option6);
 myChart8.setOption(option8);