基于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 ...
随机推荐
- file中mkdirs和mkdir的区别-文件上传
mkdirs()可以建立多级文件夹, mkdir()只会建立一级的文件夹, 如下: new File("/tmp/one/two/three").mkdirs(); 执行后, 会建 ...
- jquery：jqery表单属性 值操作
重置表单(且清空隐藏域) $('#myform')[0].reset() DOM属性相关操作 返回属性值 $(selector).attr(attribute) 设置属性值 $(selecto ...
- C语言实现一元多项式求积
#include <stdio.h>#include <stdlib.h>#include <math.h>typedef struct Node{ int ...
- Angular项目新建
Angular新建项目步骤记录 标签(空格分隔): Angular 1. ng new my-app 2. 启动dev环境 cd my-app ng serve --open 3. 修改styles. ...
- php连接MySQL分析
Mysql:在PHP脚本中操作MySQL数据库的的几个步骤如下: 1.连接MySQL数据库服务器,并判断是否连接正确 2.选择数据库,并设置字符集(可选) 3.执行SQL命令 4.处理结果集 5.关闭 ...
- 用 dbgrid 或 dbgrideh 如何让所显示数据自动滚动
procedure TForm1.Timer1Timer(Sender: TObject);varm:tmessage;begin m.Msg:=WM_VSCROLL; m.WParamLo:=SB_ ...
- Jmeter入门14 后置处理器JSON Extractor 提取json的多个值
json串 []表示对象组成的数组,{}表示对象. 对象里包含多个 "属性":属性值.属性值可以是值,或数组,或对象. JSON Extractor使用json path表达式匹配 ...
- 【翻译】苹果官网的命名规范之 Naming Properties and Data Types
苹果官方原文:Naming Properties and Data Types 前言:纯属练习英语和学习.翻译错误和不通顺的地方敬请谅解和指正.O(∩_∩)O 属性和数据类型的命名 本节讲述了属性定义 ...
- Pod常使用命令
pod 命令汇总 # 创建默认的 Podfile $ pod init # 第一次使用安装框架 $ pod install # 安装框架,不更新本地索引,速度快 $ pod install --no- ...
- 【洛谷P3818】小A和uim之大逃离 II
小A和uim之大逃离 II 题目链接 比较裸的搜索,vis[i][j]再加一层[0/1]表示是否使用过魔液 转移时也将是否使用过魔液记录下来,广搜即可 #include<iostream> ...