src/components/custom-echart-maps/index.vue

@@ -47,6 +47,8 @@ export default {
     const option = reactive({});
 
     watchEffect(() => {
+      regMap(props.name, props.geo);
+      console.info('watchEffect');
       props.chartData && initCharts();
     });
 
@@ -64,9 +66,8 @@ export default {
       if (props.option) {
         Object.assign(option, cloneDeep(props.option));
       }
-
       setOptions(option);
-      regMap(props.name, props.geo);
+
       onMapClick((data) => {
         emit('click', data);
       });

src/views/trace/components/centerMap.vue

@@ -1,26 +1,15 @@
 <template>
-  <div class="map-center-warp">
+  <section ref="chartRef" class="_container"></section>
-    <div class="map-pos">
-      <custom-echart-maps height="100%" width="100%" :option="chartsData.option" :geo="geoData" :name="mapName" @click="mapClick" />
-    </div>
-  </div>
 </template>
-<script setup>
-import { isEmpty, getAssetsFile } from '@/utils';
-import { ref, reactive, onMounted, computed } from 'vue';
-import { useRoute } from 'vue-router';
-import geoJsonData from './china.json'; // 根据实际情况调整路径;
-const route = useRoute();
-const props = defineProps({
-  dialogTitle: {
-    type: String,
-    default: '首页',
-  },
-});
-const isShow = ref(false);
-let geoData = geoJsonData;
-let mapName = ref('china');
 
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useEcharts } from '@/hooks/useEcharts';
+
+onMounted(() => loadMapChart());
+
+const chartRef = ref(null);
+const { setOptions, getInstance, startAutoPlay } = useEcharts(chartRef);
 const chinaGeoCoordMap = ref({
   云南: [102.9199, 25.4663],
   广东: [113.12244, 23.009505],
@@ -35,7 +24,7 @@ const chinaDatas = ref([
   [{ name: '四川', value: 1256 }],
   [{ name: '河北', value: 382 }],
 ]);
-const convertData = (data) => {
+function convertData(data) {
   var res = [];
   for (var i = 0; i < data.length; i++) {
     var dataItem = data[i];
@@ -54,8 +43,8 @@ const convertData = (data) => {
     }
   }
   return res;
-};
+}
-const getSeries = () => {
+function getSeries() {
   let list = [];
   [['云南', chinaDatas.value]].forEach(function (item, i) {
     list.push(
@@ -158,10 +147,9 @@ const getSeries = () => {
     );
   });
   return list;
-};
+}
-
+async function loadMapChart() {
-const chartsData = reactive({
+  var option = {
-  option: {
     title: {
       text: '地图统计图表',
       subtext: '',
@@ -189,6 +177,7 @@ const chartsData = reactive({
       transitionDuration: 0,
       extraCssText: 'z-index:100',
       formatter: function (params, ticket, callback) {
+        console.log('params', params);
         let val = 0;
         if (typeof params.value == 'number') {
           val = params.value;
@@ -198,6 +187,7 @@ const chartsData = reactive({
         //根据业务自己拓展要显示的内容
         var res = '';
         var name = params.name;
+
         res = "<span style='color:#fff;'>" + name + '</span><br/>数据：' + val;
         return res;
       },
@@ -215,7 +205,7 @@ const chartsData = reactive({
       },
     },
     geo: {
-      map: mapName.value,
+      map: 'china',
       zoom: 1.2,
       top: 250,
       label: {
@@ -236,92 +226,40 @@ const chartsData = reactive({
       },
     },
     series: getSeries(),
-  },
+  };
-});
+  // const { rows } = await selectRecord(this.baseId);
-
+  // //数据
-let currentMap = reactive({});
+  // // option.series[0].data = rows.map((item) => ({
-
+  // //   name: item.queryCity,
-const mapClick = (data) => {
+  // //   value: [item.queryCoordinate.split(',')[0], item.queryCoordinate.split(',')[1], item.queryCount],
-  //   if (props.markerData.length && props.markerData.length > 0) {
+  // // }));
-  //     if (data.seriesType == 'effectScatter') {
+  // //查询次数
-  //       isShow.value = true;
+  // let i = 956;
-  //       currentMap = data;
+  // rows.forEach((item) => {
-  //       emit('mapclick', currentMap);
+  //   i += item.queryCount;
-  //     }
+  // });
+  // option.title.subtext = `我们的产品走过了${rows.length}个城市，被客户查询了${i}次`;
+  option.title.subtext = `我们的产品走过了18个城市，被客户查询了73812次`;
+  // this.$echarts.registerMap('china', { geoJSON: chinaMap });
+  // myChart.on('click', (params) => {
+  //   if (params.name.includes('广东')) {
+  //     this.$emit('dataType', '2');
+  //   } else if (params.name.includes('香港')) {
+  //     this.$emit('dataType', '1');
   //   } else {
-  //     isShow.value = true;
+  //     this.$emit('dataType', '0');
-  //     currentMap = data;
-  //     emit('mapclick', currentMap);
   //   }
-};
+  // });
-const handleClose = () => {
+  console.log('option', option);
-  isShow.value = false;
+  setOptions(option);
-};
+}
-
-const emit = defineEmits(['mapclick']);
 </script>
-<style lang="scss" scoped>
-div {
-  box-sizing: border-box;
-}
 
-::v-deep() {
+<style lang="scss" scoped>
-  .el-dialog {
+._container {
-    background: url(iconUrl) no-repeat left top;
+  padding: 40px;
-    background-repeat: no-repeat;
-    background-size: cover;
-    border-radius: 8px !important;
-    min-height: 200px;
-    max-height: 500px;
-    overflow-y: auto;
-    background-size: 100% 100%;
-    padding: 16px;
-    margin-top: 15%;
-  }
-  .el-dialog__header {
-    margin-top: 10px;
-    text-align: left;
-    padding-left: 48px;
-    .el-dialog__title,
-    i {
-      color: #fff !important;
-    }
-    .el-dialog__headerbtn {
-      top: 8px !important;
-    }
-  }
-  .map-dialog-my-header {
-    margin-top: 4px;
-    display: inline-flex;
-    justify-content: space-between;
-    h4 {
-      font-weight: normal !important;
-    }
-  }
-}
-.map-center-warp {
   width: 100%;
-  text-align: center;
+  height: 100%;
-  position: relative;
+  border: 1px solid red;
-  height: 90%;
-  .map-img {
-    width: 80%;
-    height: 80%;
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    object-fit: contain;
-    transform: translateX(-50%);
-    max-width: 1000px;
-    max-height: 1000px;
-  }
-  .map-pos {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    transform: translateX(-50%);
-  }
 }
 </style>

src/views/trace/index.vue

@@ -25,7 +25,7 @@
         </div>
       </el-col>
       <el-col :span="12">
-        <traceMap></traceMap>
+        <centerMap />
       </el-col>
       <el-col :span="6" class="right-charts">
         <div class="right-charts-item">
@@ -55,7 +55,7 @@
 </template>
 <script setup>
 import { ref } from 'vue';
-import traceMap from './components/traceMap.vue';
+import centerMap from './components/centerMap.vue';
 import codeNumCharts from './components/codeNumCharts.vue';
 import mainPartCharts from './components/mainPartCharts.vue';
 import principalTypeCharts from './components/principalTypeCharts.vue';