 $(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})
});
	});

 $(function () {

 	echarts_1();
 	echarts_2();
 	echarts_3();

 	function echarts_1() {
 		var myChart = echarts.init(document.getElementById('echart1'));


         var salvProName =['炒制区', '内包装区', '前处理区', '外包装区', '配料区'];
         var salvProValue =[683,  523, 345,234, 234];
         var salvProMax =[];//背景按最大值
         for (let i = 0; i < salvProValue.length; i++) {
             salvProMax.push(salvProValue[0])
         }
         option = {
     
             grid: {
                 left: '2%',
                 right: '2%',
                 bottom: '-6%',
                 top: '8%',
                 containLabel: true
             },
             tooltip: {
                 trigger: 'axis',
                 axisPointer: {
                     type: 'none'
                 },
                 formatter: function(params) {
                     return params[0].name  + ' : ' + params[0].value
                 }
             },
             xAxis: {
                 show: false,
                 type: 'value'
             },
             yAxis: [{
                 type: 'category',
                 inverse: true,
                 axisLabel: {
                     show: true,
                     textStyle: {
                         color: '#fff'
                     },
                 },
                 splitLine: {
                     show: false
                 },
                 axisTick: {
                     show: false
                 },
                 axisLine: {
                     show: false
                 },
                 data: salvProName
             }, {
                 type: 'category',
                 inverse: true,
                 axisTick: 'none',
                 axisLine: 'none',
                 show: true,
                 axisLabel: {
                     textStyle: {
                         color: '#ffffff',
                         fontSize: '12'
                     },
                 },
                 data:salvProValue
             }],
             series: [{
                     name: '值',
                     type: 'bar',
                     zlevel: 1,
                     itemStyle: {
                         normal: {
                             barBorderRadius: 30,
                             color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                 offset: 0,
                                 color: 'rgb(57,89,255,1)'
                             }, {
                                 offset: 1,
                                 color: 'rgb(46,200,207,1)'
                             }]),
                         },
                     },
                     barWidth: 10,
                     data: salvProValue
                 },
                 {
                     name: '背景',
                     type: 'bar',
                     barWidth: 10,
                     barGap: '-100%',
                     data: salvProMax,
                     itemStyle: {
                         normal: {
                             color: 'rgba(24,31,68,1)',
                             barBorderRadius: 30,
                         }
                     },
                 },
             ]
         };

 		// 使用刚指定的配置项和数据显示图表。
 		myChart.setOption(option);
 		window.addEventListener("resize", function () {
 			myChart.resize();
 		});
 	}
	 function echarts_2() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart2'));
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
             grid: {
                left: '0%',
                top:'15px',
                right: '0%',
                bottom: '0%',
               containLabel: true
            },
            xAxis: {
                data: ['色拉油', '清花椒', '豆瓣', '红花椒', '白酒', '生姜', '洋葱', '盐'],
                axisLine: {show:false,},
                axisLabel: {
                    color: '#fff',
                    fontSize: 12
                }
            },
            yAxis: {
                name: "（人）",
                nameTextStyle: {
                    color: '#fff',
                    fontSize: 14
                },
                axisLine: { show:false, },
                axisLabel: {
                    color: '#fff',
                    fontSize: 12
                },
                splitLine: {show:false, },
                interval:100,
                max:500
        
            },
            series: [{
                type: 'bar',
                barWidth: '30%',
                
                itemStyle:{
                    
                    normal:{
                         barBorderRadius: 50,
                        color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#01fdcc'
                        }, {
                            offset: 0.8,
                            color: '#11a1d8'
                        }], false)
                    }
                },
                data: [80, 325, 164, 245, 475, 201, 121,150]
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }
	 function echarts_3() {
 		var myChart = echarts.init(document.getElementById('echart3'));
 		option = {
 			tooltip: {

 				trigger: 'axis',
 				axisPointer: {
 					lineStyle: {
 						color: '#57617B'
 					}
 				},
 				formatter: '{b}:<br/> 产量：{c}'
 			},

 			grid: {
 				left: '0',
 				right: '20',
 				top: '10',
 				bottom: '0',
 				containLabel: true
 			},
 			xAxis: [{
 				type: 'category',
 				boundaryGap: false,
 				axisLine: {
					show: false,
 					lineStyle: {
 						color: 'rgba(255,255,255,.6)'
 					}
 				},
 				data: ['1月', '2月', '3月', '4月', '5月', '6月']
 			}],
 			yAxis: [{
 				axisLabel: {
 					show: true,
 					textStyle: {
 						color: 'rgba(255,255,255,.6)'
 					}
 				},
 				axisLine: {
					show: false,
 					
 				},
 				splitLine: {
 					lineStyle: {
						type:'dotted',
 						color: 'rgba(255,255,255,.1)'
 					}
 				}
 			}],
 			series: [{
 				name: '产量：',
 				type: 'line',
 				//smooth: true,
 				symbol: 'circle',
 				symbolSize: 5,
 				//showSymbol: false,
 				lineStyle: {
 					normal: {
 						width: 2
 					}
 				},

 				areaStyle: {
 					normal: {
 						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
 							offset: 0,
 							color: 'rgba(98, 201, 141, 0.5)'
 						}, {
 							offset: 1,
 							color: 'rgba(98, 201, 141, 0.1)'
 						}], false),
 						shadowColor: 'rgba(0, 0, 0, 0.1)',
 						shadowBlur: 10
 					}
 				},
 				itemStyle: {
 					normal: {
 						color: '#4cb9cf',
 						borderColor: 'rgba(98, 201, 141,0.27)',
 						borderWidth: 12
 					}
 				},
 				data: [1000, 1200, 1300, 1200, 1500, 2000]
 			}]
 		};

 		// 使用刚指定的配置项和数据显示图表。
 		myChart.setOption(option);
 		window.addEventListener("resize", function () {
 			myChart.resize();
 		});
 	}
 })












