jp-employment-kfq-large/linkjs/recruit.js

$(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();
})