大屏修改

This commit is contained in:
2025-10-21 15:51:27 +08:00
parent b1fbb307dc
commit 52535df2fb
12 changed files with 123 additions and 110 deletions

View File

@ -10,19 +10,22 @@
<li>
<div><span class="blockOne"></span><span>中职</span></div>
<div>
<span class="numb">5230</span><span class="proportion">50%</span>
<!-- <span class="numb">5230</span> -->
<span class="proportion">38%</span>
</div>
</li>
<li>
<div><span class="blockTwo"></span><span>高职</span></div>
<div>
<span class="numb">4230</span><span class="proportion">30%</span>
<!-- <span class="numb">4230</span> -->
<span class="proportion">41%</span>
</div>
</li>
<li>
<div><span class="blockThree"></span><span>高校</span></div>
<div>
<span class="numb">3230</span><span class="proportion">20%</span>
<!-- <span class="numb">3230</span> -->
<span class="proportion">21%</span>
</div>
</li>
</ul>
@ -36,7 +39,8 @@ const pieRef = ref(null);
const option = {
// 设置图形位置
tooltip: {
trigger: "item"
trigger: "item",
formatter: "{b} : ({c}%)"
},
series: [
@ -58,9 +62,9 @@ const option = {
show: false
},
data: [
{ value: 5230, name: "中职", itemStyle: { color: "#58A8FF" } },
{ value: 4230, name: "高职", itemStyle: { color: "#30DCFF" } },
{ value: 3230, name: "高校", itemStyle: { color: "#FFFFFF" } }
{ value: 38, name: "中职", itemStyle: { color: "#58A8FF" } },
{ value: 41, name: "高职", itemStyle: { color: "#30DCFF" } },
{ value: 21, name: "高校", itemStyle: { color: "#FFFFFF" } }
]
}
]

View File

@ -4,24 +4,16 @@
<div class="carcTitle">促就业数清单</div>
<ul class="schoolLsit">
<li>
<div class="name">学校名称</div>
<div><span class="numb">71</span><span></span></div>
<div class="name">四川矿产机电技师学院</div>
<div><span class="numb">1593</span><span></span></div>
</li>
<li>
<div class="name">学校名称</div>
<div><span class="numb">71</span><span></span></div>
<div class="name">四川科华高级技工学校</div>
<div><span class="numb">705</span><span></span></div>
</li>
<li>
<div class="name">学校名称</div>
<div><span class="numb">71</span><span></span></div>
</li>
<li>
<div class="name">学校名称</div>
<div><span class="numb">71</span><span></span></div>
</li>
<li>
<div class="name">学校名称</div>
<div><span class="numb">71</span><span></span></div>
<div class="name">中国五冶高级学校崇州校区</div>
<div><span class="numb">652</span><span></span></div>
</li>
</ul>
</div>

View File

@ -7,11 +7,11 @@
<div class="flex just-between align-center col">
<div class="">
<div class="title">岗位种类数</div>
<div>480</div>
<div>9</div>
</div>
<div class="">
<div class="title">岗位人员数</div>
<div>480</div>
<div>680</div>
</div>
</div>
</div>
@ -22,11 +22,11 @@
<div class="flex just-between align-center col">
<div class="">
<div class="title">岗位种类数</div>
<div>480</div>
<div>34</div>
</div>
<div class="">
<div class="title">岗位人员数</div>
<div>480</div>
<div>18920</div>
</div>
</div>
</div>
@ -37,11 +37,11 @@
<div class="flex just-between align-center col">
<div class="">
<div class="title">岗位种类数</div>
<div>480</div>
<div>14</div>
</div>
<div class="">
<div class="title">岗位人员数</div>
<div>480</div>
<div>5037</div>
</div>
</div>
</div>

View File

@ -35,7 +35,7 @@ const option = {
},
type: "category",
data: ["制造业", "服务业", "建筑业", "批发和零售业"]
data: ["制造业", "服务业", "建筑业"]
},
yAxis: {
//网格线
@ -59,7 +59,7 @@ const option = {
type: "line",
showBackground: true,
barWidth: 8,
data: [70, 62, 52, 41],
data: [42, 7, 15],
// 设置柱状图的数值
label: {
show: true,
@ -86,7 +86,7 @@ const option = {
type: "line",
showBackground: true,
barWidth: 8,
data: [54, 32, 45, 18],
data: [10230, 4509, 3201],
// 设置柱状图的数值
label: {
show: true,

View File

@ -59,7 +59,7 @@ const option = {
type: "bar",
showBackground: true,
barWidth: 8,
data: [76, 32, 87, 65],
data: [31, 37, 45, 46],
// 设置柱状图的数值
label: {
show: true,
@ -86,7 +86,7 @@ const option = {
type: "bar",
showBackground: true,
barWidth: 8,
data: [34, 15, 45, 24],
data: [190, 2106, 8910, 13431],
// 设置柱状图的数值
label: {
show: true,

View File

@ -78,7 +78,7 @@ const option = {
]
}
},
data: [123, 60, 125, 80],
data: [0, 0, 0, 0],
z: 10
},
{

View File

@ -10,50 +10,54 @@ import { ref, reactive, computed, onMounted } from "vue";
// 引入Echarts
import * as echarts from "echarts";
// 引入崇州市地图json数据
import chongzhouJSON from "@/assets/json/510184.json";
import sichuanJSON from "@/assets/json/sichuan.json";
// 引入本地撒点图片
import pointImage from "@/assets/images/recruitment/map-point1.png";
// 获取地图DOM元素
let map = ref();
// 注册崇州地图
echarts.registerMap("chongzhou", chongzhouJSON);
echarts.registerMap("sichuan", sichuanJSON);
const initialPoints = [
{
name: "崇州市政府",
value: [103.679548, 30.63669, 150],
address: "北京市朝阳区"
name: "绵阳",
value: [104.684185, 31.473263, 0],
count: 0
},
{
name: "万达广场",
value: [103.692545, 30.629371, 200],
address: "上海市浦东新区"
name: "崇州",
value: [103.68055, 30.634619, 0],
count: 0
},
{
name: "北溪湿地",
value: [103.696859, 30.663888, 180],
address: "广州市天河区"
name: "武侯",
value: [104.04777, 30.648289, 0],
count: 0
},
{
name: "白塔湖景区",
value: [103.591696, 30.671858, 160],
address: "深圳市南山区"
},
{
name: "崇州市公安局",
value: [103.674729, 30.649677, 140],
address: "成都市锦江区"
name: "成华",
value: [104.108719, 30.665854, 0],
count: 0
}
];
// 地图参数设置
let option = {
tooltip: {
trigger: "item",
formatter: function (params) {
if (params.seriesType === "scatter") {
return `${params.name}<br/>合作社数量:${params.data.count}`;
}
return params.name;
}
},
geo: [
{
type: "map",
map: "chongzhou",
map: "sichuan",
roam: true,
zoom: 1,
label: {
show: true,
// show: true,
color: "#fff",
fontSize: 12,
fontWeight: "bold",
@ -86,7 +90,8 @@ let option = {
data: initialPoints,
symbolSize: function (val) {
// 根据数值大小动态调整点的大小
return val[2] / 6;
// return val[2] / 6;
return 30;
},
label: {
show: false,