基于Echarts构建大数据招聘岗位数据可视化大屏_基于echart高校教师队伍大数据页面_可视化大屏echart

}
.l1{
position: absolute;
width: 30%;
height: 45%;
top: 10%;
left: 0;
background-color: aquamarine;
}
.l2{
position: absolute;
width: 30%;
height: 45%;
top: 55%;
left: 0;
background-color: blue;
}
.c1{
position: absolute;
width: 40%;
height: 25%;
top: 10%;
left: 30%;
}
.num{
width: 25%;
float: left;
display: flex;
align-items: center;
justify-content: center;
color: greenyellow;
font-size: 16px;
}
.txt{
width: 25%;
float: left;
display: flex;
align-items: center;
justify-content: center;
font-family: “幼圆”;
color: whitesmoke;
font-size: 12px;
}
.c2{
position: absolute;
width: 40%;
height: 65%;
top: 35%;
left: 30%;
}
.r1{
position: absolute;
width: 30%;
height: 45%;
top: 10%;
right: 0;
background-color: burlywood;
}
.r2{
position: absolute;
width: 30%;
height: 45%;
top: 55%;
right: 0;
background-color: brown;
}
.tim{
position: absolute;
/* width: 30%; */
height: 10%;
top: 5%;
right: 2%;
font-size: 20px;
color: whitesmoke;
}

### 3.2左边布局


左边分为上下两个部分，左上为条形图和折线图的结合，使用双轴坐标系；左下为环形图。


左上js图表代码：



1
2
3
4
5
6
7
8
9
10
11

var ec_left1 = echarts.init(document.getElementById(‘l1’),“dark”);
var ec_left1_option = {
//标题样式
title : {
text : “工作经验要求”,
textStyle : {
color : ‘white’,
},
left : ‘left’
},
color: [‘#3398DB’,‘#EE6666’],
tooltip: {
trigger: ‘axis’,
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: ‘shadow’ // 默认为直线，可选为：‘line’ | ‘shadow’
}
},
xAxis: {
type: ‘category’,
color : ‘white’,
data: [‘经验不限’,‘1-3年’,‘3-5年’, ‘5-10年’, ‘10年以上’]
},
yAxis: [{
type: ‘value’,
color : ‘white’,
},
{
type: ‘value’,
name: ‘月薪’,
color : ‘white’,
axisLabel: {
formatter: ‘{value}’
}
}
],
series: [{
data: [355, 448, 858, 525, 76],
type: ‘bar’,
barMaxWidth:“50%”
},
{
name: ‘薪资’,
type: ‘line’,
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value;
}
},
data: [19763,21439,33229,42547,101429 ]
}
]
};
ec_left1.setOption(ec_left1_option)

效果如下： 
1