From 6c757d5dab619fd759854778978270f0eecaec93 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期二, 05 三月 2024 17:33:57 +0800
Subject: [PATCH] fix:修改文字位置
---
src/views/daoAnOffice/center-map.vue | 339 ++++++++++++++++++++++++++++++++++----------------------
1 files changed, 205 insertions(+), 134 deletions(-)
diff --git a/src/views/daoAnOffice/center-map.vue b/src/views/daoAnOffice/center-map.vue
index ec2e799..aaec8a1 100644
--- a/src/views/daoAnOffice/center-map.vue
+++ b/src/views/daoAnOffice/center-map.vue
@@ -1,149 +1,141 @@
-<script setup lang="ts">
-import { ref, reactive, nextTick } from "vue";
-import { currentGET, GETNOBASE } from "@/api";
-import { registerMap, getMap } from "echarts/core";
-import { optionHandle, regionCodes } from "./center.map";
-import BorderBox13 from "@/components/datav/border-box-13";
-import type { MapdataType } from "./center.map";
-import chart2 from "./chart2.vue"
-import chartgd from "./chartgd.vue"
-const option = ref({});
-const code = ref("china"); //china 浠ｈ〃涓浗 鍏朵粬鍦板競鏄鏀跨紪鐮�
-withDefaults(
- defineProps<{
- // 缁撴潫鏁板��
- title: number | string;
- }>(),
- {
- title: "鍦板浘",
- }
-);
-
-const dataSetHandle = async (regionCode: string, list: object[]) => {
- const geojson: any = await getGeojson(regionCode);
- let cityCenter: any = {};
- let mapData: MapdataType[] = [];
- //鑾峰彇褰撳墠鍦板浘姣忓潡琛屾斂鍖轰腑蹇冪偣
- geojson.features.forEach((element: any) => {
- cityCenter[element.properties.name] =
- element.properties.centroid || element.properties.center;
- });
- //褰撳墠涓績鐐瑰鏋滄湁姝ゆ潯鏁版嵁涓績鐐瑰垯璧嬪�紉锛寉褰撶劧杩欎釜x,y涔熷彲浠ュ悗绔繑鍥炶繘琛屽ぇ鐐癸紝鍓嶇鐪佸幓澶氳浠ｇ爜
- list.forEach((item: any) => {
- if (cityCenter[item.name]) {
- mapData.push({
- name: item.name,
- value: cityCenter[item.name].concat(item.value),
- });
- }
- });
- await nextTick();
- console.log(mapData)
- option.value = optionHandle(regionCode, list, mapData);
-};
-
-const getData = async (regionCode: string) => {
- currentGET("centerMap", { regionCode: regionCode }).then((res) => {
- console.log("璁惧鍒嗗竷", res);
- if (res.success) {
- dataSetHandle(res.data.regionCode, res.data.dataList);
- }
- });
-};
-const getGeojson = (regionCode: string) => {
- return new Promise<boolean>(async (resolve) => {
- let mapjson = getMap(regionCode);
- if (mapjson) {
- mapjson = mapjson.geoJSON;
- resolve(mapjson);
- } else {
- mapjson = await GETNOBASE(`./map-geojson/${regionCode}.json`).then(
- (data) => data
- );
- code.value = regionCode;
- registerMap(regionCode, {
- geoJSON: mapjson as any,
- specialAreas: {},
- });
- resolve(mapjson);
- }
- });
-};
-getData(code.value);
-
-const mapClick = (params: any) => {
- console.log(params);
- let xzqData = regionCodes[params.name];
- if (xzqData) {
- getData(xzqData.adcode);
- } else {
- window["$message"].warning("鏆傛棤涓嬬骇鍦板競");
- }
-};
-const dtFig =ref(0)
-const handlechan =()=>{
- console.log(dtFig.value)
- dtFig.value = 1
-}
-</script>
<template>
<div class="centermap">
- <div class="maptitle" style="display:none;">
- <div class="zuo"></div>
- <span class="titletext">{{ title }}</span>
- <div class="you"></div>
+ <div class="maptitle">
+ <img src="@/assets/img/icon/map_title.png" alt="">
</div>
<div class="mapwrap">
- <chartgd @changeDt="handlechan" v-if="dtFig ==0"></chartgd>
- <chart2 v-else></chart2>
+ <div ref="map" class="map-style"></div>
+ </div>
+
+ <div class="map-info-container">
+ <div class="info-title-container">
+ <div class="img-bg">
+ <img src="@/assets/img/icon/map_info_title.png" alt="">
+ </div>
+ <div class="info-title">
+ <div class="icon">
+ <img src="@/assets/img/icon/arrow_right.png" alt="">
+ </div>
+ <span class="title">閮芥睙鍫板競</span>
+ </div>
+ </div>
+ <div class="info-content-container">
+ <div class="info-item">
+ <div class="info-lable">浜嬫晠鏄撳彂澶氬彂璺锛�</div>
+ <div class="info-text">78</div>
+ </div>
+ <div class="info-item">
+ <div class="info-lable">閲嶇偣鏃呮父閫氶亾锛�</div>
+ <div class="info-text">12</div>
+ </div>
+ <div class="info-item">
+ <div class="info-lable">閮芥睙鍫版櫙鍖猴細</div>
+ <div class="info-text">5</div>
+ </div>
+ <div class="info-item">
+ <div class="info-lable">璀﹀姏閰嶅锛�</div>
+ <div class="info-text">265</div>
+ </div>
+ <div class="info-item">
+ <div class="info-lable">鎵撳洿鏂藉伐锛�</div>
+ <div class="info-text">12</div>
+ </div>
+ <div class="info-item">
+ <div class="info-lable">浜ら�氫簨鏁呮槗鍙戠偣锛�</div>
+ <div class="info-text">31</div>
+ </div>
+ <div class="info-item">
+ <div class="info-lable">閲嶇偣杩愯緭浼佷笟锛�</div>
+ <div class="info-text">19</div>
+ </div>
+ <div class="info-item">
+ <div class="info-lable">鍏氦绾胯矾锛�</div>
+ <div class="info-text">89</div>
+ </div>
+ <div class="info-item">
+ <div class="info-lable">瀹夊叏闅愭偅锛�</div>
+ <div class="info-text">3</div>
+ </div>
+ </div>
</div>
</div>
</template>
+
+<script setup>
+import * as echarts from 'echarts';
+import 'echarts-gl';
+import { ref, onMounted, nextTick } from "vue";
+
+import mapData from '@/assets/map/dujiangyan.json';
+
+
+echarts.registerMap('dujiangyan', mapData);
+
+const map = ref(null);
+let mapChart = null;
+
+const mapConfig = {
+ geo3D: {
+ map: "dujiangyan", //娉ㄥ唽鍦板浘鐨勫悕瀛�
+ roam: true, //寮�鍚紶鏍囩缉鏀惧拰骞崇Щ婕父銆傞粯璁や笉寮�鍚�
+ bottom: 80,
+ left: 10,
+ itemStyle: {
+ color: "#4189f2", // 鑳屾櫙
+ opacity: 0.7, //閫忔槑搴�
+ borderWidth: 1.5, // 杈规瀹藉害
+ borderColor: "#fff", // 杈规棰滆壊
+ fontSize: 16, //
+ },
+ // 鏍囩
+ label: {
+ show: true,
+ color: "#fff", //鍦板浘鍒濆鍖栧尯鍩熷瓧浣撻鑹�
+ fontSize: 18,
+ formatter: function (params) {
+ return params.name
+ },
+ },
+ // 鎺у埗鍣�
+ viewControl: {
+ beta: 80,
+ alpha: 55,
+ distance: 210,
+ maxBeta: 180
+ },
+ // 鐏厜
+ light: {
+ main: {
+ shadow: true,
+ intensity: 1
+ }
+ },
+ // 榧犳爣绉诲叆鏃舵牱寮�
+ emphasis: {
+ itemStyle: {
+ color: "#F63545"
+ }
+ }
+ }
+};
+
+onMounted(() => {
+ nextTick(() => {
+ setTimeout(() => {
+ mapChart = echarts.init(map.value);
+ mapChart.setOption(mapConfig, true);
+ }, 1000);
+ })
+})
+</script>
+
<style scoped lang="scss">
.centermap {
margin-bottom: 30px;
-
- .maptitle {
- height: 60px;
- display: flex;
- justify-content: center;
- padding-top: 10px;
- box-sizing: border-box;
-
- .titletext {
- font-size: 28px;
- font-weight: 900;
- letter-spacing: 6px;
- background: linear-gradient(
- 92deg,
- #0072ff 0%,
- #00eaff 48.8525390625%,
- #01aaff 100%
- );
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- margin: 0 10px;
- }
-
- .zuo,
- .you {
- background-size: 100% 100%;
- width: 29px;
- height: 20px;
- margin-top: 8px;
- }
-
- .zuo {
- background: url("@/assets/img/xiezuo.png") no-repeat;
- }
-
- .you {
- background: url("@/assets/img/xieyou.png") no-repeat;
- }
- }
+ position: relative;
.mapwrap {
//height: 580px;
@@ -156,7 +148,7 @@
.quanguo {
position: absolute;
right: 20px;
- top: -46px;
+ top: -46px;
width: 80px;
height: 28px;
border: 1px solid #00eded;
@@ -172,4 +164,83 @@
}
}
}
+
+.map-style {
+ width: 100%;
+ height: 100%;
+}
+
+.maptitle {
+ width: 308px;
+ position: absolute;
+ left: 0;
+ top: 0;
+}
+
+.map-info-container {
+ width: 225px;
+ position: absolute;
+ right: 0;
+ bottom: 200px;
+ background: rgba(17, 34, 58, 0.6);
+ border: 1px solid #29466A;
+
+ .info-title-container {
+ width: 100%;
+ position: relative;
+
+ .img-bg {
+ width: 100%;
+ }
+
+ .info-title {
+
+ width: 100%;
+ position: absolute;
+ top: 5px;
+ left: 0;
+ display: flex;
+ align-items: center;
+
+ .icon {
+ width: 15px;
+ margin: 0 5px 0 12px;
+ }
+
+ .title {
+ font-weight: 400;
+ font-size: 20px;
+ color: #FFFFFF;
+ text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.5);
+ font-style: italic;
+ background: linear-gradient(180deg, #FFFFFF 0%, #70B2F4 100%);
+ -webkit-background-clip: text;
+ // -webkit-text-fill-color: transparent;
+ }
+ }
+ }
+
+ .info-content-container {
+ padding: 18px 20px;
+ margin-top: -40px;
+ font-size: 14px;
+
+ .info-item {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ color: #4481DD;
+ line-height: 28px;
+ .info-text {
+ color: #fff;
+ }
+ }
+ }
+
+}
+
+.info-lable {
+ font-family: 'PingFang SC' !important;
+}
</style>
--
Gitblit v1.8.0