基于pyecharts的IT各行业薪资展示
我们的项目是一个信息采集系统，采集的是51job招聘网站，我爬取了Python，Java，C++,PHP还有北京各地区的职位数量，以及经验要求，和学历要求等等。
网页头;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>真实数据</title>
<link href="../static/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!-- 引入 echarts.js -->
<script type="text/javascript" src="../static/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="../static/js/echarts.js"></script>
<script type="text/javascript" src="../static/js/china.js"></script>
</head>
在头里面，我用了bootstrap这个css，可以不用，只是为了页面好看点，主要需要使用echarts.js这个js模块
Python模块：我只用了5000多个数据，不过是先使用pyechars模块生成的图片结果，然后才用echarts展示了一下，不太会直接在网页里写动态数据。。。
<div id="python" style="width:600px; height: 450px;"></div>
<script type="text/javascript">
var myCharts = echarts.init(document.getElementById("python"));
// 指定图表的配置项和数据
var option = {
title : {
text: '北京Python月薪',
subtext: '来源51job网',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
color:['#3399CC','#666633', '#99FF66','#FFFF99', '#990066','#FF99FF','#330033','#006633'],
backgroundColor: '#FFFFFF',
series : [
{
name: '月薪',
type: 'pie',
radius: '55%',
data:[
{value:56, name:'0-5000'},
{value:596, name:'5000-10000'},
{value:1458, name:'10000-15000'},
{value:970, name:'15000-20000'},
{value:670, name:'20000-25000'},
{value:582, name:'25000-30000'},
{value:142, name:'30000-35000'},
{value:156, name:'35000-40000'}
],
}
]
}
// 使用刚指定的配置项和数据显示图表
myCharts.setOption(option);
</script>
Java:
<div id="java" style="width:600px; height: 450px;margin-top: -450px;margin-left: 600px"></div>
<script type="text/javascript">
var myCharts = echarts.init(document.getElementById("java"));
// 指定图表的配置项和数据
var option = {
title : {
text: 'Java月薪',
subtext: '来源51job网',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
color:['#FFFF99', '#990066','#3399CC','#666633', '#99FF66','#FF99FF','#330033'],
backgroundColor: '#FFFFFF',
series : [
{
name: '月薪',
type: 'pie',
radius: '55%',
data:[
{value:188, name:'0-5000'},
{value:1829, name:'5000-10000'},
{value:1949, name:'10000-15000'},
{value:891, name:'15000-20000'},
{value:397, name:'20000-25000'},
{value:146, name:'25000-30000'},
{value:36, name:'30000-35000'},
{value:9, name:'35000-40000'}
],
}
]
}
// 使用刚指定的配置项和数据显示图表
myCharts.setOption(option);
</script>
运行结果：
C++:
<div id="cplus" style="width:600px; height: 450px;"></div>
<script type="text/javascript">
//指定图标的配置和数据
var option = {
title:{
text:'C++月薪'
},
tooltip:{},
legend:{
data:['用户来源']
},
xAxis:{
data:["0","5000","10000","15000","20000","25000","30000","35000"]
},
yAxis:{ },
series:[{
name:'月薪',
type:'bar',
data:[169,1833,2213,866,367,112,34,16],
itemStyle: {
//通常情况下：
normal:{
//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
color: function (params){
var colorList = ['#FFFF99', '#009966','#990066','#3399CC','#666633', '#99FF66','#FF99FF','#330033'];
return colorList[params.dataIndex];
}
},
}
}]
};
//初始化echarts实例
var myChart = echarts.init(document.getElementById('cplus')); //使用制定的配置项和数据显示图表
myChart.setOption(option);
</script>
PHP：
<div id="php" style="width:600px; height: 450px;margin-left: 600px;margin-top: -450px"></div>
<script type="text/javascript">
//指定图标的配置和数据
var option = {
title:{
text:'PHP月薪'
},
tooltip:{},
legend:{
data:['用户来源']
},
xAxis:{
data:["0","5000","10000","15000","20000","25000","30000","35000"]
},
yAxis:{ },
series:[{
name:'月薪',
type:'bar',
data:[322,2962,1883,645,235,68,17,9],
itemStyle: {
//通常情况下：
normal:{
//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
color: function (params){
var colorList = ['#3399CC','#666633', '#99FF66','#FF99FF','#FFFF99', '#009966','#990066','#330033'];
return colorList[params.dataIndex];
}
},
}
}]
};
//初始化echarts实例
var myChart = echarts.init(document.getElementById('php')); //使用制定的配置项和数据显示图表
myChart.setOption(option);
</script>
北京各地区Python职位分布：
<div id="beijingarea" style="width:1200px; height: 450px"></div>
<script type="text/javascript">
//指定图标的配置和数据
var option = {
title:{
text:'北京各区Python职位数量'
},
tooltip:{},
legend:{
data:['用户来源']
},
xAxis:{
data:['北京','异地招聘','海淀区','朝阳区','丰台区','昌平区','东城区','延庆区',
'房山区','通州区','顺义区','大兴区','怀柔区','西城区','平谷区','门头沟区']
},
yAxis:{ },
series:[{
name:'职位数量',
type:'bar',
data:[1395,177,1611,1004,132,146,126,2,21,21,20,116,0,162,0,3],
itemStyle: {
//通常情况下：
normal:{
//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
color: function (params){
var colorList = ['#3399CC','#666633', '#99FF66','#FF99FF','#FFFF99', '#009966','#990066','#330033',
'#3399CC','#666633', '#99FF66','#FF99FF','#FFFF99', '#009966','#990066','#330033'];
return colorList[params.dataIndex];
}
},
}
}]
};
//初始化echarts实例
var myChart = echarts.init(document.getElementById('beijingarea')); //使用制定的配置项和数据显示图表
myChart.setOption(option);
</script>
运行结果：
职位经验要求
<div id="exp" style="width:600px; height: 450px"></div>
<script type="text/javascript">
//指定图标的配置和数据
var option = {
title:{
text:'工作经验'
},
tooltip:{},
legend:{
data:['用户来源']
},
xAxis:{
data:['应届生','1年以内','1-3年','3-5年','5-10年','经验不限']
},
yAxis:{ },
series:[{
name:'工作经验',
type:'bar',
data:[42,129,838,1013,169,338],
itemStyle: {
//通常情况下：
normal:{
//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
color: function (params){
var colorList = ['#3399CC','#666633', '#99FF66','#FF99FF','#FFFF99', '#009966','#990066','#330033',
'#3399CC','#666633', '#99FF66','#FF99FF','#FFFF99', '#009966','#990066','#330033'];
return colorList[params.dataIndex];
}
},
}
}]
};
//初始化echarts实例
var myChart = echarts.init(document.getElementById('exp')); //使用制定的配置项和数据显示图表
myChart.setOption(option);
</script>
学历要求：
<div id="edu" style="width:600px; height: 450px;margin-left: 600px;margin-top: -450px"></div>
<script type="text/javascript">
//指定图标的配置和数据
var option = {
title:{
text:'学历要求'
},
tooltip:{},
legend:{
data:['用户来源']
},
xAxis:{
data:['大专','本科','硕士','博士','学历不限']
},
yAxis:{ },
series:[{
name:'学历',
type:'bar',
data:[390,1948,143,4,44],
itemStyle: {
//通常情况下：
normal:{
//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
color: function (params){
var colorList = ['#FFFF99', '#009966','#990066','#330033', '#3399CC','#666633', '#99FF66','#FF99FF','#FFFF99', '#009966','#990066','#330033'];
return colorList[params.dataIndex];
}
},
}
}]
};
//初始化echarts实例
var myChart = echarts.init(document.getElementById('edu')); //使用制定的配置项和数据显示图表
myChart.setOption(option);
</script>
从以上结果，我们大体上可以看出，在薪酬方面，Python和Java的月薪都还可以，Python是1万到2万之间的比较多，至于Java和c++和PHP都是5k-1万的多点
在北京各地区招人方面，海淀区和朝阳区是最多的。
在经验要求方面1-3年和3-5年占大头，可能因为数据来源是51job，而不是实习僧这种专业招聘实习生的网站
在学历要求方面 ，本科还是挺吃香的，
数据库部分数据：
爬取数据可以参考我的以前的博客：
Python的scrapy之爬取51job网站的职位 - 雨轩恋i - 博客园 https://www.cnblogs.com/yuxuanlian/p/9721787.html
基于pyecharts的IT各行业薪资展示的更多相关文章
- 基于Echarts的股票K线图展示
发布时间:2018-10-31 技术:javascript+html5+canvas 概述 基于echarts的股票K线图展示,只需引用单个插件,通过简单配置,导入数据,即可实现炫酷复杂的K线 ...
- 基于HTML5 的互联网+地铁行业
前言 近几年,互联网与交通运输的融合,改变了交易模式,影响着运输组织和经营方式,改变了运输主体的市场结构.模糊了运营与非营运的界限,也更好的实现了交通资源的集约共享,同时使得更多依靠外力和企业推动交通 ...
- 中国铁路基于Intel架构超大规模OpenStack行业云的性能优化研究
1. 项目简介 铁路作为一种大众化的交通工具和非常重要的货物运输方式,其业务规模庞大.覆盖全国.服务全国各族人民.铁路面向公众提供的服务业务,主要是客运和货运两大类,且每年365天.每天7*24小时连 ...
- 勤哲excel服务器开发外贸行业薪资考核系统
以外销为驱动的订单行业,外贸业务员的素质直接决定公司效益.然而,大多数外贸公司或以外贸为主的工厂,经常面临外贸业务人员流动性频繁的问题,易 导致客户流失及跟单的困难.科学合理的与业绩挂钩的薪资考核,可 ...
- 2013国内IT行业薪资对照表【技术岗】
(本文为转载,具体出处不详) 说薪水,是所有人最关心的问题.我只 想说如果想在薪水上面满意,在中国,没有哪里比垄断国企好.电力.烟草.通信才是应该努力的方向.但是像我们这种搞研发的进IT行业似乎是注定 ...
- 基于OpenCv和swing的图片/视频展示Java实现
基于OpenCv和swing实现图片/视频的展示 图片的展示 swing展示图片,多为操作BufferedImage,这里要关注的核心是将Mat转为BufferedImage. 代码如下: publi ...
- 基于H5与webGL的 3d 电子围栏展示
前言 现代工业化的推进在极大加速现代化进程的同时也带来的相应的安全隐患,在传统的可视化监控领域,一般都是基于 Web SCADA 的前端技术来实现 2D 可视化监控,本系统采用 Hightopo 的 ...
- 基于 HTML5 Canvas 的机房温度云图展示
前言 在物联网的大趋势下,机房的设备信息以及一些环境信息变成了数据摆在了人们面前.在这个大数据的时代,数据的可视化不仅体现在数据值本身,更应该通过数据的变化来获取一些信息.我们今天的主题,机房温度云图 ...
- 基于bootstrap的图片轮播效果展示
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8&q ...
随机推荐
- python大数据
http://blog.csdn.net/xnby/article/details/50782913 一句话总结:spark是一个基于内存的大数据计算框架, 上层包括了:Spark SQL类似Hive ...
- Servlet 2.5为cookie配置HTTPOnly属性
cookie的HTTPOnly属性,主要是用来防止JavaScript来读取cookie,默认情况下,JavaScript可以通过document.cookie来读取cookie,这样是很不安全的.通 ...
- TELNET_COMMAND
TELENT COMMAND DEFINE:Telnet is a command control your cmd windows of remote computer. step: 1.Open ...
- Spring中<context:annotation-config/>的作用
spring中<context:annotation-config/>配置的作用,现记录如下: <context:annotation-config/>的作用是向Spring容 ...
- 我的HTML总结之表单
表单是Web中实现交互的重要方法,用于收集用户信息并提交给服务器. 表单中的9大控件 <input type="text" name="key" va ...
- 遍历目录树 - Unicode 模式
=info 遍历目录树 支持 Unicode Code by 523066680@163.com 2017-03 V0.5 使用Win32API判断目录硬链接 ...
- 走进git
一.什么是git和githob? Git是一款免费.开源的分布式版本控制系统.Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件.Githu ...
- vue-router异步加载组件
export default { routes: [ { path: '/fund', name: 'FundManagement', component: function(resolve) { r ...
- (转)C++11使用emplace_back代替push_back (其中有关于右值引用)
最近在写一段代码的时候,突然很好奇C++11中对push_back有没有什么改进以增加效率,上网搜了一些资料,发现果然新增了emplace_back方法,比push_back的效率要高很多. 首先,写 ...
- 20165322 实验二《Java面向对象程序设计》实验报告
实验二<Java面向对象程序设计>实验报告 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S.O.L.I.D原则 了解设计模式 实 ...