兴蜀人力数据概览大屏
This commit is contained in:
@ -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 // 使用本地图片作为标记
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
@ -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 // 使用本地图片作为标记
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user