提交 d9c0373b authored 作者: yanpeng's avatar yanpeng

union map

上级 e4c2ca62
...@@ -50,7 +50,7 @@ export const countryCoordMap = { ...@@ -50,7 +50,7 @@ export const countryCoordMap = {
// 欧洲 // 欧洲
俄罗斯: [37.6184, 55.7558], // 俄罗斯莫斯科 俄罗斯: [37.6184, 55.7558], // 俄罗斯莫斯科
德国: [10.4515, 51.1657], // 德国柏林 德国: [10.4515, 51.1657], // 德国柏林
英国: [-3.436, 55.3781], // 英国伦敦 英国: [-2, 54], // 英国伦敦
法国: [2.2137, 46.2276], // 法国巴黎 法国: [2.2137, 46.2276], // 法国巴黎
意大利: [12.5674, 41.8719], // 意大利罗马 意大利: [12.5674, 41.8719], // 意大利罗马
西班牙: [-3.7492, 40.4637], // 西班牙马德里 西班牙: [-3.7492, 40.4637], // 西班牙马德里
...@@ -218,12 +218,12 @@ export function convertAsiaCenterCoord(coord) { ...@@ -218,12 +218,12 @@ export function convertAsiaCenterCoord(coord) {
const [lng, lat] = coord; const [lng, lat] = coord;
// 将以本初子午线为基准的坐标转换为以亚洲为中心的坐标 // 将以本初子午线为基准的坐标转换为以亚洲为中心的坐标
// world-asia-center.json 是将标准坐标的经度减去了 180 度 // world-asia-center.json 是将标准坐标的经度加上了 180 度(地图向右平移)
let newLng = lng - 180; let newLng = lng + 180;
// 规范化到 [-180, 180] 范围 // 规范化到 [-180, 180] 范围
if (newLng < -180) { if (newLng > 180) {
newLng += 360; newLng -= 360;
} }
return [newLng, lat]; return [newLng, lat];
......
...@@ -626,6 +626,7 @@ function createChart() { ...@@ -626,6 +626,7 @@ function createChart() {
map: "world", map: "world",
roam: true, roam: true,
zoom: 1.2, zoom: 1.2,
nameMap: nameMap,
label: { label: {
show: false show: false
}, },
......
...@@ -7,12 +7,19 @@ ...@@ -7,12 +7,19 @@
<div class="sub-title">{{ subtitle }}</div> <div class="sub-title">{{ subtitle }}</div>
</div> </div>
<div class="description">{{ description }}</div> <div class="description">{{ description }}</div>
<div v-if="quantity > 0" class="quantity" :style="{ color: color }">{{ quantity }}{{ unit || "个" }}</div> <div v-if="quantity > 0" class="quantity" :style="{ color: color }">
{{ quantity }}{{ unit || "个" }}
<div class="quantity-title-des" v-if="desMap[title]">
<img class="info-icon" :src="infoIcon" alt="" />
{{ desMap[title] }}
</div>
</div>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import infoIcon from "../assets/icons/info-icon.png";
defineProps({ defineProps({
title: { title: {
type: String, type: String,
...@@ -39,6 +46,11 @@ defineProps({ ...@@ -39,6 +46,11 @@ defineProps({
default: "#409EFF" default: "#409EFF"
} }
}); });
const desMap = {
实体清单: "中国实体数量",
商业管制清单: "受管制物项数量",
关键与新兴技术清单: "关键与新兴技术数量"
};
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
...@@ -53,9 +65,7 @@ defineProps({ ...@@ -53,9 +65,7 @@ defineProps({
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
transition: transition: transform 0.3s ease, box-shadow 0.3s ease;
transform 0.3s ease,
box-shadow 0.3s ease;
cursor: pointer; cursor: pointer;
} }
...@@ -117,9 +127,27 @@ defineProps({ ...@@ -117,9 +127,27 @@ defineProps({
.quantity { .quantity {
position: absolute; position: absolute;
top: 20px; top: 15px;
right: 20px; right: 20px;
font-size: 32px; font-size: 32px;
font-weight: 700; font-weight: 700;
width: 150px;
display: flex;
flex-direction: column;
align-items: flex-end;
.quantity-title-des {
display: flex;
align-items: center;
font-family: Source Han Sans CN;
font-size: 14px;
font-weight: 400;
color: rgba(95, 101, 108, 1);
line-height: 1.4;
.info-icon {
width: 16px;
height: 16px;
margin-right: 4px;
}
}
} }
</style> </style>
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论