Yezb
/
ss_new_ui_skin_and_page


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
							<html lang="cn">
<head>
<meta charset="UTF-8">
<js.ss file="/ss/growHeight.js"/>
<js.ss file="/ss/jquery/jquery.ellipsis.js"/>
<js.ss file="/ss/datePicker/WdatePicker.js"/>
<js.ss file="/ss/edit.js"/>
<js.ss file="/ss/echarts/echarts.js"/>
<style>
	#big_pie_zxstjjc${sybjId} > .ss-placeholder-child,
	#small_pie > .ss-placeholder-child{
		background: transparent;
	}
	#big_pie_zxstjjc${sybjId} {
		display: block;
		position: relative;
		width: calc(100% - 10px);
		margin-left: 5px;
		height: calc(100% - 7px);
		overflow-y: hidden !important;
	}
	#big_pie_zxstjjc${sybjId} .pie {
		position: absolute !important;
		height: 100%;
		width: 100%;
	}
</style>
<script type="text/javascript">
//饼状图
var bzt${sybjId} = {
	option: {
		//color:['#4cabce', '#e5323d'],
		tooltip: {
			grid:{
				right:'10%'
			},
			trigger: 'item',
			//formatter: '{b} : {c} ({d}%)'
			formatter:function(data){
				var num = new Number(data.percent.toFixed(1));
				return  data.name+ " : " + data.value + " ("+num.toFixed(0)+"%)";
			}
		},
		// title: {
		//     left: 'left',
		//     text: '',
		//     textStyle: {
		//         fontSize: 12,
		//         color: '#000000'
		//     }
		// },
		series: [{
			minAngle: 5,           　　 //最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
			avoidLabelOverlap: true,   //是否启用防止标签重叠策略
			type: 'pie',
			radius: '50%',
			center: ['48%', '52%'],
			data: [],
			itemStyle: {
				emphasis: {
					shadowBlur: 10,
					shadowOffsetX: 0,
					shadowColor: 'rgba(0, 0, 0, 0.5)'
				},
				normal: {
					label: {
						show: true,
						//formatter: '{b} : {c} ({d}%)'
						formatter:function(data){
							var num = new Number(data.percent.toFixed(1));
							return  data.name+ " : " + data.value + " ("+num.toFixed(0)+"%)";
						}
					},
					labelLine: {
						show: true
					}
				}
			}
		}]
	}
}
</script>
</head>
<body class="drawer drawer--right" style="background-color: #f2f2f2;overflow-x: hidden;">
<div id="sybj">
	<div class="plugin-component-div">
		<div id="bt" class="plugin-title hLine-highlightBlod" style="margin-bottom: 5px;">
			<span refreshClass="todoPlugin-loadingIcon" class="img-header plugin-icon icon-chart"></span>
			<span style="vertical-align: middle;">在校生人数统计(进出)</span>
			<span class="icon-setHelpButton" style="position: absolute;right: 49px;top: 12px;">
			</span>
			<span class="icon-helpButton" style="position: absolute;right: 15px;top: 12px;">
			</span>
		</div>
		<div id="sybjBody" style="height: calc(100% - 50px)!important;width: 100%;box-sizing: border-box;">
			<div id="sybjBodyInner" style="height: 100%;">
				<div class="smallScrollbar" id="bj${sybjId}" style="height: 100%;">
					<div class="graph-list scrollbar">
						<div id="big_pie_zxstjjc${sybjId}" style="height:100%;float: left;overflow:hidden;">
						</div>
						<!--<div style="height:calc(50% - 1px);border-bottom: 1px solid #ccc;">
								<div id="big_pie_zxstjjc${sybjId}" style="height:100%;float: left;overflow:hidden;">
								</div>
						</div>-->
						<!--<div id="big_pie_zxstjjc${sybjId}_zxt" style="height:50%;">
						</div>-->
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script>
	initPie_zxstjjc();

	function initPie_zxstjjc(val) {
console.log("initPie_zxstjjc")
		var vals = val || {};
		$.ajax({
			type : "get",
			url :"<serv.ss name='jczxsHomep_refresh'/>",	// "homePluginZxstjjc"。Lin
			data : vals,
			dataType: 'json',
			success : function(res) {
				var bzt = res.bzt;
				bzt${sybjId}.option.series[0].data=bzt;
				var targetDOM = document.getElementById("big_pie_zxstjjc${sybjId}");
				///计算饼图大小
				var width = targetDOM.offsetWidth;
				var ts = 12; //复制过来的这里不用
				if(width>200){
					bzt${sybjId}.option.series[0].radius="20%";ts = 7;
				}
				if(width>300){
						bzt${sybjId}.option.series[0].radius="30%";ts = 8;
				}
				if(width>400){
					bzt${sybjId}.option.series[0].radius="35%";ts = 9;
				}
				if(width>500){
					bzt${sybjId}.option.series[0].radius="50%";ts = 10;
				}
				if(width>600){
					bzt${sybjId}.option.series[0].radius="60%";ts = 11;
				}
				if(width>700){
					bzt${sybjId}.option.series[0].radius="65%";ts = 12;
				}
				var twChart = echarts.init(targetDOM);
				twChart.setOption(bzt${sybjId}.option, true);
				twChart.on("click", openDetail_zxstjjc${sybjId});
				twChart.resize();
				window.addEventListener('resize', function () {
						twChart.resize()
				});
			}
		});
	}

	function openDetail_zxstjjc${sybjId}(val){
		var tipval = val.data.tipval;
		var titmc = val.data.name;
		console.log(tipval);
		var json = JSON.parse('{"tipval":"' + encodeURI(tipval) + '","titmc":"' + encodeURI(titmc) + '","type":"' + encodeURI("ry") + '"}');
		var url = '@service{name:"homePluginZxstjjc_cx",dest:"homePluginZxstjjc_cx",show:"wdDialog",param:{type="wdVal{type}",tipval:"wdVal{tipval}",titmc:"wdVal{titmc}"},width:880,height:600}@';
		url = wd.display.replaceDynamicParam(url, json);
		eval(url);
	}

	//3小时刷新一下统计图
	var intervalId = window.setInterval(initPie_zxstjjc${sybjId}, 1000 * 60 * 60 * 3);
</script>
</body>
</html>