基于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 ...
随机推荐
- 两种计算Java对象大小的方法
之前想研究一下unsafe类,碰巧在网上看到了这篇文章,觉得写得很好,就转载过来.原文出处是: http://blog.csdn.net/iter_zc/article/details/4182271 ...
- ORACLE_SPOOL
Question:When you use developer tool in oracle.However,you press Ctrl and click left-mouse in a tabl ...
- 作为软件技术人员建立自己的git账户并保存资料的重要性
日常生活中,当修改并保存了一个文件,所得到的就是此文件的最新版本,假若今后因某一问题需要用到原来文件,可是很多情况下,这种修改是不可逆的.你修改完之后,无法回到你修改前的样子.为了避免这种情况,有的人 ...
- 【CF1009F】Dominant Indices（长链剖分优化DP）
点此看题面 大致题意: 设\(d(x,y)\)表示\(x\)子树内到\(x\)距离为\(y\)的点的个数,对于每个\(x\),求满足\(d(x,y)\)最大的最小的\(y\). 暴力\(DP\) 首先 ...
- 单独使用JDBC编程
一.jdbc编程步骤 1. 加载数据库驱动 2. 创建并获取数据库链接 3. 创建jdbc statement对象 4. 设置sql语句 5. 设置sql语句中的参数(使用preparedStatem ...
- Mysql索引学习笔记
1.btree索引与hash索引 下列范围查询适用于 btree索引和hash索引: SELECT * FROM t1 WHERE key_col = 1 OR key_col IN (15,18,2 ...
- 论文笔记：Progressive Differentiable Architecture Search:Bridging the Depth Gap between Search and Evaluation
Progressive Differentiable Architecture Search:Bridging the Depth Gap between Search and Evaluation ...
- 【洛谷P1983】车站分级
车站分级 题目链接 首先,可以发现火车停靠站点的大小是没有什么规律的, 火车可以停靠在级别<=当前级别的站点,必须停靠在级别>=当前最高级别的站点 但是所有没有被停靠的站点级别一定比所有被 ...
- Android学习笔记_31_通过后台代码生成View对象以及动态加载XML布局文件到LinearLayout
一.布局文件part.xml: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android&qu ...
- pdf.js 在线阅读PDF
在网上找了一下如何在线显示pdf文件.个人还是觉得这个是比较不错的,这里做一个记录. gitHub:https://github.com/mozilla/pdf.js 这是一个开源 ...