基于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 ...
随机推荐
- postman接口案例
接口测试 什么是接口(API) API全称Application Programming Interface,这里面我们其实不用去关注AP,只需要I上就可以.一个API就是一个Interface.我们 ...
- 使用gulp解决外部编辑器修改Eclipse文件延迟刷新
本人前端用惯了Hbuilder,修改了eclipse项目中的文件后,由于是外部编辑器修改过的,eclipse不会自动部署更新,一般按F5刷新项目,或者在 preferences > genera ...
- java面试之----堆(heap)、栈(stack)和方法区(method)
JAVA的JVM的内存可分为3个区:堆(heap).栈(stack)和方法区(method)也叫静态存储区. 堆区: 1.存储的全部是对象,每个对象都包含一个与之对应的class的信息.(class的 ...
- 基于iframe的CFS(Cross Frame Script)和Clickjacking(点击劫持)攻击
攻击原理: CFS攻击(Cross Frame Script(跨框架脚本)攻击)是利用浏览器允许框架(frame)跨站包含其它页面的漏洞,在主框架的代码 中加入scirpt,监视.盗取用户输入 ...
- react-webpack-express
这是一个整合react express 实现前后台交互,并且采用webpack进行打包和解析文件.其实react官方有一个脚手架create react app,也可以看那个,但是这个脚手架webpa ...
- python入门4 python查看数据类型及类型转换
查看数据类型:type() 类型转换:int(),float(),char(),ord(),str(),bool() #coding:utf-8 #/usr/bin/python "&quo ...
- Android获取手机安装的浏览器列表
最近碰到一个同事询问如何查询本地安装的浏览器列表,其使用的代码如下: public static List<ResolveInfo> getBrowserList(Context cont ...
- CodeForces-822D 【最小素因子应用】
任意门:https://vjudge.net/problem/CodeForces-822D D. My pretty girl Noora time limit per test 1.5 secon ...
- 行云管家V4.9正式发布：监控全面提升，首页、主机详情大幅优化，新增大量实用功能.md
让大家久等啦!4.9版本中我们对监控模块进行了重构,在数据准确性与稳定性方面做了大幅提升.我们也对首页及主机详情页面做了大幅重构,以追求为您提供极致的用户体验.同时我们在新版本中增加了如:运维报表.用 ...
- Android学习笔记_12_网络通信之从web获取资源数据到Android
从web获取图片信息,并显示到android的imageView控件. 一.添加网络访问权限. <uses-permission android:name="android.permi ...