yf_zd
/
yfApp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
							<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
		<link href="../css/common.css" rel="stylesheet" />
		<style type="text/css">
			.mui-content {
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				right: 0;
			}
			
			.mapCover {
				position: absolute;
				left: 0;
				top: 50px;
				bottom: 0;
				right: 0;
			}
			
			#map {
				width: 100%;
				height: 100%;
			}
			/*预警按钮*/
			
			.warningRatio {
				position: fixed;
				left: 0;
				right: 0;
				bottom: 30px;
				text-align: center;
				z-index: 2;
			}
			
			.warningRatio button {
				border-radius: 18px;
				background: #21b2e7;
				color: #fff;
				border: none;
			}
			
			.warningRatio i {
				margin-right: 5px;
			}
			/*预警详情*/
			
			.warningEchart {
				position: fixed;
				left: 0;
				right: 0;
				bottom: 0;
			}
			
			.echartInner {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				height: 0;
				width: 100%;
				background: #fff;
				border-radius: 20px 20px 0 0;
				/*padding: 25px 15px;*/
			}
			
			#pie-chart {
				width: 100%;
				height: 300px;
			}
			
			.mui-col-xs-6 {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
			}
			.echartInner .closeBtn{
				position: absolute;
			    right: 14px;
			    top: 12px;
			    border-radius: 50%;
			    padding: 0;
			    width: 28px;
			    height: 28px;
			    background: #d1d1d1;
			    border: none;
			    z-index: 3;
			}
			.closeBtn i{
				color: #fff;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">地图预警</h1>
		</header>
		<div class="mui-content">
			<div class="mapCover">
		    	<div id="map"></div>
		    </div>
			<!--预警按钮-->
			<div class="warningRatio">
				<button id="warningRatioBtn">
		    		<i class="fa fa-pie-chart" aria-hidden="true"></i>预警百分比
		    	</button>
			</div>
			<!--预警详情-->
			<div class="warningEchart">
				<div class="echartInner mui-row">
					<button class="closeBtn">
		    			<i class="fa fa-close" aria-hidden="true"></i>
		    		</button>
					<!--<div class="mui-col-xs-6">-->
					<div id="pie-chart"></div>
					<!--</div>
					<div class="mui-col-xs-6">

					</div>-->

				</div>
			</div>
			<!--<div class="mui-row">
        		<div class="mui-col-xs-6">s</div>
        		<div class="mui-col-xs-6">s</div>
        	</div>-->
		</div>
		<script src="../js/jquery-2.1.0.js"></script>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=La58N63t7hPhafQ7Eror2kon"></script>
		<script src="https://cdn.bootcss.com/echarts/3.8.5/echarts.js"></script>
		<script type="text/javascript">
			mui.init();
			//百度地图获取坐标
						var map = new BMap.Map("map"); // 创建地图实例  
						map.centerAndZoom(new BMap.Point(113.64964385, 34.75661006), 13); // 创建点坐标  
						map.enableScrollWheelZoom(true);
						map.addControl(new BMap.ScaleControl()); // 添加比例尺控件 
						map.addControl(new BMap.NavigationControl()); //为地图添加鱼骨（默认）
						map.addEventListener("tilesloaded", function() {
							$(".BMap_cpyCtrl").hide();
							// $(".anchorBL").hide();
						}); //地图加载完毕后 隐藏百度图标

			//图表
			var pieChart = echarts.init(document.getElementById('pie-chart'));
			var pieoption = {
				tooltip: {
					trigger: 'item',
					formatter: "{a} <br/>{b} : {c} ({d}%)"
				},
//				legend: {
//					orient: 'horizontal',
//					left: 'left',
//					data: ['杀虫灯', '虫情测报', '气象设备']
//				},
				series: [{
					name: '访问来源',
					type: 'pie',
					radius: [0, '50%'],
//					center: ['50%', '50%'],
					data: [{
							value: 335,
							name: '杀虫灯'
						},
						{
							value: 310,
							name: '虫情测报'
						},
						{
							value: 234,
							name: '气象设备'
						}
					],
					itemStyle: {
						normal: {
							label: {
								show: true,
								formatter: '{b} : {c} \n ({d}%)'
							},
							labelLine: {
								show: true
							}
						},
						emphasis: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				}],
				color: ['#9cddff', '#0e86c3', '#42b9f6']

			};
			pieChart.setOption(pieoption);
			
			//查看预警详情
			document.getElementById('warningRatioBtn').addEventListener('tap',function(){
				$('.warningEchart').css('z-index','3');
				$('.echartInner').animate({
					'height':'300'
				})
			})
			//关闭预警详情
			document.querySelector('.closeBtn').addEventListener('tap',function(){
				$('.echartInner').animate({
					'height':'0'
				},500)
				setTimeout(function(){
					$('.warningEchart').css('z-index','0');
				},500)
			})
		</script>
	</body>

</html>