大屏调整

This commit is contained in:
2025-10-21 19:41:21 +08:00
parent 26878528b9
commit 4ba4878f8a
16 changed files with 251 additions and 58 deletions

View File

@ -162,7 +162,7 @@ onUnmounted(() => {
.scale-container { .scale-container {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; // overflow: hidden;
} }
.pubTitle { .pubTitle {
height: 60px; height: 60px;

View File

@ -76,7 +76,7 @@ onUnmounted(() => {
.scale-container { .scale-container {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; // overflow: hidden;
} }
.allBox { .allBox {
width: 1920px; width: 1920px;

View File

@ -4,7 +4,7 @@
<div class="carcTitle">促就业学历占比</div> <div class="carcTitle">促就业学历占比</div>
<div class="pieMain"> <div class="pieMain">
<div class="pieBox" ref="pieRef"></div> <div class="pieBox" ref="pieRef"></div>
<div class="pieTitle">学历占比</div> <!-- <div class="pieTitle">学历占比</div> -->
</div> </div>
<ul class="pieLsit"> <ul class="pieLsit">
<li> <li>
@ -54,8 +54,12 @@ const option = {
borderRadius: 1 borderRadius: 1
}, },
label: { label: {
show: false, show: true,
position: "center" position: "center",
fontSize: 24,
color: "#fff",
fontWeight: "bold",
formatter: "学历占比" // 固定显示"学历占比"文字
}, },
labelLine: { labelLine: {

View File

@ -69,6 +69,7 @@ ul.schoolLsit {
} }
.name { .name {
color: #cbf2fa; color: #cbf2fa;
font-size: 0.7vw;
} }
.numb { .numb {
color: #30dcff; color: #30dcff;

View File

@ -88,16 +88,16 @@ onMounted(() => {
.custom-slide-content { .custom-slide-content {
color: #cbf2fa; color: #cbf2fa;
font-size: 0.625vw; font-size: 0.7vw;
height: 4.323vw; height: 4.323vw;
padding: 0.417vw 1.25vw 0 5.677vw; padding: 0.317vw 1.25vw 0 5.677vw;
.title { .title {
margin-bottom: 0.26vw; margin-bottom: 0.26vw;
} }
.col { .col {
margin-top: 0.78125vw; margin-top: 0.48125vw;
} }
} }

View File

@ -14,7 +14,7 @@ const option = {
top: "17%", top: "17%",
left: "15%", left: "15%",
right: "5%", right: "5%",
bottom: "20%" bottom: "15%"
}, },
// 设置图例 // 设置图例
legend: { legend: {
@ -34,7 +34,7 @@ const option = {
} }
}, },
axisLabel: { axisLabel: {
fontSize: 14, // 设置 x 轴文字大小 fontSize: 22, // 设置 x 轴文字大小
color: "#CBF2FA", // 可以同时设置文字颜色 color: "#CBF2FA", // 可以同时设置文字颜色
rotate: 20, // 文字倾斜45度 rotate: 20, // 文字倾斜45度
margin: 20 // 增加文字与轴线的距离 margin: 20 // 增加文字与轴线的距离
@ -56,6 +56,10 @@ const option = {
color: "#CBF2FA" // 文字颜色 color: "#CBF2FA" // 文字颜色
} }
}, },
axisLabel: {
fontSize: 20, // 设置 x 轴文字大小
color: "#CBF2FA" // 可以同时设置文字颜色
},
type: "value" type: "value"
}, },
series: [ series: [
@ -63,14 +67,14 @@ const option = {
name: "岗位种类数", name: "岗位种类数",
type: "line", type: "line",
showBackground: true, showBackground: true,
barWidth: 8, barWidth: 16,
data: [42, 7, 15], data: [42, 7, 15],
// 设置柱状图的数值 // 设置柱状图的数值
label: { label: {
show: true, show: true,
position: "top", position: "top",
color: "#30DCFF", color: "#30DCFF",
fontSize: 16 fontSize: 22
}, },
itemStyle: { itemStyle: {
//渐变色 //渐变色
@ -91,14 +95,14 @@ const option = {
name: "岗位人员数", name: "岗位人员数",
type: "line", type: "line",
showBackground: true, showBackground: true,
barWidth: 8, barWidth: 16,
data: [10230, 4509, 3201], data: [10230, 4509, 3201],
// 设置柱状图的数值 // 设置柱状图的数值
label: { label: {
show: true, show: true,
position: "top", position: "top",
color: "#CBF2FA", color: "#CBF2FA",
fontSize: 16 fontSize: 22
}, },
itemStyle: { itemStyle: {
//渐变色 //渐变色

View File

@ -14,7 +14,7 @@ const option = {
top: "15%", top: "15%",
left: "15%", left: "15%",
right: "5%", right: "5%",
bottom: "20%" bottom: "15%"
}, },
// 设置图例 // 设置图例
legend: { legend: {
@ -34,7 +34,7 @@ const option = {
} }
}, },
axisLabel: { axisLabel: {
fontSize: 14, // 设置 x 轴文字大小 fontSize: 22, // 设置 x 轴文字大小
color: "#CBF2FA", // 可以同时设置文字颜色 color: "#CBF2FA", // 可以同时设置文字颜色
rotate: 20, // 文字倾斜45度 rotate: 20, // 文字倾斜45度
margin: 20 // 增加文字与轴线的距离 margin: 20 // 增加文字与轴线的距离
@ -56,6 +56,10 @@ const option = {
color: "#CBF2FA" // 文字颜色 color: "#CBF2FA" // 文字颜色
} }
}, },
axisLabel: {
fontSize: 20, // 设置 x 轴文字大小
color: "#CBF2FA" // 可以同时设置文字颜色
},
type: "value" type: "value"
}, },
series: [ series: [
@ -70,7 +74,7 @@ const option = {
show: true, show: true,
position: "top", position: "top",
color: "#30DCFF", color: "#30DCFF",
fontSize: 16 fontSize: 22
}, },
itemStyle: { itemStyle: {
//渐变色 //渐变色
@ -98,7 +102,7 @@ const option = {
show: true, show: true,
position: "top", position: "top",
color: "#CBF2FA", color: "#CBF2FA",
fontSize: 16 fontSize: 22
}, },
itemStyle: { itemStyle: {
//渐变色 //渐变色

View File

@ -29,7 +29,7 @@ const option = {
} }
}, },
axisLabel: { axisLabel: {
fontSize: 14, // 设置 x 轴文字大小 fontSize: 22, // 设置 x 轴文字大小
color: "#CBF2FA", // 可以同时设置文字颜色 color: "#CBF2FA", // 可以同时设置文字颜色
rotate: 30, // 文字倾斜45度 rotate: 30, // 文字倾斜45度
margin: 20 // 增加文字与轴线的距离 margin: 20 // 增加文字与轴线的距离
@ -64,6 +64,10 @@ const option = {
color: "#CBF2FA" // 文字颜色 color: "#CBF2FA" // 文字颜色
} }
}, },
axisLabel: {
fontSize: 20, // 设置 x 轴文字大小
color: "#CBF2FA" // 可以同时设置文字颜色
},
type: "value" type: "value"
}, },
series: [ series: [
@ -78,7 +82,7 @@ const option = {
show: true, show: true,
position: "top", position: "top",
color: "#30DCFF", color: "#30DCFF",
fontSize: 16 fontSize: 22
}, },
itemStyle: { itemStyle: {
//渐变色 //渐变色

View File

@ -34,7 +34,7 @@ const option = {
textStyle: { textStyle: {
color: "#CBF2FA" color: "#CBF2FA"
}, },
fontSize: 14, // 设置 x 轴文字大小 fontSize: 22, // 设置 x 轴文字大小
color: "#CBF2FA" // 可以同时设置文字颜色 color: "#CBF2FA" // 可以同时设置文字颜色
} }
}, },
@ -51,6 +51,13 @@ const option = {
lineStyle: { lineStyle: {
color: "#CBF2FA" // 文字颜色 color: "#CBF2FA" // 文字颜色
} }
},
axisLabel: {
textStyle: {
color: "#CBF2FA"
},
fontSize: 22, // 设置 x 轴文字大小
color: "#CBF2FA" // 可以同时设置文字颜色
} }
}, },
// color: ["#fff"], // color: ["#fff"],
@ -65,7 +72,7 @@ const option = {
show: true, show: true,
position: "top", position: "top",
color: "#30DCFF", color: "#30DCFF",
fontSize: 16 fontSize: 22
}, },
itemStyle: { itemStyle: {
//渐变色 //渐变色

View File

@ -29,7 +29,7 @@ const option = {
} }
}, },
axisLabel: { axisLabel: {
fontSize: 14, // 设置 x 轴文字大小 fontSize: 22, // 设置 x 轴文字大小
color: "#CBF2FA", // 可以同时设置文字颜色 color: "#CBF2FA", // 可以同时设置文字颜色
rotate: 30, // 文字倾斜45度 rotate: 30, // 文字倾斜45度
margin: 20 // 增加文字与轴线的距离 margin: 20 // 增加文字与轴线的距离
@ -64,6 +64,10 @@ const option = {
color: "#CBF2FA" // 文字颜色 color: "#CBF2FA" // 文字颜色
} }
}, },
axisLabel: {
fontSize: 20, // 设置 x 轴文字大小
color: "#CBF2FA" // 可以同时设置文字颜色
},
type: "value" type: "value"
}, },
series: [ series: [
@ -78,7 +82,7 @@ const option = {
show: true, show: true,
position: "top", position: "top",
color: "#30DCFF", color: "#30DCFF",
fontSize: 16 fontSize: 22
}, },
itemStyle: { itemStyle: {
//渐变色 //渐变色

View File

@ -71,13 +71,13 @@ let option = {
itemStyle: { itemStyle: {
normal: { normal: {
color: "#121516", color: "#121516",
borderColor: "#3a6c80", // 地图区域描边颜色 borderColor: "#30DCFF", // 地图区域描边颜色
borderWidth: 1 // 地图区域描边宽度 borderWidth: 2 // 地图区域描边宽度
}, },
emphasis: { emphasis: {
color: "#2d5565", // 鼠标悬停时的地图填充颜色 color: "#2d5565", // 鼠标悬停时的地图填充颜色
borderColor: "#30DCFF", // 地图区域描边颜色 borderColor: "#30DCFF", // 地图区域描边颜色
borderWidth: 1 // 地图区域描边宽度 borderWidth: 2 // 地图区域描边宽度
} }
} }
} }
@ -91,7 +91,7 @@ let option = {
symbolSize: function (val) { symbolSize: function (val) {
// 根据数值大小动态调整点的大小 // 根据数值大小动态调整点的大小
// return val[2] / 6; // return val[2] / 6;
return 30; return 50;
}, },
label: { label: {
show: false, // 改为 true 显示标签 show: false, // 改为 true 显示标签

View File

@ -52,25 +52,25 @@ let option = {
label: { label: {
show: true, show: true,
color: "#fff", color: "#fff",
fontSize: 12, fontSize: 20,
fontWeight: "bold", fontWeight: "bold",
emphasis: { emphasis: {
show: true, // 确保悬停时标签显示 show: true, // 确保悬停时标签显示
color: "#ffff00", // 鼠标悬停时的文字颜色 color: "#ffff00", // 鼠标悬停时的文字颜色
fontSize: 14, // 鼠标悬停时的文字大小 fontSize: 20, // 鼠标悬停时的文字大小
fontWeight: "bold" // 鼠标悬停时的文字粗细 fontWeight: "bold" // 鼠标悬停时的文字粗细
} }
}, },
itemStyle: { itemStyle: {
normal: { normal: {
color: "#121516", color: "#121516",
borderColor: "#3a6c80", // 地图区域描边颜色 borderColor: "#30DCFF", // 地图区域描边颜色
borderWidth: 1 // 地图区域描边宽度 borderWidth: 2 // 地图区域描边宽度
}, },
emphasis: { emphasis: {
color: "#2d5565", // 鼠标悬停时的地图填充颜色 color: "#2d5565", // 鼠标悬停时的地图填充颜色
borderColor: "#30DCFF", // 地图区域描边颜色 borderColor: "#30DCFF", // 地图区域描边颜色
borderWidth: 1 // 地图区域描边宽度 borderWidth: 2 // 地图区域描边宽度
} }
} }
} }
@ -83,7 +83,8 @@ let option = {
data: initialPoints, data: initialPoints,
symbolSize: function (val) { symbolSize: function (val) {
// 根据数值大小动态调整点的大小 // 根据数值大小动态调整点的大小
return val[2] / 6; // return val[2] / 6;
return 50;
}, },
label: { label: {
show: false, show: false,

View File

@ -14,7 +14,7 @@
:type2="cardOneInfo.type2" :type2="cardOneInfo.type2"
> >
<el-carousel <el-carousel
:interval="4000" :interval="8000"
type="card" type="card"
height="17vw" height="17vw"
indicator-position="none" indicator-position="none"
@ -52,7 +52,7 @@
:type2="cardThreeInfo.type2" :type2="cardThreeInfo.type2"
> >
<el-carousel <el-carousel
:interval="4000" :interval="8000"
type="card" type="card"
height="17vw" height="17vw"
indicator-position="none" indicator-position="none"
@ -72,7 +72,7 @@
style="margin-top: 0.625vw" style="margin-top: 0.625vw"
> >
<el-carousel <el-carousel
:interval="4000" :interval="8000"
type="card" type="card"
height="17vw" height="17vw"
indicator-position="none" indicator-position="none"

View File

@ -14,7 +14,10 @@
</div> </div>
</div> </div>
</div> </div>
<div class="content" v-show="isactive != 0 && isactive != 5"> <div
class="content"
v-show="isactive != 0 && isactive != 4 && isactive != 5"
>
<div class="num">81.1</div> <div class="num">81.1</div>
<div class="label">人口总数</div> <div class="label">人口总数</div>
</div> </div>
@ -48,7 +51,7 @@
<!-- </transition> --> <!-- </transition> -->
<div class="hjrkDialogBox" v-show="isactive == 5"> <div class="hjrkDialogBox" v-show="isactive == 5">
<div class="titleBox"> <div class="titleBox">
<div class="title">端人才</div> <div class="title">端人才</div>
<div class="close" @click="isactive = -1"></div> <div class="close" @click="isactive = -1"></div>
</div> </div>
<ul class="statisticOne"> <ul class="statisticOne">
@ -66,6 +69,43 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="hjrkDialogBox" v-show="isactive == 4">
<div class="titleBox">
<div class="title">新增就业群体</div>
<div class="close" @click="isactive = -1"></div>
</div>
<div class="pieBigBox">
<div class="pieMain">
<div class="pieBox" ref="pieRef"></div>
<div class="pieTitle">新增就业群体</div>
</div>
<ul class="pieLsit">
<li>
<div><span class="blockOne"></span><span>城镇新增就业</span></div>
<div>
<span class="numb">目标7200人</span
><span class="proportion">完成5445人</span>
</div>
</li>
<li>
<div><span class="blockTwo"></span><span>失业人员再就业</span></div>
<div>
<span class="numb">目标1900人</span
><span class="proportion">完成1528人</span>
</div>
</li>
<li>
<div>
<span class="blockThree"></span><span>就业困难人员再就业</span>
</div>
<div>
<span class="numb">目标190人</span
><span class="proportion">完成125人</span>
</div>
</li>
</ul>
</div>
</div>
</div> </div>
</template> </template>
@ -242,7 +282,47 @@ const option = {
} }
] ]
}; };
const pieRef = ref(null);
const optionPie = {
// 设置图形位置
tooltip: {
trigger: "item"
},
series: [
{
name: "新增就业群里",
type: "pie",
radius: ["65%", "80%"],
avoidLabelOverlap: false,
padAngle: 5,
itemStyle: {
borderRadius: 1
},
label: {
show: false,
position: "center"
},
labelLine: {
show: false
},
data: [
{ value: 5445, name: "城镇新增就业", itemStyle: { color: "#58A8FF" } },
{
value: 1528,
name: "失业人员再就业",
itemStyle: { color: "#30DCFF" }
},
{
value: 125,
name: "就业困难人员再就业",
itemStyle: { color: "#ffffff" }
}
]
}
]
};
// 生命周期钩子 // 生命周期钩子
onMounted(() => { onMounted(() => {
if (enterpriseTwoRef.value) { if (enterpriseTwoRef.value) {
@ -250,6 +330,11 @@ onMounted(() => {
// 设置option // 设置option
chart.setOption(option); chart.setOption(option);
} }
if (pieRef.value) {
const chart = echarts.init(pieRef.value);
// 设置option
chart.setOption(optionPie);
}
}); });
</script> </script>
@ -406,8 +491,8 @@ ul.statisticOne {
padding-top: 3vw; padding-top: 3vw;
li { li {
// width: 450px; // width: 450px;
height: 190px; height: 9vw;
margin: 0 10px; margin: 0 0;
// 第一排的前2个元素第一排显示2个 // 第一排的前2个元素第一排显示2个
&:nth-child(-n + 2) { &:nth-child(-n + 2) {
width: 20vw; // 减去margin值 width: 20vw; // 减去margin值
@ -426,11 +511,11 @@ ul.statisticOne {
} }
.infoBox { .infoBox {
float: left; float: left;
padding: 0 0 0 10px; padding: 0 0 0 0.5vw;
.title { .title {
height: 40px; height: 2vw;
line-height: 40px; line-height: 2vw;
margin-top: 36px; margin-top: 1vw;
span { span {
background: -webkit-linear-gradient(#ffffff, #75e8ff); background: -webkit-linear-gradient(#ffffff, #75e8ff);
-webkit-background-clip: text; -webkit-background-clip: text;
@ -440,15 +525,94 @@ ul.statisticOne {
} }
} }
.count { .count {
font-size: 24px; font-size: 1.4vw;
padding: 18px 0 0 0; padding: 0.5vw 0 0 0;
span.numb { span.numb {
font-size: 2.1vw; font-size: 2.2vw;
display: inline-block; display: inline-block;
padding: 0 5px 0 0; padding: 0 0.5vw 0 0;
} }
} }
} }
} }
} }
.pieBigBox {
width: 40vw;
margin: 1vw auto 0;
// height: 274px;
.pieMain {
position: relative;
border: 1px solid transparent;
float: left;
.pieBox {
margin: 0 auto;
margin-top: 3vw;
width: 15vw;
height: 15vw;
background: url("~@/assets/images/recruitment/pie-bg@2x.png") no-repeat
center;
background-size: 100%;
border: 1px solid transparent;
}
.pieTitle {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
z-index: 10;
margin-top: 1vw;
font-size: 1vw;
}
}
ul.pieLsit {
float: left;
margin: 2.6vw 0 0 2vw;
border: 1px solid transparent;
padding: 1vw 0 0 0;
width: 20vw;
li {
// font-size: 16px;
display: flex;
justify-content: space-between;
width: 100%;
height: 3vw;
padding: 0 1vw;
background: rgba(203, 242, 250, 0.2);
border-radius: 4px 4px 4px 4px;
border: 1px solid rgba(203, 242, 250, 0.2);
margin-top: 1vw;
font-size: 0.7vw;
> div {
height: 100%;
line-height: 3vw;
}
.blockOne,
.blockTwo,
.blockThree,
.blockFour {
display: inline-block;
width: 0.8vw;
height: 0.8vw;
margin-right: 1vw;
}
.blockOne {
background-color: #58a8ff;
}
.blockTwo {
background-color: #30dcff;
}
.blockThree {
background-color: #ffffff;
}
.blockFour {
background-color: #dd7d4d;
}
.proportion {
display: inline-block;
width: 4.5vw;
text-align: right;
}
}
}
}
</style> </style>

View File

@ -45,31 +45,31 @@ const initialPoints = [
{ {
name: "崇阳街道", name: "崇阳街道",
value: [103.675571, 30.641527, 150], value: [103.675571, 30.641527, 150],
branch: 2, branch: 4,
broker: 13 broker: 15
}, },
{ {
name: "羊马街道", name: "羊马街道",
value: [103.752865, 30.661384, 200], value: [103.752865, 30.661384, 200],
branch: 1, branch: 2,
broker: 8 broker: 12
}, },
{ {
name: "三江街道", name: "三江街道",
value: [103.791143, 30.548786, 180], value: [103.791143, 30.548786, 180],
branch: 3, branch: 3,
broker: 17 broker: 14
}, },
{ {
name: "江源街道", name: "江源街道",
value: [103.78269, 30.595347, 160], value: [103.78269, 30.595347, 160],
branch: 2, branch: 1,
broker: 9 broker: 10
}, },
{ {
name: "大划街道", name: "大划街道",
value: [103.742544, 30.566601, 140], value: [103.742544, 30.566601, 140],
branch: 1, branch: 5,
broker: 5 broker: 5
}, },
{ {

View File

@ -63,7 +63,7 @@ onUnmounted(() => {
.scale-container { .scale-container {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; // overflow: hidden;
} }
.allBox { .allBox {