clq1010
/
ZKYYCallCenter_UI


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413
							<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<script src="./Script/Common/huayi.load.js"></script>
		<script src="./Script/Common/huayi.config.js"></script>
		<link rel="stylesheet" href="css/widgets/widgets.css" />
		<style>
			@font-face {
				font-family: 'iconfont';
				src: url('fonts/iconfont.eot');
				/* IE9*/
				src: url('fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
				url('fonts/iconfont.woff') format('woff'), /* chrome、firefox */
				url('fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
				url('fonts/iconfont.svg#iconfont') format('svg');
				/* iOS 4.1- */
			}
			
			.iconfont {
				font-family: "iconfont";
				font-size: 40px;
				font-style: normal;
			}
		</style>
	</head>

	<body class="gray-bg">
		<div class="wrapper wrapper-content animated fadeInRight">
			<div class="row">
				<div class="col-sm-4">
					<div class="widget style1 bc">
						<div class="row row-1">
							<div class="col-xs-3 text-center">
								<i class="fa iconfont fa-4x-1">&#xe3a2;</i>
								<!--<i class="fa iconfont fa-4x bg_black">&#xe3a2;</i>-->
							</div>
							<div class="mins-left">
								<h2 class="size-16 jg min_bottom">医疗随访</h2>
								<h2 class="font-bold size-15 min_bottom">99条</h2>
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-4">
					<div class="widget style1 bc ">
						<div class="row row-2">
							<div class="col-xs-3">
								<i class="fa iconfont fa-4x-2">&#xe3ad;</i>
							</div>
							<div class="mins-left">
								<h2 class="size-16 jg min_bottom">科研随访</h2>
								<h3 class="font-bold size-15 ">66条</h3>
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-4">
					<div class="widget style1 bc">
						<div class="row row-3">
							<div class="col-xs-3">
								<i class="fa iconfont fa-4x-3">&#xe3a9;</i>
							</div>
							<div class="mins-left">
								<h2 class="size-16 jg min_bottom">医生随访</h2>
								<h3 class="font-bold size-15 ">66条</h3>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12" style="width: 100%; margin-bottom: 30px;">
					<div class="left_box rows num_box">
						<!--<b class="rowTitle">工单信息</b>-->
						<div id="main1" style="text-align: center; margin-top: 30px; width: 100%; height: 300px;">
							<!--<div class="flot-chart-content" id="flot-line-chart" style='height: 300px;'></div>-->
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-4" style=" width: 34%; margin-top: 30px;">
					<div class="ibox-content">
						<div class="ibox float-e-margins">
							<!--<div class="ibox-title border_top padding-left-min">
								<div class=" margin-tops">
									<h3>去年同月相比<strong> ↑ 4.3%</strong></h3>
									 <h3 class="size-20">↑ <strong>4.3%</strong></h3>
								</div>
							</div>-->
							<div style="width: 100%;">
								<div id="main3" style='height: 200px; width: 80%;'></div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-4" style=" width: 33%; margin-top: 30px;">
					<div class="ibox-content">
						<div class="ibox float-e-margins">
							<div style="width: 100%;">
								<div id="main2" style='height: 200px; width: 100%;'></div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-4" style=" width: 33%; margin-top: 30px;">
					<div class="ibox-content">
						<div class="float-e-margins">
							<div style="width: 100%;">
								<div id="main4" style='height: 220px; width: 100%; margin-top: 20px;'></div>
							</div>
						</div>
					</div>
				</div>
			</div>

		</div>
		<script src="./js/jquery-ui-1.10.4.min.js"></script>
		<script src="./js/content.min.js?v=1.0.0"></script>
		<script src="./js/echarts.common.min.js"></script>
		<script src="js/echarts.min.js"></script>
		<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
		<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
		<script>
			var myChart1 = echarts.init(document.getElementById('main1'));
			// 指定图表的配置项和数据
			var option1 = {
				title: {
					text: '医院随访折线图',
					x: 'center',
					y: 15,
				},
				xAxis: {
					type: 'category',
					data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
				},
				yAxis: {
					type: 'value'
				},
				series: [{
					name: '随访量',
					data: [40, 30, 50, 80, 100, 80, 110],
					type: 'line'
				}]
			};
			// 使用刚指定的配置项和数据显示图表。
			myChart1.setOption(option1);
			//			图标二
			var myChart2 = echarts.init(document.getElementById('main2'));
			// 指定图表的配置项和数据
			var option2 = {
				title: {
					text: '各类随访汇总图',
					x: 'left'
				},
				tooltip: {
					trigger: 'item',
					formatter: "{a} <br/>{b} : {c} ({d}%)"
				},
				legend: {
					x: 'center',
					y: 'bottom',
					data: ['医疗随访', '科研随访', '医生随访']
				},
				//				toolbox: {
				//					show: true,
				//					feature: {
				//						mark: {
				//							show: true
				//						},
				//						dataView: {
				//							show: true,
				//							readOnly: false
				//						},
				//						magicType: {
				//							show: true,
				//							type: ['pie', 'funnel']
				//						},
				//						restore: {
				//							show: true
				//						},
				//						saveAsImage: {
				//							show: true
				//						}
				//					}
				//				},
				calculable: true,
				series: [{
					name: '所占百分比',
					type: 'pie',
					radius: [20, 50],
					center: ['50%', '50%'],
					roseType: 'radius',
					label: {
						normal: {
							show: false
						},
						emphasis: {
							show: true
						}
					},
					lableLine: {
						normal: {
							show: false
						},
						emphasis: {
							show: true
						}
					},
					data: [{
							value: 5,
							name: '医疗随访'
						},
						{
							value: 10,
							name: '科研随访'
						},
						{
							value: 20,
							name: '医生随访'
						}
					]
				}]
			};
			// 使用刚指定的配置项和数据显示图表。
			myChart2.setOption(option2);

			//			图3
			var myChart3 = echarts.init(document.getElementById('main3'));
			// 指定图表的配置项和数据
			var option3 = {

				title: {
					text: '随访总概图'
				},
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					x: 'center',
					data: ['某软件', '某主食手机', '某水果手机', '降水量', '蒸发量']
				},
				radar: [{
					indicator: [{
							text: '通话次数',
							max: 100
						},
						{
							text: '随访次数',
							max: 100
						},
						{
							text: '工单数量',
							max: 100
						},
						{
							text: '预约次数',
							max: 100
						},
						{
							text: '出诊次数',
							max: 100
						},
						{
							text: '问卷调查',
							max: 100
						}
					],
					center: ['50%', '55%'],
					radius: 60
				}],
				series: [{
					type: 'radar',
					tooltip: {
						trigger: 'item'
					},
					itemStyle: {
						normal: {
							areaStyle: {
								type: 'default'
							}
						}
					},
					data: [{
						value: [60, 73, 85, 40, 30, 50, ],
						//							name: '某软件'
					}]
				}]
			};
			// 使用刚指定的配置项和数据显示图表。
			myChart3.setOption(option3);

			//图四
			// 指定图表的配置项和数据
			var myChart4 = echarts.init(document.getElementById('main4'));
			var dataAxis = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
			var data = [20, 10, 8, 30, 18, 15, 13, 11, 10, 22];
			var yMax = 40;
			var dataShadow = [];
			
			for (var i = 0; i < data.length; i++) {
			    dataShadow.push(yMax);
			}
			var option4 = {
				title: {
					text: '近10天出诊车辆随访柱状图',
				},
				xAxis: {
					data: dataAxis,
					axisLabel: {
						inside: true,
						textStyle: {
							color: '#fff'
						}
					},
					axisTick: {
						show: false
					},
					axisLine: {
						show: false
					},
					z: 10
				},
				yAxis: {
					axisLine: {
						show: false
					},
					axisTick: {
						show: false
					},
					axisLabel: {
						textStyle: {
							color: '#999'
						}
					}
				},
				dataZoom: [{
					type: 'inside'
				}],
				series: [{ // For shadow
						type: 'bar',
						itemStyle: {
							normal: {
								color: 'rgba(0,0,0,0.05)'
							}
						},
						barGap: '-100%',
						barCategoryGap: '40%',
						data: dataShadow,
						animation: false
					},
					{
						type: 'bar',
						itemStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(
									0, 0, 0, 1, [{
											offset: 0,
											color: '#83bff6'
										},
										{
											offset: 0.5,
											color: '#188df0'
										},
										{
											offset: 1,
											color: '#188df0'
										}
									]
								)
							},
							emphasis: {
								color: new echarts.graphic.LinearGradient(
									0, 0, 0, 1, [{
											offset: 0,
											color: '#2378f7'
										},
										{
											offset: 0.7,
											color: '#2378f7'
										},
										{
											offset: 1,
											color: '#83bff6'
										}
									]
								)
							}
						},
						data: data
					}
				]
			};
			// Enable data zoom when user click bar.
			var zoomSize = 10;
			myChart4.on('click', function (params) {
			    console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
			    myChart.dispatchAction({
			        type: 'dataZoom',
			        startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
			        endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
			    });
			});
			// 使用刚指定的配置项和数据显示图表。
			myChart4.setOption(option4);
		</script>

	</body>

</html>