wcheng81
/
LSQZrzyAPP


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256
							<!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" />
		<!-- 引入mui样式 -->
		<link rel="stylesheet" type="text/css" href="../css/mui.css" />
		<!-- 引入弹窗及选择器样式 -->
		<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/mui.poppicker.css" />
		<!-- 引入app样式 -->
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
		<link rel="stylesheet" href="../css/app.new.css">
		<!-- 引入字体 -->
		<link rel="stylesheet" type="text/css" href="../fonts/TTTGB-Medium.css" />
		<link rel="stylesheet" type="text/css" href="../fonts/font-time.css" />
	</head>
	<body>
		<div class="jt-count-echarts-panel">
			<div class="jt-title">林地地类占比</div>
			<div class="jt-content" id="divCountPie_DL"></div>
			<div class="jt-title">林地分区占比</div>
			<div class="jt-content" id="divCountPie_FQ"></div>
			<div class="jt-title">林地乡镇占比</div>
			<div class="jt-content" id="divCountPie_XZ"></div>
			<div class="jt-title">乡镇林地地类统计</div>
			<div class="jt-content" id="divCountBarDL_SSXZ"></div>
			<div class="jt-title">分区地类统计</div>
			<div class="jt-content" id="divCountBarDL_FQ"></div>
		</div>
	</body>
</html>
<!-- 引入mui脚本 -->
<script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入jQuery脚本 -->
<script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入通用脚本 -->
<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
<!-- 进入webview脚本 -->
<script src="../js/webview.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入存储脚本 -->
<script src="../js/save.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入ajax脚本 -->
<script src="../js/ajax.js" type="text/javascript" charset="utf-8"></script>
<!-- 图表脚本 -->
<script src="../js/ECharts/echarts.js" type="text/javascript" charset="utf-8"></script>
<!-- 自定义图表脚本 -->
<script src="../js/CRECharts.js" type="text/javascript" charset="utf-8"></script>
<!-- 本页独有脚本 -->
<script type="text/javascript">
	/* mui初始化 */
	mui.init();
	/* 页面尺寸 */
	var pageSize = getPageSize();
	/* 初始化完成 */
	plusInit(function() {
		/* 重置图表的尺寸 */
		echartsSizeInit();
		/* 统计 */
		getForestCountPie(0);
		getForestCountBar(0);
	});

	/* 占比统计配置表 */
	var pieConfig = [{
		domId: 'divCountPie_DL',
		fldName: 'dlmc',
		echarObj: CountPie_DL,
	}, {
		domId: 'divCountPie_FQ',
		fldName: 'lyfq',
		echarObj: CountPie_FQ,
	}, {
		domId: 'divCountPie_XZ',
		fldName: 'ssxz',
		echarObj: CountPie_XZ,
	}];

	/* 统计分析配置表 */
	var barConfig = [{
		domId: 'divCountBarDL_SSXZ',
		fldName: 'ssxz',
		echarObj: CountBarDL_SSXZ,
	}, {
		domId: 'divCountBarDL_FQ',
		fldName: 'lyfq',
		echarObj: CountBarDL_FQ,
	}]

	/**
	 * 根据字段查询统计占比情况
	 * @param {number} index 配置项索引
	 */
	function getForestCountPie(index) {
		if (index >= pieConfig.length) return;
		var config = pieConfig[index];
		var iData = {
			fldName: config.fldName,
		}
		sendAjax({
			url: 'appQueryForestCount',
			waitMessage: '分析中...',
			data: iData,
			success: function(resData) {
				showCountPie(resData, config);
				getForestCountPie(index + 1);
			},
			error: function(err) {
				muiAlertError(err);
			}
		})
	}

	/**
	 * 根据字段查询统计情况
	 * @param {number} index 配置项索引
	 */
	function getForestCountBar(index) {
		if (index >= barConfig.length) return;
		var config = barConfig[index];
		var iData = {
			fldName: config.fldName,
		}
		sendAjax({
			url: 'appQueryForestCountByField',
			waitMessage: '分析中...',
			data: iData,
			success: function(resData) {
				showCountBar(resData, config);
				getForestCountBar(index + 1);
			},
			error: function(err) {
				muiAlertError(err);
			}
		})
	}

	/* 统计组件 */
	var CountPie_DL = undefined;
	var CountPie_FQ = undefined;
	var CountPie_XZ = undefined;
	var CountBarDL_SSXZ = undefined;
	var CountBarDL_FQ = undefined;
	/**
	 * 释放图表资源
	 * @param {Object} obj 图表控件
	 */
	function eChartsDispose(obj) {
		if (obj != null && obj != "" && obj != undefined) obj.dispose();
	}

	/**
	 * 展示占比统计结果
	 * @param {JSON} data 展示数据
	 * @param {JSON} config 配置项
	 */
	function showCountPie(data, config) {
		var countPieData = [];
		for (var i in data) {
			countPieData.push({
				value: data[i].selName,
				name: data[i].selCode,
			});
		}
		var pieRadiusWidth = '65%';
		if (pageSize.width <= PageSize.smartSize) {
			pieRadiusWidth = '55%';
		}
		eChartsDispose(config.echarObj);
		config.echarObj = new CrCharts({
			domId: config.domId,
		});
		config.echarObj.createPie({
			data: countPieData,
			isAria: false,
			lineColor: 'rgb(133, 215, 253)',
			labelColor: 'rgb(255,255,255)',
			perLabelColor: 'rgb(129,181,218)',
			radius: [5, pieRadiusWidth],
			minAngle: 20,
			roseType: false,
			unit: '公顷',
		}, '面积统计');
	}

	/**
	 * 展示统计分析结果
	 * @param {JSON} data 数据集
	 * @param {JSON} config 配置项
	 */
	function showCountBar(data, config) {
		var dataZoomX = undefined;
		if (pageSize.width <= PageSize.smartSize) dataZoomX = true;
		/* 标签 */
		var labels = [];
		/* 数据集 */
		var datas = [{
			name: '乔木林地',
			data: [],
		}, {
			name: '灌木林地',
			data: [],
		}, {
			name: '竹林地',
			data: [],
		}, {
			name: '其他林地',
			data: [],
		}];
		/* 单位集合 */
		var units = [];
		for (var i in data) {
			var item = data[i];
			labels.push(item.keyName);
			units.push('公顷');
			datas[0].data.push(item.areaArbor);
			datas[1].data.push(item.areaShrub);
			datas[2].data.push(item.areaBamboo);
			datas[3].data.push(item.areaOther);
		}
		/* 展示柱状图 */
		var bbsData = {
			title: '分析',
			labels: labels,
			datas: datas,
			xrotate: 15,
			gridBottom: 90,
			gridTop: 60,
			dataZoomX: dataZoomX,
		}
		eChartsDispose(config.echarObj);
		config.echarObj = new CrCharts({
			domId: config.domId,
			labelColor: 'rgb(255,255,255)',
			legendTextColor: 'rgb(255,255,255)',
			xAxisLineColor: 'rgba(255,255,255,1.0)',
			yAxisLineColor: 'rgb(133, 215, 253)',
			splitLineColor: 'rgba(255,255,255,0.3)',
			xAxisLabel: {
				color: "rgba(255,255,255,1.0)",
				fontSize: 12,
				fontFamily: 'TTTGB-Medium',
				interval: 0,
			},
			yAxisLabel: {
				color: "rgb(133, 215, 253)",
				fontSize: 12,
				fontFamily: 'TTTGB-Medium',
				interval: 0,
			}
		});
		config.echarObj.createVerticalBar(bbsData, 60, false, units);
	}
</script>