兴蜀人力数据概览大屏

This commit is contained in:
2025-10-12 14:25:12 +08:00
parent 2ed80d527d
commit ff7d9b1f31
10 changed files with 171 additions and 82 deletions

View File

@ -11,6 +11,8 @@ import { ref, reactive, computed, onMounted } from "vue";
import * as echarts from "echarts";
// 引入崇州市地图json数据
import chongzhouJSON from "@/assets/json/510184.json";
// 引入本地撒点图片
import pointImage from "@/assets/images/recruitment/map-point1.png";
// 获取地图DOM元素
let map = ref();
// 注册崇州地图
@ -54,11 +56,24 @@ let option = {
show: true,
color: "#fff",
fontSize: 12,
fontWeight: "bold"
fontWeight: "bold",
emphasis: {
show: true, // 确保悬停时标签显示
color: "#ffff00", // 鼠标悬停时的文字颜色
fontSize: 14, // 鼠标悬停时的文字大小
fontWeight: "bold" // 鼠标悬停时的文字粗细
}
},
itemStyle: {
normal: {
color: "#30DCFF"
color: "#121516",
borderColor: "#3a6c80", // 地图区域描边颜色
borderWidth: 1 // 地图区域描边宽度
},
emphasis: {
color: "#2d5565", // 鼠标悬停时的地图填充颜色
borderColor: "#30DCFF", // 地图区域描边颜色
borderWidth: 1 // 地图区域描边宽度
}
}
}
@ -71,13 +86,13 @@ let option = {
data: initialPoints,
symbolSize: function (val) {
// 根据数值大小动态调整点的大小
return val[2] / 10;
return val[2] / 6;
},
label: {
show: false,
formatter: "{b}"
},
symbol: function (params) {}
symbol: "image://" + pointImage // 使用本地图片作为标记
}
]
};

View File

@ -8,6 +8,8 @@ import { ref, reactive, computed, onMounted } from "vue";
import * as echarts from "echarts";
// 引入崇州市地图json数据
import chongzhouJSON from "@/assets/json/510184.json";
// 引入本地撒点图片
import pointImage from "@/assets/images/recruitment/map-point1.png";
// 获取地图DOM元素
let map = ref();
// 注册崇州地图
@ -51,11 +53,24 @@ let option = {
show: true,
color: "#fff",
fontSize: 12,
fontWeight: "bold"
fontWeight: "bold",
emphasis: {
show: true, // 确保悬停时标签显示
color: "#ffff00", // 鼠标悬停时的文字颜色
fontSize: 14, // 鼠标悬停时的文字大小
fontWeight: "bold" // 鼠标悬停时的文字粗细
}
},
itemStyle: {
normal: {
color: "#30DCFF"
color: "#121516",
borderColor: "#3a6c80", // 地图区域描边颜色
borderWidth: 1 // 地图区域描边宽度
},
emphasis: {
color: "#2d5565", // 鼠标悬停时的地图填充颜色
borderColor: "#30DCFF", // 地图区域描边颜色
borderWidth: 1 // 地图区域描边宽度
}
}
}
@ -68,13 +83,13 @@ let option = {
data: initialPoints,
symbolSize: function (val) {
// 根据数值大小动态调整点的大小
return val[2] / 10;
return val[2] / 6;
},
label: {
show: false,
formatter: "{b}"
},
symbol: function (params) {}
symbol: "image://" + pointImage // 使用本地图片作为标记
}
]
};