设计辽宁页面 修改冀北技术监督问题

src/components/echarts/MyEchartMap.vue

@@ -2,13 +2,16 @@
 <template>
     <div style="position: relative">
         <div class="bars_w" ref="chartMap" id="chartMap"></div>
-        <span @click="circle" v-show="showCircle" class="iconfont icon-back" ></span>
+        <span @click="circle" v-show="showCircle" class="iconfont icon-back"></span>
     </div>
 </template>
 
 <script setup lang="ts">
 import { onBeforeUnmount, ref, watch, onMounted, defineEmits } from 'vue'
-import * as echarts from 'echarts4'
+import * as echarts from 'echarts'
+import 'echarts-gl'
+import 'echarts-liquidfill'
+import 'echarts/lib/component/dataZoom'
 import { useDictData } from '@/stores/dictData'
 const dictData = useDictData()
 const props = defineProps(['options'])
@@ -22,7 +25,7 @@ const fetchConfig = async (name: string) => {
 }
 // fetchConfig()
 
-const emit = defineEmits(['getRegionByRegion', 'eliminate'])
+const emit = defineEmits(['getRegionByRegion', 'eliminate', 'clickMap'])
 onMounted(() => {})
 
 const GetEchar = async (name: string) => {
@@ -131,6 +134,7 @@ const GetEchar = async (name: string) => {
                     borderWidth: 0
                 }
             }
+
             // regions: [
             //     {
             //         name: '南海诸岛',
@@ -146,22 +150,34 @@ const GetEchar = async (name: string) => {
             //     }
             // ]
         },
+
         ...props.options.options
     }
     if (props.options.visualMap) {
         option.visualMap = props.options.visualMap
     }
+    if (props.options.geo3D) {
+        option.geo = null
+        option.geo3D = {
+            map: name,
+            ...(props.options.geo3D || null)
+        }
+    }
     myCharts.value.setOption(option)
     window.addEventListener('resize', resizeHandler)
 
     // 点击事件
     myCharts.value.off('click')
     myCharts.value.on('click', (e: any) => {
-        // if (name == dictData.state.area?.[0].name  && e.componentIndex == 0) {
-        if (name == '中国'  && e.componentIndex == 0) {
-            MapReturn(e.name)
+        if (props.options.geo3D) {
+            emit('clickMap', e)
+        } else {
+            // if (name == dictData.state.area?.[0].name  && e.componentIndex == 0) {
+            if (name == '中国' && e.componentIndex == 0) {
+                MapReturn(e.name)
 
-            // console.log('🚀 ~ file: MyEchartMap.vue:156 ~ myCharts.value.on ~  MapReturn(e.name):', MapReturn(e.name))
+                // console.log('🚀 ~ file: MyEchartMap.vue:156 ~ myCharts.value.on ~  MapReturn(e.name):', MapReturn(e.name))
+            }
         }
     })
 }
@@ -215,6 +231,6 @@ watch(
     left: 10px;
     z-index: 2;
     font-size: 20px;
-    color: var(--el-color-primary) !important;;
+    color: var(--el-color-primary) !important;
 }
 </style>