Initial commit
This commit is contained in:
213
src/views/portraitScreen/components/Jgrzcgl.vue
Normal file
213
src/views/portraitScreen/components/Jgrzcgl.vue
Normal file
@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<!-- 技能岗位薪资酬对比 -->
|
||||
<div ref="gwxcdbEcharts" style="width: 100%; height: 100%"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, ref, nextTick } from "vue";
|
||||
const gwxcdbEcharts = ref()
|
||||
onMounted(() => {
|
||||
lineChartFn();
|
||||
});
|
||||
|
||||
//初始化统计图
|
||||
const lineChartFn = () => {
|
||||
var option = {
|
||||
color: ["#00DFE3", "#00ABFB", "#21F9A3", "#F9C521"],
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "cross",
|
||||
label: {
|
||||
backgroundColor: "#6a7985"
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ["技能岗位需求数", '非技能岗位需求数'],
|
||||
show: true,
|
||||
right: 10,
|
||||
top: 10,
|
||||
textStyle: { color: "#fff", fontSize: 32 },
|
||||
},
|
||||
grid: {
|
||||
top: "10%",
|
||||
right: "10%",
|
||||
left: "10%",
|
||||
bottom: "4%",
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
show: true,
|
||||
data: ['2020', '2021', '2022', '2023', '2024'],
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 30,
|
||||
interval: 0
|
||||
},
|
||||
lineStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
type: "value",
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 30,
|
||||
interval: 0
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgb(15,36,90)",
|
||||
type: "solid"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "技能岗位需求数",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
// smooth: true,
|
||||
lineStyle: {
|
||||
width: 2
|
||||
},
|
||||
// showSymbol: false,
|
||||
// areaStyle: {
|
||||
// opacity: 0.8,
|
||||
// color: {
|
||||
// opacity: 0.8,
|
||||
// colorStops: [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: "rgba(0,233,227,0)"
|
||||
// },
|
||||
// {
|
||||
// offset: 0.5,
|
||||
// color: "rgba(0,233,227,0.5)"
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "rgba(0,233,227,1)"
|
||||
// }
|
||||
// ],
|
||||
// global: false
|
||||
// }
|
||||
// },
|
||||
|
||||
emphasis: {
|
||||
focus: "series"
|
||||
},
|
||||
data: [6700, 7800, 10100, 11010, 13200]
|
||||
},
|
||||
{
|
||||
name: "非技能岗位需求数",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
// smooth: true,
|
||||
lineStyle: {
|
||||
width: 2
|
||||
},
|
||||
// showSymbol: false,
|
||||
// areaStyle: {
|
||||
// opacity: 0.8,
|
||||
// color: {
|
||||
// opacity: 0.8,
|
||||
// colorStops: [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: "rgba(0,233,227,0)"
|
||||
// },
|
||||
// {
|
||||
// offset: 0.5,
|
||||
// color: "rgba(0,233,227,0.5)"
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "rgba(0,233,227,1)"
|
||||
// }
|
||||
// ],
|
||||
// global: false
|
||||
// }
|
||||
// },
|
||||
|
||||
emphasis: {
|
||||
focus: "series"
|
||||
},
|
||||
data: [18600, 17100, 14200, 13100, 13200]
|
||||
},
|
||||
{
|
||||
name: "增幅",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
// smooth: true,
|
||||
lineStyle: {
|
||||
width: 2
|
||||
},
|
||||
// showSymbol: false,
|
||||
// areaStyle: {
|
||||
// opacity: 0.8,
|
||||
// color: {
|
||||
// opacity: 0.8,
|
||||
// colorStops: [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: "rgba(0,233,227,0)"
|
||||
// },
|
||||
// {
|
||||
// offset: 0.5,
|
||||
// color: "rgba(0,233,227,0.5)"
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "rgba(0,233,227,1)"
|
||||
// }
|
||||
// ],
|
||||
// global: false
|
||||
// }
|
||||
// },
|
||||
|
||||
emphasis: {
|
||||
focus: "series"
|
||||
},
|
||||
data: [20, 20, 20]
|
||||
},
|
||||
]
|
||||
};
|
||||
nextTick(() => {
|
||||
var myChart = echarts.init(gwxcdbEcharts.value);
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", () => {
|
||||
myChart.resize();
|
||||
});
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
66
src/views/portraitScreen/components/Jgsl.vue
Normal file
66
src/views/portraitScreen/components/Jgsl.vue
Normal file
@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<!-- 机构数量 -->
|
||||
<ul>
|
||||
<li v-for="item in dataList" :key="item">
|
||||
<div class="name_text">{{ item.name }}</div>
|
||||
<div class="num">{{ item.num }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, ref, nextTick } from "vue";
|
||||
const jgslEcharts = ref();
|
||||
const dataList = ref([
|
||||
{
|
||||
name: '招聘机构',
|
||||
num: 17
|
||||
},
|
||||
{
|
||||
name: '猎头公司',
|
||||
num: 0
|
||||
},
|
||||
{
|
||||
name: '培训机构',
|
||||
num: 5
|
||||
},
|
||||
{
|
||||
name: '劳务派遣',
|
||||
num: 2
|
||||
}
|
||||
])
|
||||
onMounted(() => {
|
||||
});
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
li {
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
font-size: 18px;
|
||||
height: 450px;
|
||||
display: flex;
|
||||
font-family: "YSBTH";
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.name_text {
|
||||
font-size: 2.2vw;
|
||||
width: 100%;
|
||||
color: aqua;
|
||||
}
|
||||
.num{
|
||||
font-size: 2vw;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
115
src/views/portraitScreen/components/csgf.vue
Normal file
115
src/views/portraitScreen/components/csgf.vue
Normal file
@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<!-- 失业率 -->
|
||||
<div ref="sylEcharts" style="width: 100%; height: 100%"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, ref, nextTick } from "vue";
|
||||
const sylEcharts = ref();
|
||||
onMounted(() => {
|
||||
lineChartFn();
|
||||
});
|
||||
|
||||
//初始化统计图
|
||||
const lineChartFn = () => {
|
||||
let option = {
|
||||
legend: {
|
||||
show: true
|
||||
},
|
||||
grid: {
|
||||
left: "10px",
|
||||
right: "30px",
|
||||
bottom: "10px",
|
||||
top: "20px",
|
||||
containLabel: true
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
axisLine: { lineStyle: { color: "#c3c5c8" } },
|
||||
splitLine: { show: false },
|
||||
axisLabel: {
|
||||
fontSize: 40,
|
||||
interval: 0
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: ["招聘机构", "猎头公司", "培训机构", "劳务派遣公司"],
|
||||
axisLine: { show: true, lineStyle: { color: "#c3c5c8" } },
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: { color: "#21343e" }
|
||||
},
|
||||
axisLabel: {
|
||||
// rotate: 20,
|
||||
fontSize: 10,
|
||||
interval: 0
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 40,
|
||||
interval: 0
|
||||
},
|
||||
axisTick: { show: false }
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [25, 60, 75, 87],
|
||||
type: "bar",
|
||||
barWidth: 60,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top', // 将标签显示在柱状图的顶部
|
||||
color: "#fff",
|
||||
formatter: '{c} %' // {c}表示数据值，{d}%表示百分比，计算方式为 (c / 总和) * 100%
|
||||
},
|
||||
itemStyle: {
|
||||
type: "bar",
|
||||
color: function (params) {
|
||||
switch (params.dataIndex) {
|
||||
case 0:
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{ offset: 0, color: "#eb2b2b" },
|
||||
{ offset: 0.9, color: "#041A33" }
|
||||
],
|
||||
false
|
||||
);
|
||||
break;
|
||||
case 1:
|
||||
case 2:
|
||||
case 3:
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{ offset: 0, color: "#ff9500" },
|
||||
{ offset: 0.9, color: "#041A33" }
|
||||
],
|
||||
false
|
||||
);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
nextTick(() => {
|
||||
var myChart = echarts.init(sylEcharts.value);
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", () => {
|
||||
myChart.resize();
|
||||
});
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
210
src/views/portraitScreen/components/cygjbl.vue
Normal file
210
src/views/portraitScreen/components/cygjbl.vue
Normal file
@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<div class="seconent">
|
||||
<div class="inbox flex space-between">
|
||||
<ul class="inLeft items">
|
||||
<li class="child left_child" v-for="it in data.left" :key="it">
|
||||
<div class="text">{{ it.label }}</div>
|
||||
<div v-if="it.label == '人才供需比例'">
|
||||
<div class="num">需求人力:2452人</div>
|
||||
<div class="num">供应人力:4752人</div>
|
||||
</div>
|
||||
<div v-else class="num">{{ it.per }}</div>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="inright items tc">
|
||||
<li class="child relative right_child" v-for="it in data.right" :key="it">
|
||||
<div class="text">{{ it.label }}</div>
|
||||
<div class="num">{{ it.per }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="incenter items">
|
||||
<div class="hedbt"><span class="text">产业求人倍率</span></div>
|
||||
<ul class="ctbox flex">
|
||||
<li>第一产业：1.2</li>
|
||||
<li>第二产业：1.6</li>
|
||||
<li>第三产业：1.4</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from "vue";
|
||||
const data = reactive({
|
||||
left: [
|
||||
{ label: "人才供需比例", per: "12%" },
|
||||
{ label: "技能岗位占比", per: "80%" },
|
||||
{ label: "行业需求增幅", per: "5.6%" }
|
||||
],
|
||||
right: [
|
||||
{ label: "总体就业率", per: "78.3%" },
|
||||
{ label: "总体失业率", per: "23.1%" },
|
||||
{ label: "人才流失比例", per: "34.2%" }
|
||||
]
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@mixin textColor($color1, $color2) {
|
||||
background-image: linear-gradient(to top, $color1 0%, $color2 70%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.seconent {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.inbox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-top: 2vw;
|
||||
|
||||
|
||||
.items {
|
||||
width: 50%;
|
||||
height: 70%;
|
||||
|
||||
.child {
|
||||
height: 170px;
|
||||
background-size: 100% 100%;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.left_child {
|
||||
// width: 439px;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.text {
|
||||
margin-left: 5vw;
|
||||
margin-top: -24px;
|
||||
white-space: nowrap;
|
||||
font-size: 2vw;
|
||||
font-family: "YSBTH";
|
||||
@include textColor(#5cb2f7, #ffffff);
|
||||
}
|
||||
|
||||
.num {
|
||||
margin-left: 5vw;
|
||||
font-family: "YSBTH";
|
||||
white-space: nowrap;
|
||||
font-size: 1.6vw;
|
||||
@include textColor(#5cb2f7, #ffffff);
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
margin-left: 12vw;
|
||||
background: url("~@/assets/images/ztjyl.png") no-repeat;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
background: url("~@/assets/images/rclsl.png") no-repeat;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
margin-left: 12vw;
|
||||
background: url("~@/assets/images/ztsyl.png") no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
.right_child {
|
||||
width: 500px;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.text {
|
||||
margin-right: 4vw;
|
||||
margin-top: -24px;
|
||||
white-space: nowrap;
|
||||
font-size: 2vw;
|
||||
font-family: "YSBTH";
|
||||
@include textColor(#5cb2f7, #ffffff);
|
||||
}
|
||||
|
||||
.num {
|
||||
margin-right: 5vw;
|
||||
font-family: "YSBTH";
|
||||
white-space: nowrap;
|
||||
font-size: 1.6vw;
|
||||
@include textColor(#5cb2f7, #ffffff);
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
margin-right: 12vw;
|
||||
background: url("~@/assets/images/hyxqzf.png") no-repeat right center;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
background: url("~@/assets/images/jngw.png") no-repeat right center;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
margin-right: 12vw;
|
||||
background: url("~@/assets/images/rcxq.png") no-repeat right center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.inLeft,
|
||||
.inright {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.inLeft {
|
||||
// margin-left: -2vw;
|
||||
}
|
||||
|
||||
.inright {
|
||||
margin-left: 25vw;
|
||||
|
||||
.num {
|
||||
margin-left: 40px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ohher {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 162px;
|
||||
font-family: "YSBTH";
|
||||
font-size: 16px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.incenter {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 73%;
|
||||
left: 50%;
|
||||
transform: translateX(-54%);
|
||||
width: 60%;
|
||||
|
||||
.hedbt {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.text {
|
||||
white-space: nowrap;
|
||||
font-size: 2vw;
|
||||
font-family: "YSBTH";
|
||||
@include textColor(#5cb2f7, #ffffff);
|
||||
margin-left: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
.ctbox {
|
||||
justify-content: space-around;
|
||||
padding-left: 30px;
|
||||
font-size: 3vw;
|
||||
font-family: "YSBTH";
|
||||
@include textColor(#5cb2f7, #ffffff);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
83
src/views/portraitScreen/components/cygxfx.vue
Normal file
83
src/views/portraitScreen/components/cygxfx.vue
Normal file
@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<!-- 产业供需分析 -->
|
||||
<ul>
|
||||
<li v-for="item in dataList" :key="item">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<div class="name_text">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="cont_text">
|
||||
生产总值<br />{{ item.sczz }}亿
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="cont_text">
|
||||
岗位需求<br />{{ item.gwxq }}个
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="cont_text">
|
||||
供给人数<br />{{ item.gjrs }}人
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, nextTick, ref } from "vue";
|
||||
const dataList = ref([
|
||||
{
|
||||
name: '第一产业',
|
||||
sczz: 36.75,
|
||||
gwxq: 5477,
|
||||
gjrs: 5525
|
||||
},
|
||||
{
|
||||
name: '第二产业',
|
||||
sczz: 240.9,
|
||||
gwxq: 3176,
|
||||
gjrs: 5525
|
||||
},
|
||||
{
|
||||
name: '第三产业',
|
||||
sczz: 232.79,
|
||||
gwxq: 3050,
|
||||
gjrs: 5525
|
||||
}
|
||||
])
|
||||
onMounted(() => {
|
||||
});
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
ul {
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
font-family: "YSBTH";
|
||||
|
||||
li {
|
||||
height: 4.1vw;
|
||||
|
||||
.cont_text {
|
||||
font-size: 1.6vw;
|
||||
}
|
||||
}
|
||||
|
||||
.name_text {
|
||||
font-size: 1.2vw;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-row {
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
206
src/views/portraitScreen/components/ghyxqzf.vue
Normal file
206
src/views/portraitScreen/components/ghyxqzf.vue
Normal file
@ -0,0 +1,206 @@
|
||||
<template>
|
||||
<!-- 供需技能匹配分析 -->
|
||||
<div ref="ghyxqEcharts" style="width: 100%; height: 100%"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted,ref , nextTick } from "vue";
|
||||
const ghyxqEcharts = ref()
|
||||
onMounted(() => {
|
||||
lineChartFn();
|
||||
});
|
||||
|
||||
//初始化统计图
|
||||
const lineChartFn = () => {
|
||||
var option = {
|
||||
color: ["#00DFE3", "#00ABFB", "#21F9A3", "#F9C521"],
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "cross",
|
||||
label: {
|
||||
backgroundColor: "#6a7985"
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ["去年同期",'今年年同期','增幅'],
|
||||
show: true,
|
||||
right: 10,
|
||||
top: 10,
|
||||
textStyle: { color: "#fff" },
|
||||
},
|
||||
grid: {
|
||||
top: "24%",
|
||||
right: "10%",
|
||||
left: "10%",
|
||||
bottom: "4%",
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
show: true,
|
||||
data: ['制造业','信息技术业','建筑业'],
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick:{
|
||||
show:false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
type: "value",
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgb(15,36,90)",
|
||||
type: "solid"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "去年同期",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
// smooth: true,
|
||||
lineStyle: {
|
||||
width: 2
|
||||
},
|
||||
// showSymbol: false,
|
||||
// areaStyle: {
|
||||
// opacity: 0.8,
|
||||
// color: {
|
||||
// opacity: 0.8,
|
||||
// colorStops: [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: "rgba(0,233,227,0)"
|
||||
// },
|
||||
// {
|
||||
// offset: 0.5,
|
||||
// color: "rgba(0,233,227,0.5)"
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "rgba(0,233,227,1)"
|
||||
// }
|
||||
// ],
|
||||
// global: false
|
||||
// }
|
||||
// },
|
||||
|
||||
emphasis: {
|
||||
focus: "series"
|
||||
},
|
||||
data: [20,40,53]
|
||||
},
|
||||
{
|
||||
name: "今年年同期",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
// smooth: true,
|
||||
lineStyle: {
|
||||
width: 2
|
||||
},
|
||||
// showSymbol: false,
|
||||
// areaStyle: {
|
||||
// opacity: 0.8,
|
||||
// color: {
|
||||
// opacity: 0.8,
|
||||
// colorStops: [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: "rgba(0,233,227,0)"
|
||||
// },
|
||||
// {
|
||||
// offset: 0.5,
|
||||
// color: "rgba(0,233,227,0.5)"
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "rgba(0,233,227,1)"
|
||||
// }
|
||||
// ],
|
||||
// global: false
|
||||
// }
|
||||
// },
|
||||
|
||||
emphasis: {
|
||||
focus: "series"
|
||||
},
|
||||
data: [30,50,53]
|
||||
},
|
||||
{
|
||||
name: "增幅",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
// smooth: true,
|
||||
lineStyle: {
|
||||
width: 2
|
||||
},
|
||||
// showSymbol: false,
|
||||
// areaStyle: {
|
||||
// opacity: 0.8,
|
||||
// color: {
|
||||
// opacity: 0.8,
|
||||
// colorStops: [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: "rgba(0,233,227,0)"
|
||||
// },
|
||||
// {
|
||||
// offset: 0.5,
|
||||
// color: "rgba(0,233,227,0.5)"
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "rgba(0,233,227,1)"
|
||||
// }
|
||||
// ],
|
||||
// global: false
|
||||
// }
|
||||
// },
|
||||
|
||||
emphasis: {
|
||||
focus: "series"
|
||||
},
|
||||
data: [20,20,20]
|
||||
},
|
||||
]
|
||||
};
|
||||
nextTick(() => {
|
||||
var myChart = echarts.init(ghyxqEcharts.value);
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", () => {
|
||||
myChart.resize();
|
||||
});
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
118
src/views/portraitScreen/components/gjgrzmyd copy.vue
Normal file
118
src/views/portraitScreen/components/gjgrzmyd copy.vue
Normal file
@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<!-- 供需技能匹配分析 -->
|
||||
<div id="gjgrzmydEcharts" style="width: 100%; height: 100%"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, nextTick } from "vue";
|
||||
|
||||
onMounted(() => {
|
||||
lineChartFn();
|
||||
});
|
||||
|
||||
const lineChartFn = (val) => {
|
||||
var myChart = echarts.init(document.getElementById("gjgrzmydEcharts"));
|
||||
var option = {
|
||||
// legend: {
|
||||
// show: true,
|
||||
// right: 10,
|
||||
// top: 10,
|
||||
// textStyle: { color: "#fff" },
|
||||
// data: ["总岗位数量", "需求技能岗位数量"]
|
||||
// },
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: { type: "shadow" }
|
||||
},
|
||||
grid: {
|
||||
top: "20%",
|
||||
right: "10%",
|
||||
left: "14%",
|
||||
bottom: "12%"
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: "category",
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisPointer: {
|
||||
type: "shadow"
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff"
|
||||
},
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
rotate: 40,
|
||||
fontSize: 10,
|
||||
interval: 0
|
||||
},
|
||||
data: ["装备制造业", "电子信息产业",'航空航天产业','新能源产业','生物科技与医疗健康产业'],
|
||||
}
|
||||
],
|
||||
xAxis: [
|
||||
{
|
||||
type: "value",
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgb(15,36,90)",
|
||||
type: "solid"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "总岗位数量",
|
||||
type: "bar",
|
||||
stack:'total',
|
||||
data: [10000, 6500, 3000,2500,1500],
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0,0,0,1,
|
||||
[
|
||||
{ offset: 0, color: "#072133" },
|
||||
{ offset: 0.5, color: "#7d792e" },
|
||||
{ offset: 1, color: "#f1c515" }
|
||||
],false),
|
||||
borderColor:new echarts.graphic.LinearGradient(0,0,0,1,
|
||||
[
|
||||
{ offset:1,color:'#f1c515'},
|
||||
{ offset:1, color:'#f1c515'}
|
||||
],false),
|
||||
shadowColor: "#f1c515",
|
||||
shadowBlur: 2
|
||||
},
|
||||
},
|
||||
},
|
||||
]
|
||||
};
|
||||
option && myChart.setOption(option);
|
||||
myChart.on("click", function (params) {});
|
||||
window.onresize = function () {
|
||||
myChart.resize();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
118
src/views/portraitScreen/components/gjgrzmyd.vue
Normal file
118
src/views/portraitScreen/components/gjgrzmyd.vue
Normal file
@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<!-- 供需技能匹配分析 -->
|
||||
<div id="gjgrzmydEcharts" style="width: 100%; height: 100%"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, nextTick } from "vue";
|
||||
import { rotate } from "ol/transform";
|
||||
|
||||
onMounted(() => {
|
||||
lineChartFn();
|
||||
});
|
||||
|
||||
const lineChartFn = (val) => {
|
||||
var myChart = echarts.init(document.getElementById("gjgrzmydEcharts"));
|
||||
var option = {
|
||||
// legend: {
|
||||
// show: true,
|
||||
// right: 10,
|
||||
// top: 10,
|
||||
// textStyle: { color: "#fff" },
|
||||
// data: ["总岗位数量", "需求技能岗位数量"]
|
||||
// },
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: { type: "shadow" }
|
||||
},
|
||||
grid: {
|
||||
top: "8%",
|
||||
right: "10%",
|
||||
left: "35%",
|
||||
bottom: "12%"
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: "category",
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisPointer: {
|
||||
type: "shadow"
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff"
|
||||
},
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
rotate:0,
|
||||
fontSize: 51,
|
||||
interval: 0
|
||||
},
|
||||
data: ["装备制造业", "电子信息产业", '航空航天产业', '新能源产业', '生物科技与医疗健康'],
|
||||
}
|
||||
],
|
||||
xAxis: [
|
||||
{
|
||||
type: "value",
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgb(15,36,90)",
|
||||
type: "solid"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "总岗位数量",
|
||||
type: "bar",
|
||||
stack: 'total',
|
||||
data: [10000, 6500, 3000, 2500, 1500],
|
||||
barWidth: 30,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
|
||||
[
|
||||
{ offset: 0, color: "#072133" },
|
||||
{ offset: 0.5, color: "#7d792e" },
|
||||
{ offset: 1, color: "#f1c515" }
|
||||
], false),
|
||||
borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1,
|
||||
[
|
||||
{ offset: 1, color: '#f1c515' },
|
||||
{ offset: 1, color: '#f1c515' }
|
||||
], false),
|
||||
shadowColor: "#f1c515",
|
||||
shadowBlur: 2
|
||||
},
|
||||
},
|
||||
},
|
||||
]
|
||||
};
|
||||
option && myChart.setOption(option);
|
||||
myChart.on("click", function (params) { });
|
||||
window.onresize = function () {
|
||||
myChart.resize();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
75
src/views/portraitScreen/components/glrq.vue
Normal file
75
src/views/portraitScreen/components/glrq.vue
Normal file
@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<!-- 机构数量 -->
|
||||
<ul class="mr40">
|
||||
<li v-for="item in dataList" :key="item">
|
||||
<div class="name_text">{{ item.name }}</div>
|
||||
<div class="num">{{ item.num }}%</div>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, ref, nextTick } from "vue";
|
||||
const jgslEcharts = ref();
|
||||
const dataList = ref([
|
||||
{
|
||||
name: '院校毕业生',
|
||||
num: 78
|
||||
},
|
||||
{
|
||||
name: '就业困难人群',
|
||||
num: 45
|
||||
},
|
||||
|
||||
{
|
||||
name: '退役军人',
|
||||
num: 78
|
||||
},
|
||||
{
|
||||
name: '失业人群',
|
||||
num: 72
|
||||
},
|
||||
{
|
||||
name: '残疾人',
|
||||
num: 34
|
||||
},
|
||||
{
|
||||
name: '其他人群',
|
||||
num: 65
|
||||
}
|
||||
])
|
||||
onMounted(() => {
|
||||
});
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
li {
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
font-size: 36px;
|
||||
height: 320px;
|
||||
display: flex;
|
||||
font-family: "YSBTH";
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.name_text {
|
||||
font-size: 2vw;
|
||||
width: 100%;
|
||||
color: skyblue;
|
||||
}
|
||||
.num{
|
||||
width: 100%;
|
||||
font-size: 2vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
206
src/views/portraitScreen/components/gwxzdb.vue
Normal file
206
src/views/portraitScreen/components/gwxzdb.vue
Normal file
@ -0,0 +1,206 @@
|
||||
<template>
|
||||
<!-- 技能岗位薪资酬对比 -->
|
||||
<div ref="gwxcdbEcharts" style="width: 100%; height: 100%"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted,ref , nextTick } from "vue";
|
||||
const gwxcdbEcharts = ref()
|
||||
onMounted(() => {
|
||||
lineChartFn();
|
||||
});
|
||||
|
||||
//初始化统计图
|
||||
const lineChartFn = () => {
|
||||
var option = {
|
||||
color: ["#00DFE3", "#00ABFB", "#21F9A3", "#F9C521"],
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "cross",
|
||||
label: {
|
||||
backgroundColor: "#6a7985"
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ["技能岗位",'非技能岗位'],
|
||||
show: true,
|
||||
right: 10,
|
||||
top: 10,
|
||||
textStyle: { color: "#fff" },
|
||||
},
|
||||
grid: {
|
||||
top: "24%",
|
||||
right: "10%",
|
||||
left: "10%",
|
||||
bottom: "4%",
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
show: true,
|
||||
data: ['A岗位','B岗位','C岗位'],
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick:{
|
||||
show:false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
type: "value",
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgb(15,36,90)",
|
||||
type: "solid"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "技能岗位",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
// smooth: true,
|
||||
lineStyle: {
|
||||
width: 2
|
||||
},
|
||||
// showSymbol: false,
|
||||
// areaStyle: {
|
||||
// opacity: 0.8,
|
||||
// color: {
|
||||
// opacity: 0.8,
|
||||
// colorStops: [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: "rgba(0,233,227,0)"
|
||||
// },
|
||||
// {
|
||||
// offset: 0.5,
|
||||
// color: "rgba(0,233,227,0.5)"
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "rgba(0,233,227,1)"
|
||||
// }
|
||||
// ],
|
||||
// global: false
|
||||
// }
|
||||
// },
|
||||
|
||||
emphasis: {
|
||||
focus: "series"
|
||||
},
|
||||
data: [20,40,53]
|
||||
},
|
||||
{
|
||||
name: "非技能岗位",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
// smooth: true,
|
||||
lineStyle: {
|
||||
width: 2
|
||||
},
|
||||
// showSymbol: false,
|
||||
// areaStyle: {
|
||||
// opacity: 0.8,
|
||||
// color: {
|
||||
// opacity: 0.8,
|
||||
// colorStops: [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: "rgba(0,233,227,0)"
|
||||
// },
|
||||
// {
|
||||
// offset: 0.5,
|
||||
// color: "rgba(0,233,227,0.5)"
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "rgba(0,233,227,1)"
|
||||
// }
|
||||
// ],
|
||||
// global: false
|
||||
// }
|
||||
// },
|
||||
|
||||
emphasis: {
|
||||
focus: "series"
|
||||
},
|
||||
data: [30,50,53]
|
||||
},
|
||||
{
|
||||
name: "增幅",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
// smooth: true,
|
||||
lineStyle: {
|
||||
width: 2
|
||||
},
|
||||
// showSymbol: false,
|
||||
// areaStyle: {
|
||||
// opacity: 0.8,
|
||||
// color: {
|
||||
// opacity: 0.8,
|
||||
// colorStops: [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: "rgba(0,233,227,0)"
|
||||
// },
|
||||
// {
|
||||
// offset: 0.5,
|
||||
// color: "rgba(0,233,227,0.5)"
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "rgba(0,233,227,1)"
|
||||
// }
|
||||
// ],
|
||||
// global: false
|
||||
// }
|
||||
// },
|
||||
|
||||
emphasis: {
|
||||
focus: "series"
|
||||
},
|
||||
data: [20,20,20]
|
||||
},
|
||||
]
|
||||
};
|
||||
nextTick(() => {
|
||||
var myChart = echarts.init(gwxcdbEcharts.value);
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", () => {
|
||||
myChart.resize();
|
||||
});
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
158
src/views/portraitScreen/components/gxjnppfx.vue
Normal file
158
src/views/portraitScreen/components/gxjnppfx.vue
Normal file
@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<!-- 重点企业缺口需求 -->
|
||||
<div class="review_box" id="review" @mouseover="rollStop()" @mouseout="rollStart(60)">
|
||||
<ul id="comment1" class="zdqyqkxqBox noScollLine">
|
||||
<li v-for="(it, indx) in list" :key="indx" class="lineItem flex align-center mb4">
|
||||
<div class="label">
|
||||
<span class="order mr4" :style="{ color: indx < 3 ? '#01d0db' : '' }">TOP.{{ indx + 1 }}</span>
|
||||
<img class="ml20 mr10" src="@/assets/images/icon_03.png" alt="">
|
||||
<span class="ml4 text one_text_detail" :style="{ color: indx < 3 ? '#01d0db' : '' }">{{ it.mc }}</span>
|
||||
</div>
|
||||
<div class="line">
|
||||
<div class="lineOut">
|
||||
<div class="persont" :style="{ width: it.persont }"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="num">{{ it.num }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul id="comment2" class="zdqyqkxqBox noScollLine"></ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, ref, defineProps, onUnmounted } from "vue";
|
||||
const props = defineProps({
|
||||
data: Object,
|
||||
})
|
||||
const list = ref([
|
||||
{ mc: '数控操作技师', persont: '90%', num: 1079 },
|
||||
{ mc: '车工（服装制造）', persont: '80%', num: 867 },
|
||||
{ mc: '应用工程师', persont: '70%', num: 804 },
|
||||
{ mc: '交易业务专员', persont: '60%', num: 778 },
|
||||
{ mc: '产品实施顾问', persont: '50%', num: 352 },
|
||||
])
|
||||
const timer = ref(null)
|
||||
onMounted(() => {
|
||||
// roll(60)
|
||||
})
|
||||
onUnmounted(() => {
|
||||
if (timer.value) clearInterval(timer.value)
|
||||
})
|
||||
// 滚动
|
||||
function roll(t) {
|
||||
var ul1 = document.getElementById("comment1");
|
||||
var ul2 = document.getElementById("comment2");
|
||||
var ulbox = document.getElementById("review");
|
||||
ul2.innerHTML = ul1.innerHTML;
|
||||
ulbox.scrollTop = 0;
|
||||
rollStart(t);
|
||||
}
|
||||
|
||||
// 开始滚动
|
||||
function rollStart(t) {
|
||||
var ul1 = document.getElementById("comment1");
|
||||
var ul2 = document.getElementById("comment2");
|
||||
var ulbox = document.getElementById("review");
|
||||
rollStop();
|
||||
timer.value = setInterval(() => {
|
||||
// 当滚动高度大于列表内容高度时恢复为0
|
||||
if (ulbox.scrollTop >= 204) {
|
||||
ulbox.scrollTop = 0;
|
||||
} else {
|
||||
ulbox.scrollTop++;
|
||||
}
|
||||
}, t);
|
||||
|
||||
}
|
||||
|
||||
// 停止滚动
|
||||
function rollStop() {
|
||||
clearInterval(timer.value);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.review_box {
|
||||
// padding: 10px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.zdqyqkxqBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
// overflow-y: auto;
|
||||
// padding: 6px 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
.lineItem {
|
||||
margin: 1px 0;
|
||||
|
||||
.label {
|
||||
width: 36%;
|
||||
font-size: 1.6vw;
|
||||
font-family: "DigifaceWide";
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.order {
|
||||
display: inline-block;
|
||||
width: 120px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.text {
|
||||
display: inline-block;
|
||||
width: 280px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 54%;
|
||||
height: 12px;
|
||||
padding: 0 4px;
|
||||
border: 1px solid #1e3a44;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.lineOut {
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
background: rgba(32, 74, 111, 0.5);
|
||||
|
||||
.persont {
|
||||
height: 5px;
|
||||
background: linear-gradient(60deg, #187593 0%, #aff1f4 100%);
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
right: -6px;
|
||||
top: -7px;
|
||||
width: 18px;
|
||||
height: 19px;
|
||||
background: url('~@/assets/images/icon_04.png') no-repeat left bottom;
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.num {
|
||||
width: 10%;
|
||||
font-size: 1.3vw;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
107
src/views/portraitScreen/components/hyjyl.vue
Normal file
107
src/views/portraitScreen/components/hyjyl.vue
Normal file
@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<!-- 行业就业率 -->
|
||||
<div ref="jgrzcglEcharts" style="width: 100%; height: 100%"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, ref, nextTick } from "vue";
|
||||
const jgrzcglEcharts = ref();
|
||||
onMounted(() => {
|
||||
lineChartFn();
|
||||
});
|
||||
|
||||
//初始化统计图
|
||||
const lineChartFn = () => {
|
||||
let option = {
|
||||
legend: {
|
||||
show: true
|
||||
},
|
||||
grid: {
|
||||
left: "10px",
|
||||
right: "30px",
|
||||
bottom: "10px",
|
||||
top: "20px",
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: "value",
|
||||
axisLine: { lineStyle: { color: "#c3c5c8" } },
|
||||
splitLine: { show: false }
|
||||
},
|
||||
yAxis : {
|
||||
type: "category",
|
||||
data: ["制造业","金融业",'房地产业'],
|
||||
axisLine: { show: false, lineStyle: { color: "#c3c5c8" } },
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: { color: "#21343e" }
|
||||
},
|
||||
axisLabel: {
|
||||
rotate: 20,
|
||||
fontSize: 10,
|
||||
interval: 0
|
||||
},
|
||||
axisTick: { show: false }
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [10, 20,30],
|
||||
type: "bar",
|
||||
barWidth: "14px",
|
||||
label: {
|
||||
show: true,
|
||||
position: "right",
|
||||
color: "#fff"
|
||||
},
|
||||
itemStyle: {
|
||||
type: "bar",
|
||||
color: function (params) {
|
||||
switch (params.dataIndex) {
|
||||
case 0:
|
||||
return new echarts.graphic.LinearGradient(
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
|
||||
[
|
||||
{ offset: 0, color: "#eb2b2b" },
|
||||
{ offset: 0.9, color: "#041A33" }
|
||||
],
|
||||
false
|
||||
);
|
||||
break;
|
||||
case 1:
|
||||
case 2:
|
||||
return new echarts.graphic.LinearGradient(
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{ offset: 0, color: "#ff9500" },
|
||||
{ offset: 0.9, color: "#041A33" }
|
||||
],
|
||||
false
|
||||
);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
nextTick(() => {
|
||||
var myChart = echarts.init(jgrzcglEcharts.value);
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", () => {
|
||||
myChart.resize();
|
||||
});
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
132
src/views/portraitScreen/components/jgmyd.vue
Normal file
132
src/views/portraitScreen/components/jgmyd.vue
Normal file
@ -0,0 +1,132 @@
|
||||
<template>
|
||||
<!-- 各类机构入职满意度 -->
|
||||
<div ref="jgmydEcharts" style="width: 100%; height: 100%"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, ref, nextTick } from "vue";
|
||||
const jgmydEcharts = ref();
|
||||
onMounted(() => {
|
||||
lineChartFn();
|
||||
});
|
||||
|
||||
//初始化统计图
|
||||
const lineChartFn = () => {
|
||||
let option = {
|
||||
legend: {
|
||||
show: true
|
||||
},
|
||||
grid: {
|
||||
left: "10px",
|
||||
right: "30px",
|
||||
bottom: "10px",
|
||||
top: "20px",
|
||||
containLabel: true
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
axisLine: { lineStyle: { color: "#c3c5c8" } },
|
||||
splitLine: { show: false }
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: ["招聘公司", "猎头公司", "培训机构", "劳动派遣公司"],
|
||||
axisLine: { show: false, lineStyle: { color: "#c3c5c8" } },
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: { color: "#21343e" }
|
||||
},
|
||||
axisLabel: {
|
||||
rotate: 20,
|
||||
fontSize: 10,
|
||||
interval: 0
|
||||
},
|
||||
axisTick: { show: false }
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [10, 20, 30, 20, 15],
|
||||
type: "bar",
|
||||
barWidth: "14px",
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
color: "#fff"
|
||||
},
|
||||
itemStyle: {
|
||||
type: "bar",
|
||||
color: function (params) {
|
||||
switch (params.dataIndex) {
|
||||
case 0:
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{ offset: 0, color: "#eb2b2b" },
|
||||
{ offset: 0.9, color: "#041A33" }
|
||||
],
|
||||
false
|
||||
);
|
||||
break;
|
||||
case 1:
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{ offset: 0, color: "#ff9500" },
|
||||
{ offset: 0.9, color: "#041A33" }
|
||||
],
|
||||
false
|
||||
);
|
||||
break;
|
||||
case 2:
|
||||
case 3:
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{ offset: 0, color: "rgb(24, 245, 157)" },
|
||||
{ offset: 0.9, color: "#041A33" }
|
||||
],
|
||||
false
|
||||
);
|
||||
break;
|
||||
case 4:
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{ offset: 0, color: "#7d792e" },
|
||||
{ offset: 0.9, color: "#041A33" }
|
||||
],
|
||||
false
|
||||
);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
nextTick(() => {
|
||||
var myChart = echarts.init(jgmydEcharts.value);
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", () => {
|
||||
myChart.resize();
|
||||
});
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
91
src/views/portraitScreen/components/jgpxfb.vue
Normal file
91
src/views/portraitScreen/components/jgpxfb.vue
Normal file
@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<!-- 技能培训机构分布 -->
|
||||
<div ref="jsjgpxfbEcharts" style="width: 100%; height: 100%"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, ref, nextTick } from "vue";
|
||||
const jsjgpxfbEcharts = ref();
|
||||
onMounted(() => {
|
||||
lineChartFn();
|
||||
});
|
||||
|
||||
//初始化统计图
|
||||
const lineChartFn = () => {
|
||||
var option = {
|
||||
backgroundColor: "rgba(0,0,0,0)",
|
||||
// legend: {
|
||||
// icon: "circle",
|
||||
// bottom: 0,
|
||||
// left: 0,
|
||||
// itemWidth: 16,
|
||||
// itemGap: 10,
|
||||
// },
|
||||
tooltip: {
|
||||
trigger: "item"
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["65%", "0%"],
|
||||
center: ["48%", "48%"],
|
||||
// avoidLabelOverlap: false,
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
color: "#fff",
|
||||
formatter: (param) => {
|
||||
return `{a|${param.name}}\n{c|${param.value}}`;
|
||||
},
|
||||
rich: {
|
||||
a: {
|
||||
fontSize: 12,
|
||||
color: "#fff",
|
||||
},
|
||||
b: {
|
||||
color: "#accdff"
|
||||
},
|
||||
c: {
|
||||
fontSize: 14,
|
||||
color: "#2682ff",
|
||||
lineHeight: 30
|
||||
}
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
length: 20
|
||||
},
|
||||
data: [
|
||||
{name:'A区域',value:50},
|
||||
{name:'B区域',value:50},
|
||||
{name:'C区域',value:50},
|
||||
{name:'D区域',value:50},
|
||||
],
|
||||
animationType: "scale",
|
||||
animationEasing: "elasticOut",
|
||||
animationDelay: function (idx) {
|
||||
return Math.random() * 200;
|
||||
}
|
||||
}
|
||||
|
||||
]
|
||||
};
|
||||
nextTick(() => {
|
||||
var myChart = echarts.init(jsjgpxfbEcharts.value);
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", () => {
|
||||
myChart.resize();
|
||||
});
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
142
src/views/portraitScreen/components/jndqzpnd.vue
Normal file
142
src/views/portraitScreen/components/jndqzpnd.vue
Normal file
@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<!-- 重点企业技能短缺招聘难度 -->
|
||||
<div id="jnzpndEcharts" style="width: 100%; height: 100%"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, nextTick } from "vue";
|
||||
|
||||
onMounted(() => {
|
||||
lineChartFn();
|
||||
});
|
||||
|
||||
const lineChartFn = (val) => {
|
||||
var myChart = echarts.init(document.getElementById("jnzpndEcharts"));
|
||||
var option = {
|
||||
legend: {
|
||||
show: true,
|
||||
right: 10,
|
||||
top: 10,
|
||||
textStyle: { color: "#fff" },
|
||||
data: ["无技能要求", "技能要求"]
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: { type: "shadow" }
|
||||
},
|
||||
grid: {
|
||||
top: "14%",
|
||||
right: "4%",
|
||||
left: "10%",
|
||||
bottom: "12%"
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisPointer: {
|
||||
type: "shadow"
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff"
|
||||
},
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
// rotate: 50,
|
||||
fontSize: 10,
|
||||
interval: 0
|
||||
},
|
||||
data: ["A企业", "B企业",'C企业','D企业','E企业'],
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgb(15,36,90)",
|
||||
type: "solid"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "无技能要求",
|
||||
type: "bar",
|
||||
stack:'total',
|
||||
data: [12, 50, 20,10,10],
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0,0,0,1,
|
||||
[
|
||||
{ offset: 0, color: "#072133" },
|
||||
{ offset: 0.5, color: "#7d792e" },
|
||||
{ offset: 1, color: "#f1c515" }
|
||||
],false),
|
||||
borderColor:new echarts.graphic.LinearGradient(0,0,0,1,
|
||||
[
|
||||
{ offset:1,color:'#f1c515'},
|
||||
{ offset:1, color:'#f1c515'}
|
||||
],false),
|
||||
shadowColor: "#f1c515",
|
||||
shadowBlur: 2
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "技能要求",
|
||||
type: "bar",
|
||||
stack:'total',
|
||||
data: [ 20, 30, 40,10,10],
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0,0,0,1,
|
||||
[
|
||||
{ offset: 0, color: "#072133" },
|
||||
{ offset: 0.5, color: "#0488cf" },
|
||||
{ offset: 1, color: "#01a3f7" }
|
||||
],false),
|
||||
borderColor:new echarts.graphic.LinearGradient(0,0,0,1,
|
||||
[
|
||||
{ offset:1, color:'#01a3f7' },
|
||||
{ offset:0.8, color:'#01a3f7'}
|
||||
],false),
|
||||
shadowColor: "#01a3f7",
|
||||
shadowBlur: 2
|
||||
},
|
||||
},
|
||||
},
|
||||
]
|
||||
};
|
||||
option && myChart.setOption(option);
|
||||
myChart.on("click", function (params) {});
|
||||
window.onresize = function () {
|
||||
myChart.resize();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
109
src/views/portraitScreen/components/jngwtop.vue
Normal file
109
src/views/portraitScreen/components/jngwtop.vue
Normal file
@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<!-- 短缺技能岗位TOP -->
|
||||
<div ref="jngwtopEcharts" style="width: 100%; height: 100%"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, ref, nextTick } from "vue";
|
||||
const jngwtopEcharts = ref();
|
||||
onMounted(() => {
|
||||
lineChartFn();
|
||||
});
|
||||
|
||||
//初始化统计图
|
||||
const lineChartFn = () => {
|
||||
let option = {
|
||||
legend: {
|
||||
show: true
|
||||
},
|
||||
grid: {
|
||||
left: "10px",
|
||||
right: "30px",
|
||||
bottom: "10px",
|
||||
top: "20px",
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: "value",
|
||||
axisLine: { lineStyle: { color: "#c3c5c8" } },
|
||||
splitLine: { show: false }
|
||||
},
|
||||
yAxis : {
|
||||
type: "category",
|
||||
data: ["A岗位","B岗位",'C岗位','D岗位','E岗位'],
|
||||
axisLine: { show: false, lineStyle: { color: "#c3c5c8" } },
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: { color: "#21343e" }
|
||||
},
|
||||
axisLabel: {
|
||||
rotate: 20,
|
||||
fontSize: 10,
|
||||
interval: 0
|
||||
},
|
||||
axisTick: { show: false }
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [10, 20,30,40,50],
|
||||
type: "bar",
|
||||
barWidth: "14px",
|
||||
label: {
|
||||
show: true,
|
||||
position: "right",
|
||||
color: "#fff"
|
||||
},
|
||||
itemStyle: {
|
||||
type: "bar",
|
||||
color: function (params) {
|
||||
switch (params.dataIndex) {
|
||||
case 0:
|
||||
return new echarts.graphic.LinearGradient(
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
|
||||
[
|
||||
{ offset: 0, color: "#eb2b2b" },
|
||||
{ offset: 0.9, color: "#041A33" }
|
||||
],
|
||||
false
|
||||
);
|
||||
break;
|
||||
case 1:
|
||||
case 2:
|
||||
case 3:
|
||||
case 4:
|
||||
return new echarts.graphic.LinearGradient(
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{ offset: 0, color: "#ff9500" },
|
||||
{ offset: 0.9, color: "#041A33" }
|
||||
],
|
||||
false
|
||||
);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
nextTick(() => {
|
||||
var myChart = echarts.init(jngwtopEcharts.value);
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", () => {
|
||||
myChart.resize();
|
||||
});
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
76
src/views/portraitScreen/components/jnxgwxq.vue
Normal file
76
src/views/portraitScreen/components/jnxgwxq.vue
Normal file
@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<!-- 技术型岗位需求 -->
|
||||
<div ref="jsxgwEcharts" style="width: 100%; height: 100%"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, ref, nextTick } from "vue";
|
||||
const jsxgwEcharts = ref();
|
||||
onMounted(() => {
|
||||
lineChartFn();
|
||||
});
|
||||
|
||||
//初始化统计图
|
||||
const lineChartFn = () => {
|
||||
var option = {
|
||||
backgroundColor: "rgba(0,0,0,0)",
|
||||
tooltip: {
|
||||
trigger: "item"
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["65%", "0%"],
|
||||
center: ["48%", "48%"],
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
color: "#fff",
|
||||
formatter: (param) => {
|
||||
return `{c|${param.value}}`;
|
||||
},
|
||||
rich: {
|
||||
c: {
|
||||
fontSize: 14,
|
||||
color: "#ffffff",
|
||||
}
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
length: 20
|
||||
},
|
||||
data: [
|
||||
{name:'司机',value:50},
|
||||
{name:'炊事员',value:50},
|
||||
{name:'保管员',value:50},
|
||||
{name:'修理工程师',value:50},
|
||||
{name:'高空作业员',value:50},
|
||||
],
|
||||
animationType: "scale",
|
||||
animationEasing: "elasticOut",
|
||||
animationDelay: function (idx) {
|
||||
return Math.random() * 200;
|
||||
}
|
||||
}
|
||||
|
||||
]
|
||||
};
|
||||
nextTick(() => {
|
||||
var myChart = echarts.init(jsxgwEcharts.value);
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", () => {
|
||||
myChart.resize();
|
||||
});
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
76
src/views/portraitScreen/components/jsxrcfb.vue
Normal file
76
src/views/portraitScreen/components/jsxrcfb.vue
Normal file
@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<!-- 技能型人才分布 -->
|
||||
<div ref="jsxrcfbEcharts" style="width: 100%; height: 100%"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, ref, nextTick } from "vue";
|
||||
const jsxrcfbEcharts = ref();
|
||||
onMounted(() => {
|
||||
lineChartFn();
|
||||
});
|
||||
|
||||
//初始化统计图
|
||||
const lineChartFn = () => {
|
||||
var option = {
|
||||
backgroundColor: "rgba(0,0,0,0)",
|
||||
tooltip: {
|
||||
trigger: "item"
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["65%", "0%"],
|
||||
center: ["48%", "48%"],
|
||||
// avoidLabelOverlap: false,
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
color: "#fff",
|
||||
formatter: (param) => {
|
||||
return `{c|${param.value}}`;
|
||||
},
|
||||
rich: {
|
||||
c: {
|
||||
fontSize: 14,
|
||||
color: "#2682ff",
|
||||
lineHeight: 30
|
||||
}
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
length: 20
|
||||
},
|
||||
data: [
|
||||
{name:'技术性人才',value:50},
|
||||
{name:'复合型人才',value:50},
|
||||
{name:'知识型人才',value:50},
|
||||
],
|
||||
animationType: "scale",
|
||||
animationEasing: "elasticOut",
|
||||
animationDelay: function (idx) {
|
||||
return Math.random() * 200;
|
||||
}
|
||||
}
|
||||
|
||||
]
|
||||
};
|
||||
nextTick(() => {
|
||||
var myChart = echarts.init(jsxrcfbEcharts.value);
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", () => {
|
||||
myChart.resize();
|
||||
});
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
70
src/views/portraitScreen/components/lsyyfx.vue
Normal file
70
src/views/portraitScreen/components/lsyyfx.vue
Normal file
@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<!-- 机构数量 -->
|
||||
<ul>
|
||||
<li v-for="item in dataList" :key="item">
|
||||
<div class="name_text">{{ item.name }}</div>
|
||||
<div class="num">{{ item.num }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, ref, nextTick } from "vue";
|
||||
const jgslEcharts = ref();
|
||||
const dataList = ref([
|
||||
{
|
||||
name: '职业规划',
|
||||
num: 7000
|
||||
},
|
||||
{
|
||||
name: '就业环境',
|
||||
num: 2000
|
||||
},
|
||||
{
|
||||
name: '薪酬',
|
||||
num: 4000
|
||||
},
|
||||
{
|
||||
name: '政策因素',
|
||||
num: 6000
|
||||
},
|
||||
{
|
||||
name: '其他',
|
||||
num: 2000
|
||||
}
|
||||
])
|
||||
onMounted(() => {
|
||||
});
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
li {
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
font-size: 18px;
|
||||
height: 300px;
|
||||
display: flex;
|
||||
font-family: "YSBTH";
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.name_text {
|
||||
font-size: 2vw;
|
||||
width: 100%;
|
||||
color: rgb(3, 239, 207);
|
||||
}
|
||||
.num{
|
||||
font-size: 1.8vw;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
88
src/views/portraitScreen/components/lxfx.vue
Normal file
88
src/views/portraitScreen/components/lxfx.vue
Normal file
@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<!-- 失业率 -->
|
||||
<div ref="lxfxEcharts" style="width: 100%; height: 100%"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, ref, nextTick } from "vue";
|
||||
const lxfxEcharts = ref();
|
||||
onMounted(() => {
|
||||
lineChartFn();
|
||||
});
|
||||
|
||||
//初始化统计图
|
||||
const lineChartFn = () => {
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
show:false,
|
||||
top: '5%',
|
||||
left: 'center'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
// avoidLabelOverlap: false,
|
||||
// itemStyle: {
|
||||
// borderRadius: 10,
|
||||
// borderColor: '#fff',
|
||||
// borderWidth: 2
|
||||
// },
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 24,
|
||||
},
|
||||
// emphasis: {
|
||||
// label: {
|
||||
// show: true,
|
||||
// fontSize: 40,
|
||||
// fontWeight: 'bold'
|
||||
// }
|
||||
// },
|
||||
// labelLine: {
|
||||
// show: false
|
||||
// },
|
||||
data: [
|
||||
{ value: 3100, name: '成都其他县区' },
|
||||
{ value: 1600, name: '绵阳市' },
|
||||
{ value: 500, name: '自贡市' },
|
||||
{ value: 300, name: '攀枝花市' },
|
||||
{ value: 1000, name: '泸州市' },
|
||||
{ value: 1500, name: '德阳市' },
|
||||
{ value: 400, name: '广元市' },
|
||||
{ value: 700, name: '遂宁市' },
|
||||
{ value: 700, name: '内江市' },
|
||||
{ value: 600, name: '乐山市' },
|
||||
{ value: 500, name: '资阳市' },
|
||||
{ value: 2100, name: '宜宾市' },
|
||||
{ value: 900, name: '南充市' },
|
||||
{ value: 500, name: '达州市' },
|
||||
{ value: 400, name: '雅安市' },
|
||||
{ value: 200, name: '巴中市' },
|
||||
{ value: 1000, name: '眉山市' },
|
||||
{ value: 400, name: '广安市' },
|
||||
{ value: 100, name: '阿坝州' },
|
||||
{ value: 150, name: '甘孜州' },
|
||||
{ value: 250, name: '凉山州' },
|
||||
{ value: 4000, name: '其他省' },
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
nextTick(() => {
|
||||
var myChart = echarts.init(lxfxEcharts.value);
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", () => {
|
||||
myChart.resize();
|
||||
});
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
90
src/views/portraitScreen/components/qylsry.vue
Normal file
90
src/views/portraitScreen/components/qylsry.vue
Normal file
@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<!-- 机构数量 -->
|
||||
<ul>
|
||||
<li v-for="item in dataList" :key="item">
|
||||
<div class="name_text">{{ item.name }}</div>
|
||||
<div class="num">{{ item.num }}</div>
|
||||
<div class="num">人</div>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, ref, nextTick } from "vue";
|
||||
const jgslEcharts = ref();
|
||||
const dataList = ref([
|
||||
// {
|
||||
// name: '捷普科技',
|
||||
// num: 19808
|
||||
// },
|
||||
{
|
||||
name: '比亚迪电子',
|
||||
num: 3500
|
||||
},
|
||||
{
|
||||
name: '全友家私',
|
||||
num: 320
|
||||
},
|
||||
{
|
||||
name: '成都领益科技',
|
||||
num: 86
|
||||
},
|
||||
{
|
||||
name: '掌上明珠',
|
||||
num: 68
|
||||
},
|
||||
{
|
||||
name: '裕同印刷',
|
||||
num: 62
|
||||
},
|
||||
{
|
||||
name: '四川福蓉科技',
|
||||
num: 45
|
||||
},
|
||||
|
||||
{
|
||||
name: '四川一宇钢结构',
|
||||
num: 28
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
name: '索菲亚',
|
||||
num: 25
|
||||
}
|
||||
])
|
||||
onMounted(() => {
|
||||
});
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
li {
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
font-size: 18px;
|
||||
height: 230px;
|
||||
display: flex;
|
||||
font-family: "YSBTH";
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.name_text {
|
||||
font-size: 2vw;
|
||||
width: 100%;
|
||||
color: rgb(3, 239, 207);
|
||||
}
|
||||
.num{
|
||||
font-size: 1.8vw;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
76
src/views/portraitScreen/components/rcldyy.vue
Normal file
76
src/views/portraitScreen/components/rcldyy.vue
Normal file
@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<!-- 人才流动原因 -->
|
||||
<div ref="rcldyyEcharts" style="width: 100%; height: 100%"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, ref, nextTick } from "vue";
|
||||
const rcldyyEcharts = ref();
|
||||
onMounted(() => {
|
||||
lineChartFn();
|
||||
});
|
||||
|
||||
//初始化统计图
|
||||
const lineChartFn = () => {
|
||||
var option = {
|
||||
backgroundColor: "rgba(0,0,0,0)",
|
||||
tooltip: {
|
||||
trigger: "item"
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["65%", "0%"],
|
||||
center: ["48%", "48%"],
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
color: "#fff",
|
||||
formatter: (param) => {
|
||||
return `{c|${param.value}}`;
|
||||
},
|
||||
rich: {
|
||||
c: {
|
||||
fontSize: 14,
|
||||
color: "#ffffff",
|
||||
}
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
length: 20
|
||||
},
|
||||
data: [
|
||||
{name:'职业发展机会',value:50},
|
||||
{name:'薪资待遇流动',value:50},
|
||||
{name:'工作环境流动',value:50},
|
||||
{name:'政策因素流动',value:50},
|
||||
{name:'其他',value:50},
|
||||
],
|
||||
animationType: "scale",
|
||||
animationEasing: "elasticOut",
|
||||
animationDelay: function (idx) {
|
||||
return Math.random() * 200;
|
||||
}
|
||||
}
|
||||
|
||||
]
|
||||
};
|
||||
nextTick(() => {
|
||||
var myChart = echarts.init(rcldyyEcharts.value);
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", () => {
|
||||
myChart.resize();
|
||||
});
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
107
src/views/portraitScreen/components/syl.vue
Normal file
107
src/views/portraitScreen/components/syl.vue
Normal file
@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<!-- 失业率 -->
|
||||
<div ref="sylEcharts" style="width: 100%; height: 100%"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, ref, nextTick } from "vue";
|
||||
const sylEcharts = ref();
|
||||
onMounted(() => {
|
||||
lineChartFn();
|
||||
});
|
||||
|
||||
//初始化统计图
|
||||
const lineChartFn = () => {
|
||||
let option = {
|
||||
legend: {
|
||||
show: true
|
||||
},
|
||||
grid: {
|
||||
left: "10px",
|
||||
right: "30px",
|
||||
bottom: "10px",
|
||||
top: "20px",
|
||||
containLabel: true
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
axisLine: { lineStyle: { color: "#c3c5c8" } },
|
||||
splitLine: { show: false }
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: ["成都","绵阳","资阳","简阳"],
|
||||
axisLine: { show: false, lineStyle: { color: "#c3c5c8" } },
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: { color: "#21343e" }
|
||||
},
|
||||
axisLabel: {
|
||||
// rotate: 20,
|
||||
fontSize: 10,
|
||||
interval: 0
|
||||
},
|
||||
axisTick: { show: false }
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [10, 20,30,40],
|
||||
type: "bar",
|
||||
barWidth: "14px",
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
color: "#fff"
|
||||
},
|
||||
itemStyle: {
|
||||
type: "bar",
|
||||
color: function (params) {
|
||||
switch (params.dataIndex) {
|
||||
case 0:
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{ offset: 0, color: "#eb2b2b" },
|
||||
{ offset: 0.9, color: "#041A33" }
|
||||
],
|
||||
false
|
||||
);
|
||||
break;
|
||||
case 1:
|
||||
case 2:
|
||||
case 3:
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{ offset: 0, color: "#ff9500" },
|
||||
{ offset: 0.9, color: "#041A33" }
|
||||
],
|
||||
false
|
||||
);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
nextTick(() => {
|
||||
var myChart = echarts.init(sylEcharts.value);
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", () => {
|
||||
myChart.resize();
|
||||
});
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
109
src/views/portraitScreen/components/xlccjyl.vue
Normal file
109
src/views/portraitScreen/components/xlccjyl.vue
Normal file
@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<!-- 学历层次就业率 -->
|
||||
<div ref="xlccjyEcharts" style="width: 100%; height: 100%"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, ref, nextTick } from "vue";
|
||||
const xlccjyEcharts = ref();
|
||||
onMounted(() => {
|
||||
lineChartFn();
|
||||
});
|
||||
|
||||
//初始化统计图
|
||||
const lineChartFn = () => {
|
||||
let option = {
|
||||
legend: {
|
||||
show: true
|
||||
},
|
||||
grid: {
|
||||
left: "10px",
|
||||
right: "30px",
|
||||
bottom: "10px",
|
||||
top: "20px",
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: "value",
|
||||
axisLine: { lineStyle: { color: "#c3c5c8" } },
|
||||
splitLine: { show: false }
|
||||
},
|
||||
yAxis : {
|
||||
type: "category",
|
||||
data: ["小学","中学",'高中','专科','本科'],
|
||||
axisLine: { show: false, lineStyle: { color: "#c3c5c8" } },
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: { color: "#21343e" }
|
||||
},
|
||||
axisLabel: {
|
||||
rotate: 20,
|
||||
fontSize: 10,
|
||||
interval: 0
|
||||
},
|
||||
axisTick: { show: false }
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [10, 20,30,40,50],
|
||||
type: "bar",
|
||||
barWidth: "14px",
|
||||
label: {
|
||||
show: true,
|
||||
position: "right",
|
||||
color: "#fff"
|
||||
},
|
||||
itemStyle: {
|
||||
type: "bar",
|
||||
color: function (params) {
|
||||
switch (params.dataIndex) {
|
||||
case 0:
|
||||
return new echarts.graphic.LinearGradient(
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
|
||||
[
|
||||
{ offset: 0, color: "#eb2b2b" },
|
||||
{ offset: 0.9, color: "#041A33" }
|
||||
],
|
||||
false
|
||||
);
|
||||
break;
|
||||
case 1:
|
||||
case 2:
|
||||
case 3:
|
||||
case 4:
|
||||
return new echarts.graphic.LinearGradient(
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{ offset: 0, color: "#ff9500" },
|
||||
{ offset: 0.9, color: "#041A33" }
|
||||
],
|
||||
false
|
||||
);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
nextTick(() => {
|
||||
var myChart = echarts.init(xlccjyEcharts.value);
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", () => {
|
||||
myChart.resize();
|
||||
});
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
76
src/views/portraitScreen/components/xxgwxq.vue
Normal file
76
src/views/portraitScreen/components/xxgwxq.vue
Normal file
@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<!-- 新型岗位需求 -->
|
||||
<div ref="xxgwxqEcharts" style="width: 100%; height: 100%"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, ref, nextTick } from "vue";
|
||||
const xxgwxqEcharts = ref();
|
||||
onMounted(() => {
|
||||
lineChartFn();
|
||||
});
|
||||
|
||||
//初始化统计图
|
||||
const lineChartFn = () => {
|
||||
var option = {
|
||||
backgroundColor: "rgba(0,0,0,0)",
|
||||
tooltip: {
|
||||
trigger: "item"
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["65%", "0%"],
|
||||
center: ["48%", "48%"],
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
color: "#fff",
|
||||
formatter: (param) => {
|
||||
return `{c|${param.value}}`;
|
||||
},
|
||||
rich: {
|
||||
c: {
|
||||
fontSize: 14,
|
||||
color: "#ffffff",
|
||||
}
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
length: 20
|
||||
},
|
||||
data: [
|
||||
{name:'司机',value:50},
|
||||
{name:'炊事员',value:50},
|
||||
{name:'保管员',value:50},
|
||||
{name:'修理工程师',value:50},
|
||||
{name:'高空作业员',value:50},
|
||||
],
|
||||
animationType: "scale",
|
||||
animationEasing: "elasticOut",
|
||||
animationDelay: function (idx) {
|
||||
return Math.random() * 200;
|
||||
}
|
||||
}
|
||||
|
||||
]
|
||||
};
|
||||
nextTick(() => {
|
||||
var myChart = echarts.init(xxgwxqEcharts.value);
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", () => {
|
||||
myChart.resize();
|
||||
});
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
124
src/views/portraitScreen/components/xxrcgw.vue
Normal file
124
src/views/portraitScreen/components/xxrcgw.vue
Normal file
@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<!-- 重点企业缺口需求 -->
|
||||
<div class="review_box" id="review_box" style="width:100%;overflow: hidden" @mouseover="rollStop()"
|
||||
@mouseout="rollStart(60)">
|
||||
<ul id="comment1" class="zdqyqkxqBox noScollLine">
|
||||
<li v-for="(it, indx) in list" :key="indx" class="lineItem align-center mb4">
|
||||
<div class="label">
|
||||
<span class="order mr4" :style="{ color: indx < 3 ? '#01d0db' : '' }">TOP.{{ indx + 1 }}</span>
|
||||
<img src="@/assets/images/icon_03.png" alt="">
|
||||
<span class="ml4 text one_text_detail" :style="{ color: indx < 3 ? '#01d0db' : '' }">{{ it.mc }}</span>
|
||||
</div>
|
||||
<div class="flex align-center just-around">
|
||||
<div class="line">
|
||||
<div class="lineOut">
|
||||
<div class="persont" :style="{ width: it.persont }"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="num">{{ it.num }}</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul id="comment2" class="zdqyqkxqBox noScollLine"></ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, ref, defineProps, onUnmounted } from "vue";
|
||||
const props = defineProps({
|
||||
data: Object,
|
||||
})
|
||||
const list = ref([
|
||||
{ mc: '工业机器人操作工程师', persont: '90%', num: 456 },
|
||||
{ mc: '智能生产线调试工程师', persont: '80%', num: 355 },
|
||||
{ mc: '精密仪器装配工程师', persont: '70%', num: 322 },
|
||||
{ mc: '人工智能算法工程师', persont: '60%', num: 189 },
|
||||
{ mc: '数字孪生工程师。', persont: '50%', num: 67 },
|
||||
])
|
||||
const timer = ref(null)
|
||||
onMounted(() => {
|
||||
})
|
||||
onUnmounted(() => {
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.review_box {
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.zdqyqkxqBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 6px 0;
|
||||
box-sizing: border-box;
|
||||
font-size: 20px;
|
||||
|
||||
.lineItem {
|
||||
height: 190px;
|
||||
|
||||
.label {
|
||||
width: 100%;
|
||||
font-family: "YSBTH";
|
||||
display: flex;
|
||||
font-size: 1.8vw;
|
||||
margin: 10px 0 20px 0;
|
||||
|
||||
.order {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.text {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 80%;
|
||||
height: 12px;
|
||||
padding: 0 4px;
|
||||
border: 1px solid #1e3a44;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.lineOut {
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
background: rgba(32, 74, 111, 0.5);
|
||||
|
||||
.persont {
|
||||
height: 5px;
|
||||
background: linear-gradient(60deg, #187593 0%, #aff1f4 100%);
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
right: -6px;
|
||||
top: -7px;
|
||||
width: 18px;
|
||||
height: 19px;
|
||||
background: url('~@/assets/images/icon_04.png') no-repeat left bottom;
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.num {
|
||||
width: 10%;
|
||||
margin-left: 10px;
|
||||
font-size: 1.6vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
163
src/views/portraitScreen/components/zdrc.vue
Normal file
163
src/views/portraitScreen/components/zdrc.vue
Normal file
@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<!-- 供需技能匹配分析 -->
|
||||
<div id="zdqycxEcharts" style="width: 100%; height: 100%"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { onMounted, nextTick } from "vue";
|
||||
import { rotate } from "ol/transform";
|
||||
|
||||
onMounted(() => {
|
||||
lineChartFn();
|
||||
});
|
||||
|
||||
const lineChartFn = (val) => {
|
||||
var myChart = echarts.init(document.getElementById("zdqycxEcharts"));
|
||||
var option = {
|
||||
legend: {
|
||||
show: true,
|
||||
right: 10,
|
||||
top: 10,
|
||||
textStyle: { color: "#fff" },
|
||||
data: ['总岗位数量', '需求技能岗位数量']
|
||||
},
|
||||
legend: {
|
||||
textStyle: { color: "#fff", fontSize: 46 },
|
||||
selectedMode: false
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: { type: "shadow" }
|
||||
},
|
||||
grid: {
|
||||
top: "10%",
|
||||
right: "10%",
|
||||
left: "14%",
|
||||
bottom: "12%"
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisPointer: {
|
||||
type: "shadow"
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff"
|
||||
},
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
rotate: 20,
|
||||
fontSize: 40,
|
||||
interval: 0
|
||||
},
|
||||
data: ["比亚迪电子", '全友家私','成都领益科技','四川福蓉科技', '掌上明珠', '裕同印刷'],
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 40,
|
||||
interval: 0
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgb(15,54,90)",
|
||||
type: "solid"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
series: [
|
||||
{
|
||||
name: "无技能要求",
|
||||
type: "bar",
|
||||
stack: 'total',
|
||||
data: [78, 81, 45, 37, 72, 79, 85, 81],
|
||||
barWidth: 60,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top', // 将标签显示在柱状图的顶部
|
||||
color: "#fff",
|
||||
formatter: '{c} %' // {c}表示数据值，{d}%表示百分比，计算方式为 (c / 总和) * 100%
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
|
||||
[
|
||||
{ offset: 0, color: "#072133" },
|
||||
{ offset: 0.5, color: "#7d792e" },
|
||||
{ offset: 1, color: "#f1c515" }
|
||||
], false),
|
||||
borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1,
|
||||
[
|
||||
{ offset: 1, color: '#f1c515' },
|
||||
{ offset: 1, color: '#f1c515' }
|
||||
], false),
|
||||
shadowColor: "#f1c515",
|
||||
shadowBlur: 2
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "技能要求",
|
||||
type: "bar",
|
||||
stack: 'total',
|
||||
data: [87, 85, 67, 59, 79, 84, 82, 83],
|
||||
barWidth: 60,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top', // 将标签显示在柱状图的顶部
|
||||
color: "#fff",
|
||||
formatter: '{c} %' // {c}表示数据值，{d}%表示百分比，计算方式为 (c / 总和) * 100%
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
|
||||
[
|
||||
{ offset: 0, color: "#052521" },
|
||||
{ offset: 0.5, color: "#0488cf" },
|
||||
{ offset: 1, color: "#01a3f7" }
|
||||
], false),
|
||||
borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1,
|
||||
[
|
||||
{ offset: 1, color: '#01a3f7' },
|
||||
{ offset: 0.8, color: '#01a3f7' }
|
||||
], false),
|
||||
shadowColor: "#01a3f7",
|
||||
shadowBlur: 2
|
||||
},
|
||||
},
|
||||
},
|
||||
]
|
||||
};
|
||||
option && myChart.setOption(option);
|
||||
myChart.on("click", function (params) { });
|
||||
window.onresize = function () {
|
||||
myChart.resize();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
336
src/views/portraitScreen/index.vue
Normal file
336
src/views/portraitScreen/index.vue
Normal file
@ -0,0 +1,336 @@
|
||||
<template>
|
||||
<div class="bigScrenn portraitBox">
|
||||
<!-- 头部 -->
|
||||
<div class="portratCnt noScollLine">
|
||||
<!-- 头部 -->
|
||||
<div class="port-head">
|
||||
<Head title="崇州市就业生态链数据"></Head>
|
||||
<div class="bg-bbb">
|
||||
<Cygjbl></Cygjbl>
|
||||
</div>
|
||||
<!-- <ul class="ul-bbb">
|
||||
<li class="bbb-item" v-for="(it, idx) in data.twoList" :key="idx">
|
||||
<div class="top">{{ it.label }}</div>
|
||||
<div class="cntBox">
|
||||
<Gxjnppfx v-if="it.label == '技能岗位缺口TOP5'"></Gxjnppfx>
|
||||
<Cygxfx v-if="it.label == '产业供需分析'"></Cygxfx>
|
||||
<Gjgrzmyd v-if="it.label == '各行业需求TOP5'"></Gjgrzmyd>
|
||||
</div>
|
||||
</li>
|
||||
</ul> -->
|
||||
</div>
|
||||
<!-- 第二部分 -->
|
||||
<ul class="port-three">
|
||||
<li class="port-three-item" v-for="(it, idx) in data.threeList" :key="idx">
|
||||
<div class="bt-Title tc">
|
||||
<span>{{ it.title }}</span>
|
||||
</div>
|
||||
<ul class="childBox flex">
|
||||
<li v-for="(iv, ix) in it.list" :key="ix" class="childItem">
|
||||
<div class="info tc">{{ iv.label }}</div>
|
||||
<div class="chartsBox">
|
||||
<Jgsl v-if="iv.label == '服务机构分类与数量'"></Jgsl>
|
||||
<Glrq v-if="iv.label == '各类人群就业率'"></Glrq>
|
||||
<Csgf v-if="iv.label == '服务机构入职成功率'"></Csgf>
|
||||
<Jgrzcgl v-if="iv.label == '技能型岗位需求'"></Jgrzcgl>
|
||||
<Xxrcgw v-if="iv.label == '新兴人才岗位需求'" />
|
||||
<Zdrc v-if="iv.label == '重点企业人才招聘技能要求'" />
|
||||
<Jgmyd v-if="iv.label == '各类机构入职满意度'"></Jgmyd>
|
||||
<Hyjyl v-if="iv.label == '行业就业率'"></Hyjyl>
|
||||
<Xlccjyl v-if="iv.label == '学历层次就业率'"></Xlccjyl>
|
||||
<Qylsry v-if="iv.label == '企业流失人员分析'"></Qylsry>
|
||||
<Lsyyfx v-if="iv.label == '流失原因分析'"></Lsyyfx>
|
||||
<Lxfx v-if="iv.label == '流向分析'"></Lxfx>
|
||||
<Xxgwxq v-if="iv.label == '新型岗位需求'"></Xxgwxq>
|
||||
<Rcldyy v-if="iv.label == '人才流动原因'"></Rcldyy>
|
||||
<Jgpxfb v-if="iv.label == '技能培训机构分布'"></Jgpxfb>
|
||||
<Jngwtop v-if="iv.label == '短缺技能岗位TOP'"></Jngwtop>
|
||||
<Jndqzpnd v-if="iv.label == '重点企业技能短缺招聘难度'"></Jndqzpnd>
|
||||
<Gwxzdb v-if="iv.label == '技能岗位薪资酬对比'"></Gwxzdb>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- <ul class="port-four">
|
||||
<li class="port-four-item" :key="idx">
|
||||
<div class="bt-Title tc">
|
||||
<span>人才流失趋势分析</span>
|
||||
</div>
|
||||
<div class="bottom_box">
|
||||
<img src="@/assets/images/sjt.png" alt="">
|
||||
</div>
|
||||
</li>
|
||||
</ul> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Head from "@/views/largeScreen/layout/head.vue";
|
||||
import Cygjbl from "./components/cygjbl.vue";
|
||||
import Gxjnppfx from "./components/gxjnppfx.vue";
|
||||
import Cygxfx from "./components/cygxfx.vue";
|
||||
import Ghyxqzf from "./components/ghyxqzf.vue";
|
||||
import Gjgrzmyd from "./components/gjgrzmyd.vue";
|
||||
import Jsxrcfb from "./components/jsxrcfb.vue";
|
||||
import Jgsl from "./components/Jgsl.vue";
|
||||
import Qylsry from "./components/qylsry.vue";
|
||||
import Lsyyfx from "./components/lsyyfx.vue";
|
||||
import Lxfx from "./components/lxfx.vue";
|
||||
import Xxrcgw from "./components/xxrcgw.vue";
|
||||
import Zdrc from "./components/zdrc.vue";
|
||||
import Glrq from "./components/glrq.vue";
|
||||
import Jgrzcgl from "./components/Jgrzcgl.vue";
|
||||
import Jgmyd from "./components/jgmyd.vue";
|
||||
import Csgf from "./components/csgf.vue";
|
||||
import Hyjyl from "./components/hyjyl.vue";
|
||||
import Xlccjyl from "./components/xlccjyl.vue";
|
||||
import Syl from "./components/syl.vue";
|
||||
import Jgpxfb from "./components/jgpxfb.vue";
|
||||
import Jnxgwxq from "./components/jnxgwxq.vue";
|
||||
import Xxgwxq from "./components/xxgwxq.vue";
|
||||
import Rcldyy from "./components/rcldyy.vue";
|
||||
import Jngwtop from "./components/jngwtop.vue";
|
||||
import Jndqzpnd from "./components/jndqzpnd.vue";
|
||||
import Gwxzdb from "./components/gwxzdb.vue";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
getCurrentInstance,
|
||||
onBeforeUnmount
|
||||
} from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const data = reactive({
|
||||
twoList: [
|
||||
{ label: "产业供需分析" },
|
||||
{ label: "各行业需求TOP5" },
|
||||
{ label: "技能岗位缺口TOP5" },
|
||||
],
|
||||
threeList: [
|
||||
{
|
||||
title: "人力资源服务市场",
|
||||
list: [
|
||||
{ label: "服务机构分类与数量" },
|
||||
{ label: "服务机构入职成功率" },
|
||||
{ label: "各类人群就业率" },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "人才结构分析",
|
||||
list: [
|
||||
{ label: "技能型岗位需求" },
|
||||
{ label: "新兴人才岗位需求" },
|
||||
{ label: "重点企业人才招聘技能要求" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "人才流失趋势分析",
|
||||
list: [
|
||||
{ label: "企业流失人员分析" },
|
||||
{ label: "流失原因分析" },
|
||||
{ label: "流向分析" },
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/homeScreen.scss";
|
||||
|
||||
@mixin textColor($color1, $color2) {
|
||||
background-image: linear-gradient(to top, $color1 0%, $color2 50%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.portraitBox {
|
||||
width: 100%;
|
||||
background: url("~@/assets/images/0000.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
padding: 0 40px;
|
||||
|
||||
.portratCnt {
|
||||
width: 100%;
|
||||
height: calc(100vh - 90px);
|
||||
overflow: hidden;
|
||||
.port-head {
|
||||
height: calc(1800px - 190px);
|
||||
// height: 1800px ;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 10px;
|
||||
margin-right: 4px;
|
||||
margin-left: 4px;
|
||||
margin-top: 190px;
|
||||
position: relative;
|
||||
background: url("~@/assets/images/top_bg.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.bg-bbb {
|
||||
// height: 1300px;
|
||||
height: 100%;
|
||||
padding-top: 260px;
|
||||
}
|
||||
|
||||
.ul-bbb {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
position: absolute;
|
||||
bottom: 34px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
.bbb-item {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
margin: 0 4px;
|
||||
border-radius: 10px;
|
||||
// background: url("~@/assets/images/fff.png") no-repeat center center;
|
||||
// background-size: 100% 100%;
|
||||
|
||||
.top {
|
||||
height: 120px;
|
||||
line-height: 120px;
|
||||
padding-left: 40px;
|
||||
box-sizing: border-box;
|
||||
font-size: 2.2vw;
|
||||
font-family: "YSBTH";
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: 20px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 16px;
|
||||
height: 17px;
|
||||
background: url("~@/assets/images/icon_20.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.cntBox {
|
||||
height: calc(100% - 120px);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.port-three {
|
||||
height: 2400px;
|
||||
|
||||
// background: url("~@/assets/images/bg_13.png") no-repeat center center;
|
||||
// background-size: 100% 100%;
|
||||
|
||||
.port-three-item {
|
||||
height: 50%;
|
||||
min-height: 350px;
|
||||
margin: 0 4px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 6px;
|
||||
|
||||
.bt-Title {
|
||||
font-size: 2.8vw;
|
||||
background: url("~@/assets/images/bg_14.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
height: 120px;
|
||||
|
||||
span {
|
||||
@include textColor(#499fe2, #ffffff);
|
||||
font-family: "YSBTH";
|
||||
}
|
||||
}
|
||||
|
||||
.childBox {
|
||||
height: calc(100% - 120px);
|
||||
background: url('~@/assets/images/ggg.png') no-repeat center center;
|
||||
.childItem {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
|
||||
.info {
|
||||
font-size: 2.2vw;
|
||||
@include textColor(#09b8cf, #ffffff);
|
||||
font-family: "YSBTH";
|
||||
}
|
||||
|
||||
.chartsBox {
|
||||
height: calc(100% - 125px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 10px;
|
||||
right: 0;
|
||||
width: 3px;
|
||||
height: 90%;
|
||||
background: url("~@/assets/images/lien.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
&:nth-last-child(1) {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom_box {
|
||||
height: calc(100% - 56px);
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.port-four {
|
||||
height: 1200px;
|
||||
|
||||
.port-four-item {
|
||||
height: 100%;
|
||||
background: none;
|
||||
|
||||
.bt-Title {
|
||||
font-size: 2.8vw;
|
||||
background: url("~@/assets/images/bg_14.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
height: 120px;
|
||||
|
||||
span {
|
||||
@include textColor(#499fe2, #ffffff);
|
||||
font-family: "YSBTH";
|
||||
}
|
||||
}
|
||||
|
||||
.bottom_box {
|
||||
height: calc(100% - 120px);
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user