Auto Commit

src/components/GameChart.vue

@@ -10,7 +10,12 @@
         </a-button>
         </div>
     <div style="display:flex">
-        <div id="barChartId" style="flex:1;width:600px;height:900px;margin: 0 auto;border: 1px solid #333;"></div>
+        <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>
+        </div>
         <div style="width: 700px;height:900px;border: 1px solid #333;">
             <a-table :scroll="{ x: 600, y: 750 }" :columns="state.columns" :data-source="state.dataSource"
                 :loading="state.loading" :pagination="state.pagination" bordered style="border-bottom:1px solid #f0f0f0;">
@@ -52,8 +57,9 @@ const props = defineProps({
 
 const state = reactive({
     title: 'python 爬虫赛道 参赛选手所在城市',
+    clickCity:'全国',
     linesCoord: [],
-    focusCity: '深圳',
+    focusCity: '广东省',
     locationGis: [],
     centerLoction: [],
     aimPointData: [],
@@ -75,6 +81,7 @@ const state = reactive({
     }
 })
 function initDataSource() {
+    state.clickCity='全国'
     state.dataSource = []
     state.total = 0
     Object.keys(gameJson).forEach(uid => {
@@ -89,7 +96,7 @@ function initDataSource() {
 }
 
 function filterName(name) {
-    console.log('name',name)
+    state.clickCity=name
     state.dataSource = []
     state.total = 0
     Object.keys(gameJson).forEach(uid => {
@@ -113,6 +120,7 @@ function initMap() {
     let itemData = chinaJson.features
     let length = itemData.length
     state.aimPointData = []
+    state.linesCoord= []
     for (let loc = 0; loc < length; ++loc) {
         let name = itemData[loc].properties.name
         state.aimPointData.push({
@@ -129,7 +137,8 @@ function initMap() {
         let number = 0
         let center = itemData[loc].properties.center
         Object.keys(gameJson).forEach(uid => {
-            if (name.includes(gameJson[uid].ip.split('：')[1])) {
+            const locName=gameJson[uid].ip.split('：')[1]
+            if (name.includes(locName)||locName.includes(name)) {
                 number += 1
             }
         })
@@ -138,10 +147,13 @@ function initMap() {
         })
         // eslint-disable-next-line eqeqeq
         if (!name.includes(state.focusCity)) {
+            if(center&&state.centerLoction){
                 state.linesCoord.push([center, state.centerLoction])
             }
+            
+        }
         // eslint-disable-next-line eqeqeq
-        if (name && name !== '') {
+        if (name && name !== state.focusCity) {
             let temp = {
                 name: `${name}`,
                 value: Number(number)
@@ -209,15 +221,15 @@ function renderEchartBar() {
                     return params.name
                 },
                 // 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
+                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
         },
@@ -231,7 +243,7 @@ function renderEchartBar() {
             {
                 type: 'effectScatter',
                 // 渲染显示
-                zlevel: 2,
+                zlevel: 3,
                 showEffectOn: 'render',
                 data: state.locationGis, // 配置散点的坐标数据
                 coordinateSystem: 'geo', // 指明散点使用的坐标系统
@@ -248,32 +260,30 @@ function renderEchartBar() {
                 // 形状
                 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
-            // }
+            // 飞线层
+            {
+                // 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: 1
+                },
+                // 飞线层数据
+                data: state.linesCoord
+            }
         ],
         visualMap: {
             min: 0,

src/components/const.js

@@ -42,32 +42,22 @@ export const tableColumns= [
     {
       title: '用户id',
       dataIndex: 'uid',
-      sorter: true,
+      sorter: (a, b) => a.uid[0].charCodeAt() - b.uid[0].charCodeAt(),
       fixed: true
     }, {
       title: '用户昵称',
       sorter: true,
-      dataIndex: 'name'
+      dataIndex: 'name',
+      sorter: (a, b) => a.name[0].charCodeAt() - b.name[0].charCodeAt(),
     }, {
       title: '城市',
       sorter: true,
       dataIndex: 'ip',
+      sorter: (a, b) => a.ip[0].charCodeAt() - b.ip[0].charCodeAt(),
       filters: [
         {
-          text: '深圳市',
-          value: '深圳市',
-        },
-        {
-          text: '上海市',
-          value: '上海市',
-        },
-        {
-          text: '北京市',
-          value: '北京市',
-        },
-        {
-          text: '贵阳市',
-          value: '贵阳市',
+          text: '广东省',
+          value: '广东省',
         }
       ]
     }