From 03cd344a15bf63bf7968dc77a026c77c78c304f4 Mon Sep 17 00:00:00 2001
From: pyt <626651354@qq.com>
Date: 星期三, 26 三月 2025 11:44:32 +0800
Subject: [PATCH] Merge branch 'master' of http://120.76.84.145:10101/gitblit/r/H5/chongzhou-screen
---
src/components/datascreen/map.vue | 117 ++++++++++++++++++++++++++++------------------------------
1 files changed, 56 insertions(+), 61 deletions(-)
diff --git a/src/components/datascreen/map.vue b/src/components/datascreen/map.vue
index e25ed20..0b628d5 100644
--- a/src/components/datascreen/map.vue
+++ b/src/components/datascreen/map.vue
@@ -274,67 +274,66 @@
// 生成标记点系列的配置
getMarkerSeries(type) {
return {
- name: type === "blue" ? "蓝色标记" : "橙色标记", // 系列名称
- type: "scatter", // 散点图类型
- coordinateSystem: "geo", // 使用地理坐标系
- geoIndex: 0, // 关联第一个geo组件
- data: this.mapPoints.filter(point => point.type === type), // 筛选对应类型的数据
- symbol: `image://${type === "blue" ? tooltipBlue : tooltipOrange}`, // 标记图标
- symbolSize: [20, 30], // 标记大小
- symbolOffset: [0, -15], // 标记偏移量
- z: 20, // 层级
+ name: type === "blue" ? "蓝色标记" : "橙色标记",
+ type: "scatter",
+ coordinateSystem: "geo",
+ geoIndex: 0,
+ data: this.mapPoints.filter(point => point.type === type),
+ symbol: `image://${type === "blue" ? tooltipBlue : tooltipOrange}`,
+ symbolSize: MAP_CONSTANTS.MARKER.SIZE,
+ symbolOffset: MAP_CONSTANTS.MARKER.OFFSET,
+ z: MAP_CONSTANTS.MARKER.Z_INDEX,
- // 提示框配置
+ label: {
+ show: false // 禁用标签显示
+ },
+
+ // 修复tooltip配置
tooltip: {
- show: true, // 显示提示框
- trigger: 'item', // 触发类型：数据项
- backgroundColor: 'transparent', // 背景透明
- borderWidth: 0, // 无边框
- padding: [0, 0, 0, 0], // 内边距
- // 提示框位置
+ show: true,
+ trigger: 'item',
+ backgroundColor: 'transparent',
+ borderWidth: 0,
+ padding: 0,
+ className: 'map-tooltip',
position: function (point) {
+ // 固定偏移量
return [point[0] - 100, point[1] - 160];
},
- // 提示框内容格式化
formatter: function (params) {
- // 返回自定义HTML结构的提示框内容
- return `<div style="
- background: url(${tooltipBg}) no-repeat center center;
- background-size: 100% 100%;
- width: 211px;
- padding-bottom: 24px;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- ">
- <div style="color: #fff; font-size: 16px; margin: 21px 0;font-weight: bold;">${params.name}</div>
- <div style="display: flex; justify-content: space-around; width: 100%;">
- <div style="text-align: center;">
- <div style="color: rgba(102, 255, 255, 1); font-size: 20px;margin-bottom: 8px;font-family: 'pangmenzhengdao';">${params.data.householdCount}</div>
- <div style="color: #fff; font-size: 12px;">安置户数(户)</div>
- </div>
- <div style="text-align: center;">
- <div style="color: rgba(102, 255, 255, 1); font-size: 20px;margin-bottom: 8px;font-family: 'pangmenzhengdao';">${params.data.personCount}</div>
- <div style="color: #fff; font-size: 12px;">安置人数(人)</div>
+ const { name, data } = params;
+ return `
+ <div style="
+ background: url(${tooltipBg}) no-repeat center center;
+ background-size: 100% 100%;
+ width: 211px;
+ padding: 20px 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ ">
+ <div style="color: #fff; font-size: 16px; margin-bottom: 16px; font-weight: bold;">${name}</div>
+ <div style="display: flex; justify-content: space-around; width: 100%; padding: 0 21px;">
+ <div style="text-align: center;">
+ <div style="color: #66ffff; font-size: 20px; font-family: 'pangmenzhengdao'; margin-bottom: 8px;">${data.householdCount}</div>
+ <div style="color: #fff; font-size: 12px;">安置户数(户)</div>
+ </div>
+ <div style="text-align: center;">
+ <div style="color: #66ffff; font-size: 20px; font-family: 'pangmenzhengdao'; margin-bottom: 8px;">${data.personCount}</div>
+ <div style="color: #fff; font-size: 12px;">安置人数(人)</div>
+ </div>
</div>
</div>
- </div>`;
+ `;
}
},
- // 标签配置
- label: {
- show: false // 不显示标签
- },
-
- // 高亮效果配置
emphasis: {
- scale: true, // 启用缩放效果
- scaleSize: 1.2, // 放大比例
+ scale: true,
+ scaleSize: 1.2,
itemStyle: {
- shadowBlur: 10, // 阴影模糊大小
- shadowColor: type === "blue" ? '#00eaff' : '#ff8e3a' // 根据类型设置阴影颜色
+ shadowBlur: 10,
+ shadowColor: type === "blue" ? MAP_CONSTANTS.SHADOW.COLOR : '#ff8e3a'
}
}
};
@@ -456,14 +455,12 @@
disabled: false, // 启用高亮效果
label: {
show: true, // 显示标签
- textStyle: { // 标签文字样式
- color: "#fff",
- fontSize: 10,
- fontWeight: "normal",
- opacity: 1
- }
+ color: "#fff", // 文字颜色
+ fontSize: 10, // 文字大小
+ fontWeight: "normal", // 文字粗细
+ opacity: 1 // 不透明度
},
- itemStyle: { // 高亮时的样式
+ itemStyle: {
areaColor: { // 区域填充，保持与正常状态相同的背景
type: 'pattern',
image: mapBg,
@@ -494,12 +491,10 @@
// 标签配置
label: {
show: true, // 显示标签
- textStyle: { // 标签文字样式
- color: "#fff",
- fontSize: 10,
- fontWeight: "normal",
- opacity: 1
- }
+ color: "#fff", // 文字颜色
+ fontSize: 10, // 文字大小
+ fontWeight: "normal", // 文字粗细
+ opacity: 1 // 不透明度
},
tooltip: {
--
Gitblit v1.7.1