插入表格

getJob.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
-    <title>Bootstrap 101 Template</title>
+    <title>就业在线数据大屏</title>
     <!-- Bootstrap -->
     <link rel="stylesheet" href="css/bootstrap.min.css">
     <link rel="stylesheet" href="css/app.css">
@@ -150,7 +150,7 @@
 					<div class="bgJiao bgJiao-3"><img src="img/Union-3.png" alt=""></div>
 					<div class="bgJiao bgJiao-4"><img src="img/Union-2.png" alt=""></div>
 					<div class="title">在岗人才统计</div>
-					<div class="content">
+					<div class="content" id="main1">
 						<!-- 插入图表1 --> 
 					</div>
 				</div>
@@ -181,7 +181,7 @@
 			  <div class="title">
 			  	<h3>开发区人才流动统计</h3>
 			  </div>
-			  <div class="content boot-chart">
+			  <div class="content boot-chart"  id="main2">
 				<!-- 插入图表2 --> 
 			  </div>
 		  </div>
@@ -249,7 +249,7 @@
 			<div class="title">
 				<h3>各行业用工缺口占比</h3>
 			</div>
-			<div class="content right-content-2">
+			<div class="content right-content-2"  id="main3">
 				<!-- 插入图表3 -->
 			</div>
 		</div>
@@ -260,6 +260,7 @@
     <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
     <script src="js/bootstrap.min.js"></script>
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
+	<script src="./linkjs/getJob.js"></script>
 
 	<style>
 		.statistics-list{

linkjs/getJob.js

@@ -0,0 +1,134 @@
+$(function() {
+	function createBar2() {
+		
+		var chartDom = document.getElementById('main2');
+		var myChart = echarts.init(chartDom);
+		var option;
+		
+		option = {
+			tooltip: {
+			   trigger: 'axis'
+			 },
+		  xAxis: {
+		    type: 'category',
+		    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+		  },
+		  yAxis: {
+		    type: 'value'
+		  },
+		  series: [
+		    {
+		      data: [120, 200, 150, 80, 70, 110, 130],
+		      type: 'bar'
+		    },
+			{
+			  data: [120, 200, 150, 80, 70, 110, 130],
+			  type: 'bar'
+			}
+		  ]
+		};
+		
+		option && myChart.setOption(option);
+
+		
+	}
+	function createBar3() {
+ 		
+		var chartDom = document.getElementById('main3');
+		var myChart = echarts.init(chartDom);
+		var option;
+		
+		option = {
+		  title: {
+		    text: 'Referer of a Website',
+		    subtext: 'Fake Data',
+		    left: 'center'
+		  },
+		  tooltip: {
+		    trigger: 'item'
+		  },
+		  legend: {
+		    orient: 'vertical',
+		    left: 'left'
+		  },
+		  series: [
+		    {
+		      name: 'Access From',
+		      type: 'pie',
+		      radius: '50%',
+		      data: [
+		        { value: 1048, name: 'Search Engine' },
+		        { value: 735, name: 'Direct' },
+		        { value: 580, name: 'Email' },
+		        { value: 484, name: 'Union Ads' },
+		        { value: 300, name: 'Video Ads' }
+		      ],
+		      emphasis: {
+		        itemStyle: {
+		          shadowBlur: 10,
+		          shadowOffsetX: 0,
+		          shadowColor: 'rgba(0, 0, 0, 0.5)'
+		        }
+		      }
+		    }
+		  ]
+		};
+		
+		option && myChart.setOption(option);
+
+	}
+	 
+	
+	function createBar1(title, data, clickEvent) {
+		
+		
+		var chartDom = document.getElementById('main1');
+		var myChart = echarts.init(chartDom);
+		var option;
+		
+		option = {
+		  title: {
+		    text: 'Referer of a Website',
+		    subtext: 'Fake Data',
+		    left: 'center'
+		  },
+		  tooltip: {
+		    trigger: 'item'
+		  },
+		  legend: {
+		    orient: 'vertical',
+		    left: 'left'
+		  },
+		  series: [
+		    {
+		      name: 'Access From',
+		      type: 'pie',
+		      radius: '50%',
+		      data: [
+		        { value: 1048, name: 'Search Engine' },
+		        { value: 735, name: 'Direct' },
+		        { value: 580, name: 'Email' },
+		        { value: 484, name: 'Union Ads' },
+		        { value: 300, name: 'Video Ads' }
+		      ],
+		      emphasis: {
+		        itemStyle: {
+		          shadowBlur: 10,
+		          shadowOffsetX: 0,
+		          shadowColor: 'rgba(0, 0, 0, 0.5)'
+		        }
+		      }
+		    }
+		  ]
+		};
+		
+		option && myChart.setOption(option);
+
+		
+	}
+	
+	createBar1();
+	createBar2();
+	createBar3();
+	
+})

linkjs/recruit.js

@@ -0,0 +1,308 @@
+$(function() {
+	function createBar2() {
+		
+		var chartDom = document.getElementById('main2');
+		var myChart = echarts.init(chartDom);
+		var option;
+		
+		option = {
+		  legend: {
+			  top:300,
+			  left:20,
+			  textStyle:{
+				  fontSize: 16,
+				  color: '#fff',
+			  },
+			
+		     data: ['入场人数', '浏览人数', '投递人数']
+		   },
+		  color: [
+		    '#4e6eac',
+		    '#6895f7',
+		    '#8aadf9',
+		   
+		  ],
+		  xAxis: { show: false },
+		  yAxis: { show: false, type: 'category', inverse: true, min: 0, max: 6 },
+		  series: [
+		    {
+		      type: 'funnel',
+		      minSize: 50,
+		      maxSize: '100%',
+		      left: '4%',
+		      top: 0,
+		      bottom: 50,
+		      gap: 2,
+		      label: {
+		        position: 'inside',
+		        fontFamily: 'Microsoft YaHei',
+		        fontSize: 16,
+		        color: '#fff',
+		        formatter: '{c}%',
+		        rich: { xx: { padding: [6, 0] } }
+		      },
+		      data: [
+		        { value: 100, name: '入场人数' },
+		        { value: 80, name: '浏览人数' },
+		        { value: 20, name: '投递人数' },
+		      ]
+		    },
+		    
+		   
+		  ]
+		};
+
+		
+		option && myChart.setOption(option);
+
+		
+	}
+	function createBar3() {
+ 		
+		var chartDom = document.getElementById('main3');
+		var myChart = echarts.init(chartDom);
+		var option;
+		
+		option = {
+			 tooltip: {
+			    trigger: 'axis'
+			  },
+			grid:{
+				x:50,y:30,x2:40,y2:30,
+			},
+			textStyle: {
+			    color: '#cccccc',
+			   fontSize: 20
+			},
+		  xAxis: {
+		    type: 'category',
+		    boundaryGap: false,
+			
+		    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Sun2',]
+		  },
+		  yAxis: {
+		    type: 'value',
+		  },
+		  series: [
+		    {
+		      data: [null,120, 932, 901, 934, 1290, 1330, 1320],
+		      type: 'line',
+		      areaStyle: {}
+		    }
+		  ]
+		};
+		
+		option && myChart.setOption(option);
+
+	}
+	function createBar4() {
+		
+		var chartDom = document.getElementById('main4');
+		var myChart = echarts.init(chartDom);
+		var option;
+		
+		option = {
+			textStyle: {
+			    color: '#cccccc',
+			   fontSize: 20
+			},
+			 grid: {
+			    left: '3%',
+			    right: '4%',
+			    bottom: '3%',
+			    containLabel: true
+			  },
+		  xAxis: {
+		    type: 'category',
+		    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+		  },
+		  yAxis: {
+		    type: 'value'
+		  },
+		  series: [
+		    {
+		      data: [120, 200, 150, 80, 70, 110, 130],
+		      type: 'bar'
+		    }
+		  ]
+		};
+		
+		option && myChart.setOption(option);
+
+	}
+	
+	function createBar1(title, data, clickEvent) {
+		
+		
+		var chartDom = document.getElementById('main1');
+		var myChart = echarts.init(chartDom);
+		var option;
+		
+		option = {
+			title:[
+			    {                       
+			        text: '求职者性别分布',
+			        left:'8%',//居中显示
+			        top:'80%',//底部显示
+			        textStyle: {
+			            color: '#cccccc',
+			            fontSize: 20
+			        }
+			    },
+			    {                       
+			        text: '求职者年龄分布',
+			        left:'43%',//居中显示
+			        top:'80%',//底部显示
+			        textStyle: {
+			            color: '#cccccc',
+			           fontSize: 20
+			        }
+			    },
+			    {                       
+			         text: '求职者学历分布',
+			        left:'73%',//居中显示
+			        top:'80%',//底部显示
+			        textStyle: {
+			            color: '#cccccc',
+			          fontSize: 20
+			        }
+			    }],
+		  dataset: [
+		    {
+		      source: [
+		        ['Product', 'Sales', 'Price', 'Year'],
+		        ['啊大', 123, 32, 2011],
+		        ['中砂', 231, 14, 2011],
+		        ['豆腐', 235, 5, 2011],
+		        ['米有', 341, 25, 2011],
+		        ['碧霞', 122, 29, 2011],
+				
+		        ['啊大', 143, 30, 2012],
+		        ['中砂', 201, 19, 2012],
+		        ['豆腐', 255, 7, 2012],
+		        ['米有', 241, 27, 2012],
+		        ['碧霞', 102, 34, 2012],
+				
+		        ['啊大', 153, 28, 2013],
+		        ['中砂', 181, 21, 2013],
+		        ['豆腐', 395, 4, 2013],
+		        ['米有', 281, 31, 2013],
+		        ['碧霞', 92, 39, 2013],
+				
+		        ['啊大', 223, 29, 2014],
+		        ['中砂', 211, 17, 2014],
+		        ['豆腐', 345, 3, 2014],
+		        ['米有', 211, 35, 2014],
+		        ['碧霞', 72, 24, 2014]
+		      ]
+		    },
+		    {
+		      transform: {
+		        type: 'filter',
+		        config: { dimension: 'Year', value: 2011 }
+		      }
+		    },
+		    {
+		      transform: {
+		        type: 'filter',
+		        config: { dimension: 'Year', value: 2012 }
+		      }
+		    },
+		    {
+		      transform: {
+		        type: 'filter',
+		        config: { dimension: 'Year', value: 2013 }
+		      }
+		    }
+		  ],
+		  series: [
+		    {
+		      type: 'pie',
+		      label: {
+		      normal: {
+				  
+					  textStyle : {
+					 
+					  color: '#cccccc',
+					  
+					  fontSize : '12px'
+					  
+					  },
+				  },
+				
+				},
+				radius:[40, 60],
+								 
+				datasetIndex: 1
+			},
+		    {
+				label: {
+				normal: {
+								  
+									  textStyle : {
+									 
+									  color: '#cccccc',
+									  
+									  fontSize : '12px'
+									  
+									  },
+								  },
+								
+								},
+		      type: 'pie',
+		      radius:[40, 60], 
+		      datasetIndex: 2
+		    },
+		    {
+				label: {
+				normal: {
+								  
+									  textStyle : {
+									 
+									  color: '#cccccc',
+									  
+									  fontSize : '12px'
+									  
+									  },
+								  },
+								
+								},
+		      type: 'pie',
+		       radius:[40, 60], 
+		      datasetIndex: 3
+		    }
+		  ],
+		  // Optional. Only for responsive layout:
+		  media: [
+		    {
+		      query: { minAspectRatio: 1 },
+		      option: {
+		        series: [
+		          { center: ['18%', '50%'] },
+		          { center: ['50%', '50%'] },
+		          { center: ['82%', '50%'] }
+		        ]
+		      }
+		    },
+		    {
+		      option: {
+		        series: [
+		          { center: ['50%', '25%'] },
+		          { center: ['50%', '50%'] },
+		          { center: ['50%', '75%'] }
+		        ]
+		      }
+		    }
+		  ]
+		};
+		
+		option && myChart.setOption(option);
+
+		
+	}
+	
+	createBar1();
+	createBar2();
+	createBar3();
+	createBar4();
+})

propagate.html

@@ -5,7 +5,7 @@
 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
-		<title>Bootstrap 101 Template</title>
+		<title>宣传展示大屏</title>
 		<!-- Bootstrap -->
 		<link rel="stylesheet" href="css/bootstrap.min.css">
 		<link rel="stylesheet" href="css/app.css">
@@ -160,6 +160,7 @@
 		<script src="js/jquery.min.js"></script>
 		<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
 		<script src="js/bootstrap.min.js"></script>
+	<script src="./linkjs/propagate.js"></script>
 
 		<style>
 			.propagateInfo-right{

recruit.html

@@ -5,10 +5,11 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
-    <title>Bootstrap 101 Template</title>
+    <title>招聘会数据大屏</title>
     <!-- Bootstrap -->
     <link rel="stylesheet" href="css/bootstrap.min.css">
     <link rel="stylesheet" href="css/app.css">
+	   
     <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
     <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
     <!--[if lt IE 9]>
@@ -137,7 +138,7 @@
 					<span>280</span>
 				</div>
 			</div>
-			<div class="dataChart">
+			<div class="dataChart" id="main1">
 				<!-- 插入图表1 -->
 			</div>
 		  </div>
@@ -145,7 +146,7 @@
 			  <div class="title">
 			  	<h3>今日入场人流量统计</h3>
 			  </div>
-			  <div class="content boot-chart">
+			  <div class="content boot-chart" id="main3">
 				<!-- 插入图表1 --> 
 			  </div>
 		  </div>
@@ -155,7 +156,7 @@
 			<div class="title">
 				<h3>招聘会求职转化率</h3>
 			</div>
-			<div class="content right-content-1">
+			<div class="content right-content-1" id="main2">
 				<!-- 插入图表3 -->
 			</div>
 		</div>
@@ -163,7 +164,7 @@
 			<div class="title">
 				<h3>企业招聘平均耗时统计</h3>
 			</div>
-			<div class="content right-content-2">
+			<div class="content right-content-2" id="main4">
 				<!-- 插入图表4 -->
 			</div>
 		</div>
@@ -174,7 +175,8 @@
     <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
     <script src="js/bootstrap.min.js"></script>
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
-
+	<script src="./linkjs/recruit.js"></script>
+ 
 	<style>
 		.boot-chart{
 			height: 250px;