Auto Commit

src/components/GameChart.vue

@@ -17,7 +17,7 @@
     </div>
     <div>
         参赛报名人数：{{ state.totlaNum }}
-        </div>
+    </div>
 
     <div style="display:flex">
         <div id="barChartId" style="flex:1;width:600px;height:900px;border: 1px solid #333;">
@@ -53,7 +53,7 @@ const props = defineProps({
 const state = reactive({
     title: 'vue3 ts antd 参赛选手所在城市',
     clickCity: '全国',
-    totlaNum:'',
+    totlaNum: '',
     linesCoord: [],
     focusCity: '广东省',
     locationGis: [],
@@ -90,7 +90,7 @@ function initDataSource() {
         state.total += 1
     })
     state.pagination.current = 1
-    state.totlaNum=state.total
+    state.totlaNum = state.total
 }
 
 function filterName(name) {
@@ -114,7 +114,7 @@ function filterName(name) {
 }
 
 function filterMapName(name) {
-    const res=[]
+    const res = []
     Object.keys(gameJson).forEach(uid => {
         const locName = gameJson[uid].ip.split('：')[1]
         if (name.includes(locName)) {
@@ -150,12 +150,14 @@ function initMap() {
         }
     }
     for (let loc = 0; loc < length; ++loc) {
+
         let name = itemData[loc].properties.name
+        console.log('name',name)
         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) {
+            if (name&&name.includes(locName)) {
                 number += 1
             }
         })
@@ -163,20 +165,21 @@ function initMap() {
             value: center
         })
         // eslint-disable-next-line eqeqeq
-        if (!name.includes(state.focusCity)) {
+        if (name && !name.includes(state.focusCity)) {
             if (center && state.centerLoction) {
                 state.linesCoord.push([center, state.centerLoction])
             }
 
         }
         // eslint-disable-next-line eqeqeq
-        if (name && name !== state.focusCity) {
+        if (name) {
             let temp = {
-                name: `${name}`,
+                name: name,
                 value: Number(number)
             }
             state.airData.push(temp)
         }
+        console.log('state.airData',state.airData)
         continue
     }
 
@@ -226,6 +229,8 @@ function renderEchartBar() {
             map: 'chinaJson', // 这里的值要和上面registerMap的第一个参数一致
             roam: false, // 拖拽
             nameProperty: 'name',
+            geoIndex: 1,
+            aspectScale: 0.75, // 长宽比, 默认值 0.75
             // 悬浮标签
             label: {
                 type: 'map',
@@ -250,18 +255,19 @@ function renderEchartBar() {
             },
             zoom: 1.2
         },
-        tooltip:{
-            show:true,
-            formatter:(params)=>{
-                const {name}=params.data
-                const filterData=filterMapName(name)
-                const strInfo=filterData.map(item=>{
+        tooltip: {
+            show: true,
+            position: ['10%', '10%'],
+            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
+                }).join('<br>')
+                const value = filterData.length
                 return `地区：${name}<br>
                 总人数：${value} <br>
-                详细信息：<br>${strInfo}`
+                人员信息：<br>${strInfo}`
             }
         },
         series: [
@@ -269,7 +275,17 @@ function renderEchartBar() {
             {
                 data: state.airData,
                 geoIndex: 0, // 将热力的数据和第0个geo配置关联在一起
-                type: 'map'
+                type: 'map',
+                roam: false,
+                itemStyle: {
+                    normal: {
+                        areaColor: "rgba(0, 0, 0, 0)",
+                        borderWidth: 8, //设置外层边框
+                        borderColor: "#00FFD7",
+                        shadowColor: "rgba(63, 236, 209, 1)",
+                        shadowBlur: 40, //地图外层光晕
+                    },
+                },
             },
             {
                 type: 'effectScatter',
@@ -320,7 +336,7 @@ function renderEchartBar() {
             min: 0,
             max: 100,
             inRange: {
-                color: ['white', '#0984e3'] // 控制颜色渐变的范围
+                color: ['rgba(255,255,255,.7)', 'rgba(63, 236, 209, 1)'] // 控制颜色渐变的范围
             },
             calculable: false // 出现滑块
         }