二线口岸全景运行管理中心 地图

src/views/screen/two-kouan-full-run-manage/index.vue

@@ -140,7 +140,9 @@
             <span>80908</span><span>二线出岛贸易总额<span>/万元</span></span>
           </div>
         </div>
-        <div class="map"></div>
+        <div class="map">
+          <mapChart/>
+        </div>
         <div class="bottom">
           <div class="__title-1">
             设备资源控制
@@ -338,6 +340,7 @@
 import {computed, getCurrentInstance, reactive} from "vue";
 import headCom from './components/head.vue'
 import cardNumber from '../components/card-number/index.vue'
+import mapChart from './map.vue'
 
 const {proxy} = getCurrentInstance()
 const state: any = reactive({
@@ -847,6 +850,9 @@ const state: any = reactive({
 }
 .map {
   flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .bottom {
   margin-top: 24px;

src/views/screen/two-kouan-full-run-manage/map.vue

@@ -0,0 +1,198 @@
+<template>
+  <div class="chart-main" ref="ref_main">
+    <div class="chart-ref" ref="ref_chart"/>
+    <div class="map-bg">
+      <img src="@/views/screen/components/map/map-bg.png"/>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {getCurrentInstance, reactive, ref, onMounted, watch, nextTick} from "vue";
+import * as echarts from 'echarts';
+import {getCenter, getHainanMapJson} from "@/views/screen/components/map/tool";
+import locationYellowImg from './img/location-yellow.png'
+import mapIconImg1 from './img/map-icon-1.png'
+
+const props = defineProps({
+  data: {},
+})
+
+const {proxy} = getCurrentInstance()
+const state = reactive({
+  resizeObserver: <any>null,
+  chart: <any>null
+})
+const ref_chart = ref();
+const ref_main = ref();
+const initChart = () => {
+  echarts.dispose(ref_chart.value)
+  const chart = echarts.init(ref_chart.value);
+  echarts.registerMap('海南', getHainanMapJson())
+  const option = {
+    geo: {
+      map: '海南',
+      aspectScale: 1,
+      itemStyle: {
+        borderWidth: 2,
+        borderColor: '#00A2FF',
+        areaColor: 'rgba(16,84,231,0.2)',
+      },
+      label: {
+        show: true,
+        color: 'rgba(255,255,255,0.4)'
+      },
+      emphasis: {
+        disabled: true
+      }
+    },
+    tooltip: {
+      trigger: 'item',
+      backgroundColor: "rgba(50,50,50,0.7)",
+      borderColor: "#333",
+      borderWidth: 0,
+      padding: 10,
+      textStyle: {
+        color: '#ffffff'
+      }
+    },
+    series: [
+      {
+        geoIndex: 0,
+        type: 'map',
+        tooltip: {
+          show: false
+        },
+        select: {
+          disabled: true
+        },
+      },
+      {
+        geoIndex: 0,
+        type: "scatter",
+        coordinateSystem: "geo",
+        data: [
+          {name: '马村港', value: [109.95, 19.95, 100], position: ['-200%', '-100%'],},
+          {name: '洋浦港', value: [109.0, 19.55, 200], position: ['-200%', '-100%'],},
+          {name: '南山港', value: [108.95, 18.45, 200], position: ['-200%', '-100%'],},
+          {name: '南港', value: [110.65, 20.1, 200], position: ['100%', '-100%'],},
+          {name: '清澜港', value: [110.75, 19.5, 200], position: ['100%', '0%'],},
+          {name: '博鳌机场', value: [110.5, 19.2, 200], position: ['100%', '50%'],},
+        ].map(v => {
+          v.label = {
+            position: v.position
+          }
+          return v
+        }),
+        tooltip: {
+          formatter: (p) => {
+            let str = p.marker
+            str += p.name
+            str += '<span style="margin-left: 40px;"/>'
+            str += p.value[2]
+            return str
+          }
+        },
+        symbol: 'image://' + locationYellowImg,
+        symbolSize: [44, 33],
+        label: {
+          show: true,
+          formatter: (p) => {
+            let str = ''
+            str += "{a|}"
+            str += "{b|}"
+            str += `{c|${p.name}}`
+            return str
+          },
+          rich: {
+            a: {
+              width: 2,
+              height: 40,
+              backgroundColor: 'rgba(255, 166, 59, 1)'
+            },
+            b: {
+              backgroundColor: {
+                image: mapIconImg1
+              },
+              width: 20,
+              height: 20,
+              padding: [0, 4, 0, 4]
+            },
+            c: {
+              fontFamily: 'PingFang SC',
+              fontWeight: 500,
+              fontSize: 18,
+              color: '#ffffff',
+              padding: [0, 10, 0, 0]
+            }
+          },
+          height: 40,
+          backgroundColor: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 1,
+            y2: 0,
+            colorStops: [{
+              offset: 0, color: 'rgba(8, 126, 150, 1)' // 0% 处的颜色
+            }, {
+              offset: 1, color: 'rgba(8, 126, 150, 1)' // 100% 处的颜色
+            }],
+            global: false // 缺省为 false
+          }
+        },
+        emphasis: {
+          scale: false,
+        }
+      }
+    ]
+  }
+  chart.setOption(option);
+  state.resizeObserver = new ResizeObserver((entries) => {
+    for (const entry of entries) {
+      chart && chart.resize()
+    }
+  })
+  state.resizeObserver.observe(ref_main.value);
+  return chart
+}
+watch(() => props.data, () => {
+  state.chart = initChart()
+})
+onMounted(() => {
+  nextTick(() => {
+    state.chart = initChart()
+  })
+  return () => {
+    state.resizeObserver?.unobserve(ref_main?.value)
+    state.resizeObserver?.disconnect()
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.chart-main {
+  margin: auto;
+  flex: 1;
+  width: 760px;
+  height: 608px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .chart-ref {
+    width: 100%;
+    height: 100%;
+  }
+  .map-bg {
+    position: absolute;
+    z-index: -1;
+    width: 718px;
+    height: 538px;
+    >img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>