LargeScreenVisualization/viewdata-master/新增75套源码/73/js/js.js

 $(window).load(function(){  
             $(".loading").fadeOut()
            })  	
$(function () {
echarts_21();
echarts_22();
echarts_1();
echarts_2();
echarts_3();
echarts_4();
echarts_5();
function echarts_21() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart21'));

       option1 = {

    tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow'}
    },
    grid: {
        left: '0%',
		top:'10px',
        right: '0%',
        bottom: '0px',
       containLabel: true
    },
    xAxis: [{
        type: 'category',
      		data: ['1', '2', '3', '4', '5','6', '7', '8', '9', '10','11', '12'],
        axisLine: {
            show: true,
         lineStyle: {
                color: "rgba(255,255,255,.1)",
                width: 1,
                type: "solid"
            },
        },
		
        axisTick: {
            show: false,
        },
		axisLabel:  {
                interval: 0,
               // rotate:50,
                show: true,
                splitNumber: 15,
                textStyle: {
 					color: "rgba(255,255,255,.6)",
                    fontSize: '12',
                },
            },
    }],
    yAxis: [{
        type: 'value',
        axisLabel: {
           //formatter: '{value} %'
			show:true,
			 textStyle: {
 					color: "rgba(255,255,255,.6)",
                    fontSize: '12',
                },
        },
        axisTick: {
            show: false,
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: "rgba(255,255,255,.1	)",
                width: 1,
                type: "solid"
            },
        },
        splitLine: {
            lineStyle: {
               color: "rgba(255,255,255,.1)",
            }
        }
    }],
    series: [
		{
        type: 'line',
        data: [5030, 8600, 3000,7200,7200, 5130, 10030, 8600, 13000,7200, 9130,  4130],

        itemStyle: {
            normal: {
                color:'#37a3ff',
                opacity: 1,
				
				BorderRadius: 3,
            }
        }
    }
	]
};
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option1);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
	

    }
function echarts_22() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart22'));

	   option1 = {
  //  backgroundColor: '#00265f',
    tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow'}
    },
    grid: {
        left: '0%',
		top:'5px',
        right: '0%',
        bottom: '0px',
       containLabel: true
    },
    xAxis: [{
        type: 'category',
      		data: ['1', '2', '3', '4', '5','6', '7', '8', '9', '10','11', '12'],
        axisLine: {
            show: true,
         lineStyle: {
                color: "rgba(255,255,255,.1)",
                width: 1,
                type: "solid"
            },
        },
		
        axisTick: {
            show: false,
        },
		axisLabel:  {
                interval: 0,
               // rotate:50,
                show: true,
                splitNumber: 15,
                textStyle: {
 					color: "rgba(255,255,255,.6)",
                    fontSize: '12',
                },
            },
    }],
    yAxis: [{
		
        type: 'value',
        axisLabel: {
           //formatter: '{value} %'
			show:true,
			 textStyle: {
 					color: "rgba(255,255,255,.6)",
                    fontSize: '12',
                },
        },
        axisTick: {
            show: false,
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: "rgba(255,255,255,.1	)",
                width: 1,
                type: "solid"
            },
        },
        splitLine: {
            lineStyle: {
               color: "rgba(255,255,255,.1)",
            }
        }
    }],
    series: [
		{
        type: 'line',
        data: [7200, 9130, 5030, 8600, 3000,7200, 4130, 5130, 10030, 8600, 13000,7200],

        itemStyle: {
            normal: {
                color:'#37a3ff',
                opacity: 1,
				barBorderRadius: 3,
            }
        }
    }
		
	]
};
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option1);
        window.addEventListener("resize",function(){
            myChart.resize();
        });

    }

	function echarts_1() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('feng01'));
var gauge_value=66;

option = {
   title: {
			x: "center",
			bottom: 10,
			//text: '风向',
			subtext: '风向',
			textStyle: {
				fontWeight: 'normal',
				fontSize: 18,
				color: "#fff"
			},
		},
		tooltip: {
			show: true,
		 
		 
		},
		series: [
		    {
            type: 'gauge',
           	radius:'60%',  
           	center: ['50%', '55%'],
            splitNumber: 7, //刻度数量
            min: 0,
            max:70,
          	startAngle: 225,
			endAngle: -45,
            axisLine: {
                show: true,
                lineStyle: {
                    width: 2,
                    shadowBlur: 0,
                    color: [
                        [1, '#8f8f8f']
                    ]
                }
            },
            axisTick: {
                show: false,
                lineStyle: {
                    color: '#8f8f8f',
                    width: 1
                },
                length: -5,
                splitNumber: 7
            },
            splitLine: {
                show: true,
                length: -5,
                lineStyle: {
                    color: "rgba(255,255,255,.2)",
                }
            },
            axisLabel: {
                distance: -25,
               
                	formatter: function(e) {
					switch(e + "") {
					    case "0":
							return "北风";
						case "10":
							return "东北风";
 
						case "20":
							return "东风";

						case "30":
							return "东南风";

						case "40":
							return "南风";
							
						case "50":
							return "西南风";
							
						case "60":
							return "西风";
								
						case "70":
							return "西北风";
							
						default:
							return e;
					}
				},
				textStyle: {
					fontSize: 10,
					 color: "rgba(255,255,255,.6)",
				}

            },
            pointer: { //仪表盘指针
                show: 0
            },
            detail: {
                show: false
            },
            data: [{
                name: "",
                value: 100
            }]
        } ,
         
		{
			name: '风向',
			type: 'gauge',
			startAngle: 225,
			endAngle: -45,
			radius: '56%',
		center: ['50%', '55%'], // 默认全局居中  
			 
			min: 0,
			max: 100,

			axisLine: {
				show: false,
				lineStyle: {
					width:5,
					shadowBlur: 0,
					color: [
					
						[1, '#82b440']
					]
				}
			},
			axisTick: {
                show: false,
                 
            },
			splitLine: {
				show: false,
				length: 20,

			},

			axisLabel: {
			    show:false
			},
			pointer: {
				show: true,
				length: '65%',
                width: 4
			},
			detail: {
                show:false,
				offsetCenter: [0, 0],
				textStyle: {
					fontSize: 10
				}
			},
			itemStyle: {
            normal: {
                color: "#82b440",
                
            }
        },
			data: [{
				name: "",
				value: Math.floor(gauge_value)
			}]
		}]
};
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }
	function echarts_2() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('feng02'));
var gauge_value=30;
option = {
   title: {
			x: "center",
			bottom: 0,
			text: gauge_value,
			subtext: '风速km/h',
			textStyle: {
				fontWeight: 'normal',
				fontSize: 18,
				color: "#fff"
			},
		},
		tooltip: {
			show: true,
		 
		 
		},
		series: [
		    {
            type: 'gauge',
           	radius:'60%',  
           	center: ['50%', '55%'],
            splitNumber: 7, //刻度数量
            min: 0,
            max:70,
          	startAngle: 225,
			endAngle: -45,
            axisLine: {
                show: true,
                lineStyle: {
                    width: 2,
                    shadowBlur: 0,
                    color: [
                        [1, '#8f8f8f']
                    ]
                }
            },
            axisTick: {
                show: false,
                lineStyle: {
                    color: '#8f8f8f',
                    width: 1
                },
                length: -5,
                splitNumber: 7
            },
            splitLine: {
                show: true,
                length: -5,
                lineStyle: {
                    color: "rgba(255,255,255,.2)",
                }
            },
            axisLabel: {
                distance: -15,
          
				textStyle: {
					fontSize: 10,
					 color: "rgba(255,255,255,.6)",
				}

            },
            pointer: { //仪表盘指针
                show: 0
            },
            detail: {
                show: false
            },
            data: [{
                name: "",
                value: 100
            }]
        } ,
         
		{
			name: '风向',
			type: 'gauge',
			startAngle: 225,
			endAngle: -45,
			radius: '56%',
		center: ['50%', '55%'], // 默认全局居中  
			 
			min: 0,
			max: 70,

			axisLine: {
				show: false,
				lineStyle: {
					width:5,
					shadowBlur: 0,
					color: [
					
						[1, '#2ea7ff']
					]
				}
			},
			axisTick: {
                show: false,
                 
            },
			splitLine: {
				show: false,
				length: 20,

			},

			axisLabel: {
			    show:false
			},
			pointer: {
				show: true,
				length: '65%',
                width: 4
			},
			detail: {
                show:false,
				offsetCenter: [0, 0],
				textStyle: {
					fontSize: 10
				}
			},
			itemStyle: {
            normal: {
                color: "#2ea7ff",
                
            }
        },
			data: [{
				name: "",
				value: Math.floor(gauge_value)
			}]
		}]
};
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }
	function echarts_3() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('feng03'));
var gauge_value=17;

option = {
   title: {
			x: "center",
			bottom: 0,
			text:gauge_value,
			subtext: '降雨量ML',
			textStyle: {
				fontWeight: 'normal',
				fontSize: 18,
				color: "#fff"
			},
		},
		tooltip: {
			show: true,
		 
		 
		},
		series: [
		    {
            type: 'gauge',
           	radius:'60%',  
           	center: ['50%', '55%'],
            splitNumber: 10, //刻度数量
            min: 0,
            max:100,
          	startAngle: 225,
			endAngle: -45,
            axisLine: {
                show: true,
                lineStyle: {
                    width: 2,
                    shadowBlur: 0,
                    color: [
                        [1, '#8f8f8f']
                    ]
                }
            },
            axisTick: {
                show: false,
                lineStyle: {
                   color: "rgba(255,255,255,.1)",
                    width: 1
                },
                length: -5,
                splitNumber: 7
            },
            splitLine: {
                show: true,
                length: -5,
                lineStyle: {
                   color: "rgba(255,255,255,.2)",
                }
            },
            axisLabel: {
                distance: -15,
				textStyle: {
					fontSize: 10,
					 color: "rgba(255,255,255,.6)",
				}

            },
            pointer: { //仪表盘指针
                show: 0
            },
            detail: {
                show: false
            },
            data: [{
                name: "",
                value: 100
            }]
        } ,
         
		{
			name: '风向',
			type: 'gauge',
			startAngle: 225,
			endAngle: -45,
			radius: '56%',
		center: ['50%', '55%'], // 默认全局居中  
			 
			min: 0,
			max: 100,

			axisLine: {
				show: false,
				lineStyle: {
					width:5,
					shadowBlur: 0,
					color: [
					
						[1, '#ff7109']
					]
				}
			},
			axisTick: {
                show: false,
                 
            },
			splitLine: {
				show: false,
				length: 20,

			},

			axisLabel: {
			    show:false
			},
			pointer: {
				show: true,
				length: '65%',
                width: 4
			},
			detail: {
                show:false,
				offsetCenter: [0, 0],
				textStyle: {
					fontSize: 10
				}
			},
			itemStyle: {
            normal: {
                color: "#ff7109",
                
            }
        },
			data: [{
				name: "",
				value: Math.floor(gauge_value)
			}]
		}]
};
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }
	function echarts_4() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart4'));

      option = {
        tooltip: {
       trigger: 'axis',
       axisPointer: {type: 'shadow'},
      },"grid": {
        "top": "20%",
      "right":"50",
      "bottom":"20",
      "left":"30",
      },
      legend: {
        data: ['数据1', '数据2', '数据3','增幅'],
        right: 'center', width:'100%',
        textStyle: {
            color: "rgba(255,255,255,.5)"
        },
        itemWidth: 12,
        itemHeight: 10,
      },
      
      
      
       "xAxis": [
         {
           "type": "category",
           data: ['2016', '2017', '2018', '2019'],
           axisLine:{ show: false,},
           axisLabel:  { textStyle: {
			   fontSize:14,
             color: "rgba(255,255,255,.5)",
			    },
               },
       
           },
      ],
       "yAxis": [
         {
             
           "type": "value",
          // "name": "单位万",
			
           axisTick: {show: false},
           splitLine: { show: false,},
           axisLine: { show: false,},
           "axisLabel": {
             "show": true,
			   fontSize:14,
             color: "rgba(255,255,255,.5)"
            
           },
           axisLine: {
            min:0,
            max:10,
            show:false
            },//左线色
           
         },
         {
           "type": "value",
           //"name": "增速",
           "show": true,
           "axisLabel": {
             formatter: "{value} %",
            fontSize:14,
             color: "rgba(255,255,255,.5)"},
           axisTick: {show: false},
           splitNumber:3,
         axisLine: {show:false},//右线色
          splitLine: {lineStyle: {color:'rgba(255,255,255,.05)'}},//x轴线
         },
       ],
       "series": [
        
         {
           "name": "数据1",
           "type": "bar",
           "data": [36.6,38.80, 40.84, 41.60],
           "barWidth": "10%",
           "itemStyle": {
             "normal": {
              barBorderRadius:15,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#8bd46e'
            }, {
                offset: 1,
                color: '#09bcb7'
            }]),
             }
           },
           "barGap": "0.2"
         },
         {
          "name": "数据2",
          "type": "bar",
          "data":[14.8,14.1, 15, 16.30],
          "barWidth": "10%",
          "itemStyle": {
            "normal": {
             barBorderRadius: 15,
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#248ff7'
          }, {
              offset: 1,
              color: '#6851f1'
          }]),
            }
          },
          "barGap": "0.2"
        },
        {
          "name": "数据3",
          "type": "bar",
          "data":[9.2,9.1, 9.85, 8.9],
          "barWidth": "10%",
          "itemStyle": {
            "normal": {
             barBorderRadius: 15,
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
               offset: 0,
               color: '#fccb05'
           }, {
               offset: 1,
               color: '#f5804d'
           }]),
            }
          },
          "barGap": "0.2"
        }
         ,
         {
           "name": "增幅",
           "type": "line",
           "yAxisIndex": 1,
       
           "data": [3, 1, 5,2.3],
         lineStyle: {
         normal: {
           width: 2
         },
       },
           "itemStyle": {
             "normal": {
               "color": "#3496f8",
          
             }
           },
       //   "smooth": true,
           symbolSize:0,
         }
       ]
      };
      
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }
function echarts_5() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart5'));

   var lightBlue = {
	type: 'linear',
	x: 0,
	y: 0,
	x2: 0,
	y2: 1,
	colorStops: [{
		offset: 0,
		color: 'rgba(41, 121, 255, 1)'
	}, {
		offset: 1,
		color: 'rgba(0, 192, 255, 1)'
	}],
	globalCoord: false
}

var option = {
	tooltip: {
		show: false
	},
	grid: {
		top: '0%',
		left: '50',
		right: '50',
		bottom: '0%',
	},
	xAxis: {
		min: 0,
		//max: 12000,
		splitLine: {
			show: false
		},
		axisTick: {
			show: false
		},
		axisLine: {
			show: false
		
		},
		axisLabel: {
			show: false
		}
	},
	yAxis: {
		data: ['数据','数据','数据','数据','数据','数据'],
		//offset: 15,
		axisTick: {
			show: false
		},
		axisLine: {
			show: false
		},
		axisLabel: {
			color: 'rgba(255,255,255,.6)',
			fontSize: 14,
		
			
		}
	},
	series: [{
		type: 'bar',
		label: {
			show: true,
			zlevel: 10000,
			position: 'right',
			padding: 6,
			color: '#4e84a1',
			fontSize: 14,
			formatter: '{c}'
			
		},
		itemStyle: {
			  barBorderRadius: 25,
			color:'#3facff'
		},
		barWidth: '15',
       
		data: [ 1800, 1240, 1168, 1200, 2336, 1680],
		z: 6
	}
		],
};
		
      
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }


	
	
	
})