字体

hejianhao

2025-03-24 4223c358f1ad9ffa4fcbc8fb0e350dc5bf342b51

 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 20px;">
                                    <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: {