Fri Jul 21 23:36:00 CST 2023 inscode

src/components/GameChart.vue

@@ -21,8 +21,8 @@
 
     <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 style="width: 100%;min-width:600px;font-weight: 600;text-align: center;">{{ state.clickCity }}</div>
+            <div id="barChartId" style="min-width:600px;height:600px;margin: 0 auto;">
 
             </div>
         </div>
@@ -45,7 +45,7 @@ import Author from './Author.vue'
 import gameJson from './gameJson.js';
 import { tableGameColumns } from './const.js'
 import * as echarts from 'echarts';
-import { defineProps, reactive, watch, nextTick, onUnmounted, onMounted } from 'vue';
+import { defineProps, reactive, onBeforeMount, onUnmounted, onMounted } from 'vue';
 const props = defineProps({
     tableData: []
 })
@@ -53,7 +53,7 @@ const props = defineProps({
 const state = reactive({
     title: 'vue3 ts antd 参赛选手所在城市',
     clickCity: '全国',
-    maxCityNum:0,
+    maxCityNum: 0,
     totlaNum: '',
     linesCoord: [],
     focusCity: '广东省',
@@ -130,10 +130,11 @@ function filterMapName(name) {
     })
     return res
 }
-
+onBeforeMount(() => {
+    echarts.registerMap('chinaJson', chinaJson)
+})
 
 function initMap() {
-    echarts.registerMap('chinaJson', chinaJson)
     let itemData = chinaJson.features
     let length = itemData.length
     state.aimPointData = []
@@ -153,12 +154,12 @@ function initMap() {
     for (let loc = 0; loc < length; ++loc) {
 
         let name = itemData[loc].properties.name
-        console.log('name',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&&name.includes(locName)) {
+            if (name && name.includes(locName)) {
                 number += 1
             }
         })
@@ -180,11 +181,12 @@ function initMap() {
             }
             state.airData.push(temp)
         }
-        if(state.maxCityNum<number){
-            state.maxCityNum=number
+        if (state.maxCityNum < number) {
+            state.maxCityNum = number
         }
         continue
     }
+    console.log('state.maxCityNum', state.maxCityNum)
 
     renderEchartBar()
 }
@@ -198,16 +200,7 @@ function changePageSize(current, pageSize) {
     state.pagination.current = current
     state.pagination.pageSize = pageSize
 }
-// watch(() => props.tableData,
-//     (val) => {
-//         state.dataSource = val
-//         nextTick(() => {
-//             renderEchartBar()
-//         })
-//     }, {
-//     deep: true,
-//     immediate: true
-// })
+
 function renderEchartBar() {
     // 基于准备好的dom，初始化echarts实例
     const domInstance = document.getElementById('barChartId')
@@ -223,6 +216,16 @@ function renderEchartBar() {
             text: '中国地图',
             subtext: 'chinaJson'
         },
+        visualMap: { // 设置视觉映射
+            min: 0,
+            max: 20,
+            text: ['最高', '最低'],
+            realtime: true,
+            calculable: true,
+            inRange: {
+                color: ['lightskyblue', 'yellow', 'orangered']
+            }
+        },
         geo: {
             // 经纬度中心
             // center: state.centerLoction,
@@ -271,16 +274,6 @@ function renderEchartBar() {
                 人员信息：<br>${strInfo}`
             }
         },
-        visualMap: { // 设置视觉映射
-            min: 0,
-            max: state.maxCityNum,
-            text: ['最高', '最低'],
-            realtime: true,
-            calculable: true,
-            inRange: {
-                color: ['lightskyblue', 'yellow', 'orangered']
-            }
-        },
         series: [
             // 坐标点的热力数据
             {
@@ -292,8 +285,8 @@ function renderEchartBar() {
                     normal: {
                         areaColor: "rgba(0, 0, 0, 0)",
                         borderWidth: 8, //设置外层边框
-                        borderColor: "#00FFD7",
-                        shadowColor: "rgba(63, 236, 209, 1)",
+                        borderColor: "rgba(135,235, 45, 1)",
+                        shadowColor: "rgba(135,235, 45, 1)",
                         shadowBlur: 40, //地图外层光晕
                     },
                 },
@@ -343,14 +336,6 @@ function renderEchartBar() {
                 data: state.linesCoord
             }
         ],
-        visualMap: {
-            min: 0,
-            max: 100,
-            inRange: {
-                color: ['rgba(255,255,255,.7)', 'rgba(63, 236, 209, 1)'] // 控制颜色渐变的范围
-            },
-            calculable: false // 出现滑块
-        }
     }
     // 使用刚指定的配置项和数据显示图表。
     myChart.setOption(option, true);