Auto Commit

src/App.vue

 <script setup>
+import GameChart from './components/GameChart.vue'
 import SearchGrade from './components/SearchGrade.vue'
+import { reactive, onMounted } from 'vue';
+const state = reactive({
+  current: 'grade查询分数'
+})
+onMounted(() => {
+
+  const href = window.location.href
+  const data = {}
+  const urlArray = href.split('?')
+  const urlLength = urlArray.length
+  if (urlLength > 1) {
+    urlArray[urlLength - 1].split('&').forEach(item => {
+      const itemArray = item.split('=')
+      const key = itemArray[0]
+      const value = itemArray[1]
+      data[key] = value
+    })
+  }
+  if(data['type']='csdn_game'){
+    state.current='新星赛道选手信息可视化'
+  }
+})
 </script>
 
 <template>
   <div class="container-main">
-    <SearchGrade />
+    <div style="text-align: center;padding: 20px;">
+      <a-radio-group v-model:value="state.current" name="radioGroup">
+        <a-radio value="grade查询分数">grade查询分数</a-radio>
+        <a-radio value="新星赛道选手信息可视化">新星赛道选手信息可视化</a-radio>
+      </a-radio-group>
+    </div>
+    <SearchGrade v-if="state.current === 'grade查询分数'" />
+    <GameChart v-else />
   </div>
 </template>
 
 <style scoped>
-.container-main{
+.container-main {
   position: absolute;
   width: 100vw;
   height: 100vh;
-  padding:10px;
-  margin:0;
+  padding: 10px;
+  margin: 0;
 }
 </style>

src/components/GameChart.vue

+<template>
+    <div>
+        <div style="text-align: center;">
+            <a style="font-size: 24px;font-weight:bolder;">{{ state.title }}</a>
+        </div>
+    </div>
+    <div>
+        <a-table :scroll="{ x: 800, y: 600 }" :columns="state.columns" :data-source="state.dataSource"
+            :loading="state.loading" :pagination="state.pagination" bordered style="border-bottom:1px solid #f0f0f0;">
+            <template #bodyCell="{ column, record }">
+                <template v-if="column.key === 'url'">
+                    <a :href="record.url" target="_blank">
+                        {{ record.url }}
+                    </a>
+                </template>
+                <template v-else-if="column.key === 'score'">
+                    <span>
+                        <a-tag :color="record.score < 60 ? 'volcano' : record.score > 80 ? 'geekblue' : 'green'">
+                            {{ record.score }}
+                        </a-tag>
+                    </span>
+                </template>
+                <template v-else-if="column.key === 'option'">
+                    <a-tooltip placement="topLeft" :title="record.editUrl">
+                        <a :href="record.editUrl" target="_blank">
+                            编辑文章
+                        </a>
+                    </a-tooltip>
+                </template>
+            </template>
+        </a-table>
+    </div>
+    <div id="barChartId" style="width:100vw;height:900px;margin: 0 auto"></div>
+</template>
+<script setup>
+import chinaJson from './chinaGeo.js';
+import gameJson from './gameJson.js';
+import { tableGameColumns } from './const.js'
+import * as echarts from 'echarts';
+import { defineProps, reactive, watch, nextTick, onUnmounted, onMounted } from 'vue';
+const props = defineProps({
+    tableData: []
+})
+
+const state = reactive({
+    title: '参赛选手所在城市',
+    linesCoord: [],
+    focusCity: '深圳',
+    locationGis: [],
+    centerLoction: [],
+    aimPointData: [],
+    airData: [],
+    exportLoading: false,
+    columns: tableGameColumns,
+    dataSource: [],
+    echartInstance: undefined,
+    pagination: {
+        total: 0,
+        current: 1,
+        pageSize: 10,
+        pageSizeOptions: ['10', '50', '100'],
+        showTotal: (total, range) => {
+            return range[0] + '-' + range[1] + ' 共' + total + '个选手';
+        },
+        onShowSizeChange: changePageSize, // 改变每页数量时更新显示
+        onChange: changePage,//点击页码事件
+    }
+})
+function initDataSource() {
+    state.dataSource = []
+    state.total = 0
+    Object.keys(gameJson).forEach(uid => {
+        state.dataSource.push({
+            uid: gameJson[uid].uid,
+            name: gameJson[uid].name,
+            ip: gameJson[uid].ip.split('：')[1]
+        })
+        state.total += 1
+    })
+    // map
+
+}
+
+function initMap() {
+    echarts.registerMap('chinaJson', chinaJson)
+    let itemData = chinaJson.features
+    let length = itemData.length
+    state.aimPointData = []
+    for (let loc = 0; loc < length; ++loc) {
+        let name = itemData[loc].properties.name
+        state.aimPointData.push({
+            value: name
+        })
+        let center = itemData[loc].properties.center
+        // 中心位置
+        if (name.includes(state.focusCity)) {
+            state.centerLoction = center
+        }
+    }
+    for (let loc = 0; loc < length; ++loc) {
+        let name = itemData[loc].properties.name
+        let number = 0
+        let center = itemData[loc].properties.center
+        Object.keys(gameJson).forEach(uid => {
+            if (name.includes(gameJson[uid].ip.split('：')[1])) {
+                number += 1
+            }
+        })
+        state.locationGis.push({
+            value: center
+        })
+        // eslint-disable-next-line eqeqeq
+        if (!name.includes(state.focusCity)) {
+            state.linesCoord.push([center, state.centerLoction])
+        }
+        // eslint-disable-next-line eqeqeq
+        if (name && name !== '') {
+            let temp = {
+                name: `${name}`,
+                value: Number(number)
+            }
+            state.airData.push(temp)
+        }
+        continue
+    }
+}
+
+// storage
+function changePage(page, pageSize) {
+    state.pagination.current = page
+    state.pagination.pageSize = pageSize
+}
+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')
+    if (domInstance) {
+        domInstance.removeAttribute('_echarts_instance_')
+    }
+    else {
+        return
+    }
+    const myChart = echarts.init(domInstance);
+    const option = {
+        title: {
+            text: '中国地图',
+            subtext: 'chinaJson'
+        },
+        geo: {
+            // 经纬度中心
+            center: state.centerLoction,
+            type: 'map',
+            map: 'chinaJson', // 这里的值要和上面registerMap的第一个参数一致
+            roam: true, // 拖拽
+            nameProperty: 'name',
+            // 悬浮标签
+            label: {
+                type: 'map',
+                map: 'chinaJson', // 这里的值要和上面registerMap的第一个参数一致
+                // roam: false, // 拖拽
+                nameProperty: 'name',
+                show: true,
+                color: '#fff',
+                backgroundColor: '#546de5',
+                align: 'center',
+                fontSize: 10,
+                width: (function () {
+                    // let n = parseInt(Math.random() * 10)
+                    return 110
+                })(),
+                height: 50,
+                shadowColor: 'rgba(0,0,0,.7)',
+                borderRadius: 10
+            },
+            zoom: 1.2
+        },
+        series: [
+            // 坐标点的热力数据
+            {
+                data: state.airData,
+                geoIndex: 0, // 将热力的数据和第0个geo配置关联在一起
+                type: 'map'
+            },
+            {
+                type: 'effectScatter',
+                // 渲染显示
+                zlevel: 2,
+                showEffectOn: 'render',
+                data: state.locationGis, // 配置散点的坐标数据
+                coordinateSystem: 'geo', // 指明散点使用的坐标系统
+                rippleEffect: {
+                    // 缩放
+                    scale: 4,
+                    // 涟漪的颜色
+                    color: '#cf6a87',
+                    // 波纹数量
+                    number: 2,
+                    // 扩散方式 stroke(线条) fill（区域覆盖）
+                    brushType: 'fill'
+                },
+                // 形状
+                symbol: 'circle'
+            },
+            // // 飞线层
+            // {
+            //     // name: '贵阳市飞线',
+            //     type: 'lines',
+            //     coordinateSystem: 'geo',
+            //     polyline: true,
+            //     zlevel: 3,
+            //     effect: {
+            //         show: true,
+            //         period: 5,
+            //         trailLength: 0, // 拖尾
+            //         symbol: 'arrow', // 箭头
+            //         color: 'red', // 样式颜色
+            //         symbolSize: 5
+            //     },
+            //     lineStyle: {
+            //         color: '#000',
+            //         width: 2,
+            //         type: 'solid',
+            //         dashOffset: 0
+            //         // cap: butt,
+            //         // join: bevel
+            //     },
+            //     // 飞线层数据
+            //     data: state.linesCoord
+            // }
+        ],
+        visualMap: {
+            min: 0,
+            max: 100,
+            inRange: {
+                color: ['white', '#0984e3'] // 控制颜色渐变的范围
+            },
+            calculable: false // 出现滑块
+        }
+    }
+    // 使用刚指定的配置项和数据显示图表。
+    myChart.setOption(option, true);
+    // 监听
+    state.echartInstance = myChart;
+    myChart.on('click', function (params) {
+        const findItem = state.dataSource.find(item => {
+            return item.postTime == params.name
+        })
+        if (params.name) {
+            window.open(findItem.url, '_blank')
+        }
+    });
+    window.onresize = myChart.resize;
+}
+
+onUnmounted(() => {
+    window.onresize = null
+})
+onMounted(() => {
+    initDataSource()
+    initMap()
+})
+</script>
\ No newline at end of file

src/components/const.js

@@ -36,4 +36,39 @@ export const tableColumns= [
   }, {
     title: '操作',
     key: 'option'
-  }]
\ No newline at end of file
+  }]
+
+  export const tableGameColumns= [
+    {
+      title: '用户id',
+      dataIndex: 'uid',
+      sorter: true,
+      fixed: true
+    }, {
+      title: '用户昵称',
+      sorter: true,
+      dataIndex: 'name'
+    }, {
+      title: '城市',
+      sorter: true,
+      dataIndex: 'ip',
+      filters: [
+        {
+          text: '深圳市',
+          value: '深圳市',
+        },
+        {
+          text: '上海市',
+          value: '上海市',
+        },
+        {
+          text: '北京市',
+          value: '北京市',
+        },
+        {
+          text: '贵阳市',
+          value: '贵阳市',
+        }
+      ]
+    }
+  ]
\ No newline at end of file