Auto Commit

src/App.vue

@@ -3,7 +3,7 @@ import GameChart from './components/GameChart.vue'
 import SearchGrade from './components/SearchGrade.vue'
 import { reactive, onMounted } from 'vue';
 const state = reactive({
-  current: 'grade查询分数'
+  current: '新星赛道选手信息可视化'
 })
 onMounted(() => {
   const href = window.location.href
@@ -17,10 +17,11 @@ onMounted(() => {
       const value = itemArray[1]
       data[key] = value
     })
+    if (data['type'] = 'csdn_game') {
+      state.current = '新星赛道选手信息可视化'
+    }
   }
-  if(data['type']='csdn_game'){
-    state.current='新星赛道选手信息可视化'
-  }
+
 })
 </script>
 

src/components/GameChart.vue

@@ -4,15 +4,25 @@
             <a style="font-size: 24px;font-weight:bolder;">{{ state.title }}</a>
         </div>
     </div>
-    <div style="width: 100%;text-align: right;line-height: 80px;">
-        <a-button @click="initDataSource" type="primary">
-            重置表格
-        </a-button>
+    <Author />
+    <div style="display: flex;height: 100px;margin:10px 0">
+        <div style="width: 600px;">
+            赛道信息：<a href="https://bbs.csdn.net/topics/616574177" target="_blank">https://bbs.csdn.net/topics/616574177</a>
         </div>
+        <div style="width: 100%;text-align: right;">
+            <a-button @click="initDataSource" type="primary">
+                重置表格
+            </a-button>
+        </div>
+    </div>
+    <div>
+        参赛报名人数：{{ state.totlaNum }}
+        </div>
+
     <div style="display:flex">
         <div id="barChartId" style="flex:1;width:600px;height:900px;border: 1px solid #333;">
             <div style="width: 100%;font-weight: 600;text-align: center;">{{ state.clickCity }}</div>
-            <div  id="barChartId" style="width:600px;height:600px;margin: 0 auto;">
+            <div id="barChartId" style="width:600px;height:600px;margin: 0 auto;">
 
             </div>
         </div>
@@ -21,7 +31,7 @@
                 :loading="state.loading" :pagination="state.pagination" bordered style="border-bottom:1px solid #f0f0f0;">
                 <template #bodyCell="{ column, record }">
                     <template v-if="column.key === 'imgSrc'">
-                        <a-image :src="record.imgSrc" height="50" :alt="record.imgSrc"/>
+                        <a-image :src="record.imgSrc" height="50" :alt="record.imgSrc" />
                     </template>
                 </template>
             </a-table>
@@ -31,6 +41,7 @@
 </template>
 <script setup>
 import chinaJson from './chinaGeo.js';
+import Author from './Author.vue'
 import gameJson from './gameJson.js';
 import { tableGameColumns } from './const.js'
 import * as echarts from 'echarts';
@@ -41,7 +52,8 @@ const props = defineProps({
 
 const state = reactive({
     title: 'vue3 ts antd 参赛选手所在城市',
-    clickCity:'全国',
+    clickCity: '全国',
+    totlaNum:'',
     linesCoord: [],
     focusCity: '广东省',
     locationGis: [],
@@ -65,7 +77,7 @@ const state = reactive({
     }
 })
 function initDataSource() {
-    state.clickCity='全国'
+    state.clickCity = '全国'
     state.dataSource = []
     state.total = 0
     Object.keys(gameJson).forEach(uid => {
@@ -77,27 +89,45 @@ function initDataSource() {
         })
         state.total += 1
     })
-    state.pagination.current=1
+    state.pagination.current = 1
+    state.totlaNum=state.total
 }
 
 function filterName(name) {
-    state.clickCity=name
+    state.clickCity = name
     state.dataSource = []
     state.total = 0
     Object.keys(gameJson).forEach(uid => {
-        const locName=gameJson[uid].ip.split('：')[1]
-        if(name.includes(locName)){
-            
+        const locName = gameJson[uid].ip.split('：')[1]
+        if (name.includes(locName)) {
+
             state.dataSource.push({
-            uid: gameJson[uid].uid,
-            imgSrc: gameJson[uid].imgSrc,
-            name: gameJson[uid].name,
-            ip: locName
-        })
-        state.total += 1
+                uid: gameJson[uid].uid,
+                imgSrc: gameJson[uid].imgSrc,
+                name: gameJson[uid].name,
+                ip: locName
+            })
+            state.total += 1
+        }
+    })
+    state.pagination.current = 1
+}
+
+function filterMapName(name) {
+    const res=[]
+    Object.keys(gameJson).forEach(uid => {
+        const locName = gameJson[uid].ip.split('：')[1]
+        if (name.includes(locName)) {
+
+            res.push({
+                uid: gameJson[uid].uid,
+                imgSrc: gameJson[uid].imgSrc,
+                name: gameJson[uid].name,
+                ip: locName
+            })
         }
     })
-    state.pagination.current=1
+    return res
 }
 
 
@@ -106,8 +136,8 @@ function initMap() {
     let itemData = chinaJson.features
     let length = itemData.length
     state.aimPointData = []
-    state.airData=[]
-    state.linesCoord= []
+    state.airData = []
+    state.linesCoord = []
     for (let loc = 0; loc < length; ++loc) {
         let name = itemData[loc].properties.name
         state.aimPointData.push({
@@ -124,8 +154,8 @@ function initMap() {
         let number = 0
         let center = itemData[loc].properties.center
         Object.keys(gameJson).forEach(uid => {
-            const locName=gameJson[uid].ip.split('：')[1]
-            if (name.includes(locName)||locName.includes) {
+            const locName = gameJson[uid].ip.split('：')[1]
+            if (name.includes(locName) || locName.includes) {
                 number += 1
             }
         })
@@ -134,10 +164,10 @@ function initMap() {
         })
         // eslint-disable-next-line eqeqeq
         if (!name.includes(state.focusCity)) {
-            if(center&&state.centerLoction){
+            if (center && state.centerLoction) {
                 state.linesCoord.push([center, state.centerLoction])
             }
-            
+
         }
         // eslint-disable-next-line eqeqeq
         if (name && name !== state.focusCity) {
@@ -150,9 +180,9 @@ function initMap() {
         continue
     }
 
-    setTimeout(()=>{
+    setTimeout(() => {
         renderEchartBar()
-    },500)
+    }, 500)
 }
 
 // storage
@@ -204,7 +234,7 @@ function renderEchartBar() {
                 // nameProperty: 'name',
                 show: true,
                 color: '#333',
-                formatter:function(params){
+                formatter: function (params) {
                     return params.name
                 },
                 // backgroundColor: '#546de5',
@@ -220,6 +250,20 @@ function renderEchartBar() {
             },
             zoom: 1.2
         },
+        tooltip:{
+            show:true,
+            formatter:(params)=>{
+                const {name}=params.data
+                const filterData=filterMapName(name)
+                const strInfo=filterData.map(item=>{
+                    return `<img src=${item.imgSrc} width='20' height='20'/>&nbsp; ${item.name}`
+                }).join('&nbsp;')
+                const value=filterData.length
+                return `地区：${name}<br>
+                总人数：${value} <br>
+                详细信息：<br>${strInfo}`
+            }
+        },
         series: [
             // 坐标点的热力数据
             {
@@ -286,7 +330,7 @@ function renderEchartBar() {
     // 监听
     state.echartInstance = myChart;
     myChart.on('click', function (params) {
-        console.log('params',params)
+        console.log('params', params)
         filterName(params.name)
     });
     window.onresize = myChart.resize;