feat(可视化): 地图可视化页面的开发

完成地图可视化静态页面的开发，为开发右侧top排名

admin.ui.plus-master/.env.development

@@ -3,5 +3,5 @@ ENV = 'development'
 
 # 本地环境接口地址
 VITE_API_URL = 'http://ipos.biz:8070'
-#VITE_API_URL = 'http://192.168.100.100:8000'
+#VITE_API_URL = 'http://loaclhost:8000'
 

admin.ui.plus-master/package-lock.json

@@ -22,6 +22,7 @@
         "js-cookie": "^3.0.5",
         "js-table2excel": "^1.1.2",
         "jsplumb": "^2.15.6",
+        "lodash": "^4.17.21",
         "mitt": "^3.0.0",
         "nprogress": "^0.2.0",
         "pinia": "^2.1.4",

admin.ui.plus-master/package.json

@@ -11,7 +11,6 @@
     "format": "px prettier --write .",
     "install:pkg": "npm install --registry https://registry.npmmirror.com",
     "gen:api": "node ./gen/gen-api"
-
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.1.0",
@@ -27,6 +26,7 @@
     "js-cookie": "^3.0.5",
     "js-table2excel": "^1.1.2",
     "jsplumb": "^2.15.6",
+    "lodash": "^4.17.21",
     "mitt": "^3.0.0",
     "nprogress": "^0.2.0",
     "pinia": "^2.1.4",
@@ -59,9 +59,9 @@
     "swagger-typescript-api": "12.0.4",
     "typescript": "^5.1.3",
     "vite": "^4.3.9",
+    "vite-plugin-compression": "0.5.1",
     "vite-plugin-vue-setup-extend-plus": "^0.1.0",
-    "vue-eslint-parser": "^9.3.1",
-    "vite-plugin-compression": "0.5.1"
+    "vue-eslint-parser": "^9.3.1"
   },
   "browserslist": [
     "> 1%",

admin.ui.plus-master/src/views/admin/visualization/cityLevelMap/index.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="layout-padding">
+    <div class="layout-padding-auto layout-padding-view to-flex">
+      <div ref="echartsMapRef" style="height: 100%;width: 80%;"></div>
+      <div style="width: 20%;background-color: #3eaadc">1</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+import * as echarts from "echarts";
+import {onMounted, reactive, ref} from "vue";
+import router from "/@/router";
+
+const params = reactive({
+  code:'',
+  city:''
+})
+
+// 定义变量内容
+const echartsMapRef = ref<RefType>('')
+
+const getJson = async (path) => {
+  try {
+    const module = await import('./mockData/'+path);
+    // 注意：JSON 文件应导出为 default 属性
+    return module.default
+  } catch (error) {
+    return null
+  }
+}
+
+
+const initEchartsMap = async () => {
+  const myChart = echarts.init(echartsMapRef.value)
+  const myJson = await getJson(params.code)
+  if(!myJson) return;
+  echarts.registerMap('echartsMapList', myJson )
+  const option = {
+    backgroundColor: 'transparent',
+    title: {
+      text: params.city+'销售数量',
+      left: 'center',
+      textStyle: {
+        color: '#000'
+      }
+    },
+    // layoutCenter: ['50%', '80%'],//位置
+    // layoutSize:'130%',//大小
+    tooltip: {
+      trigger: 'item',
+      formatter: (params) => params.name
+    },
+    visualMap: {
+      min: 0,
+      max: 50,
+      text: ['High', 'Low'],
+      realtime: false,
+      calculable: true,
+      inRange: {
+        color: ['lightskyblue', 'yellow', 'orangered']
+      }
+    },
+    series: [
+      {
+        name: params.city+'销售数量',
+        type: 'map',
+        map: 'echartsMapList',
+        label: {
+          show: true,
+          fontSize: 12,
+          formatter: (params) => {
+            if (params.value) {
+              return params.name + ':' + params.value
+            }
+            return params.name + ':0'
+          },
+        },
+        // top: '30%',
+        roam: true,
+        // zoom: 1.6,
+        scaleLimit: {
+          //滚轮缩放的极限控制
+          min: 1, //缩放最小大小
+        },
+        data: [],
+      }
+    ]
+  }
+  myChart.setOption(option)
+  window.addEventListener('resize', () => {
+    myChart.resize()
+  })
+}
+
+onMounted(() => {
+  params.code = <string>router.currentRoute.value.params.code
+  params.city =  <string>router.currentRoute.value.params.city
+  initEchartsMap()
+})
+
+</script>
+
+<style scoped lang="scss">
+.to-flex {
+  display: flex;
+  flex-direction: row;
+  z-index: 999;
+}
+</style>

admin.ui.plus-master/src/views/admin/visualization/digitalMap/index.vue

@@ -9,36 +9,35 @@
 
 <script setup lang="ts">
 
-import echartsMapList from "./mock.json"
-import beijing from "./beijing.json"
-import {onMounted, reactive, ref} from "vue";
+import echartsMapList from "./mockData/mock.json"
+import {onMounted, ref} from "vue";
 import * as echarts from "echarts";
+import {allCity} from "/@/views/admin/visualization/digitalMap/mockData/allCity";
+import router from "/@/router";
 
 // 定义变量内容
 const echartsMapRef = ref<RefType>('')
 
 
-const mapdata = [{
-  'name': '广东省',
-  'id': 1,
-  'value': 10
-},{
+const mapData = allCity
 
-}]
-// 注册石家庄地图
+// 注册中国地图
 echarts.registerMap('echartsMapList', echartsMapList)
-echarts.registerMap('beijing', beijing)
 // 初始化
 // option配置
 
-console.log(echartsMapList)
+
+
+
+
+
 
 const initEchartsMap = () => {
   const myChart = echarts.init(echartsMapRef.value)
   const option = {
     backgroundColor: 'transparent',
     title: {
-      text: '示范基地数字地图',
+      text: '国内销售数量',
       left: 'center',
       textStyle: {
         color: '#000'
@@ -48,11 +47,11 @@ const initEchartsMap = () => {
     // layoutSize:'130%',//大小
     tooltip: {
       trigger: 'item',
-      formatter: '{b}<br/>{c}台'
+      formatter: (params) => params.name
     },
     visualMap: {
-      min: 800,
-      max: 50000,
+      min: 0,
+      max: 50,
       text: ['High', 'Low'],
       realtime: false,
       calculable: true,
@@ -62,12 +61,12 @@ const initEchartsMap = () => {
     },
     series: [
       {
-        name: '香港18区人口密度',
+        name: '国内销售数量',
         type: 'map',
         map: 'echartsMapList',
         label: {
           show: true,
-          fontSize:14,
+          fontSize:12,
           formatter:(params) => {
             if(params.value){
               return params.name+':'+params.value
@@ -82,27 +81,29 @@ const initEchartsMap = () => {
           //滚轮缩放的极限控制
           min: 1, //缩放最小大小
         },
-        data:mapdata
+        data:mapData,
       }
     ]
   }
-  let myZoom = 0;
   myChart.setOption(option)
   myChart.on('georoam',(params) => {
     if('dy' in params|| 'dx' in params) return
-    myZoom = myChart.getOption().series[0].zoom
+    const myOption = myChart.getOption()
+    const myZoom = myOption.series[0].zoom
     if(myZoom > 1.5){
-      option.series[0].label.fontSize = 20
-    }else if(myZoom > 1){
-      option.series[0].label.fontSize = 14
+      myOption.series[0].label.fontSize = 20
+    }else if(myZoom > 1.1){
+      myOption.series[0].label.fontSize = 12
     }else {
-      option.series[0].label.fontSize = 10
+      myOption.series[0].label.fontSize = 10
     }
-    delete option.series[0].top
-    delete option.series[0].zoom
-    myChart.setOption(option)
-    // console.log(params)
+    delete myOption.series[0].top
+    delete myOption.series[0].zoom
+    myChart.setOption(myOption)
   })
+  myChart.on('click', (e) => {
+    router.push({path:`/admin/visualization/cityLevelMap/${e.data.code}/${e.data.name}`})
+  });
   window.addEventListener('resize', () => {
     myChart.resize()
   })
@@ -112,11 +113,14 @@ onMounted(() => {
   initEchartsMap()
 })
 
+
+
 </script>
 
 <style scoped lang="scss">
 .to-flex {
   display: flex;
   flex-direction: row;
+  z-index: 999;
 }
 </style>

admin.ui.plus-master/src/views/admin/visualization/digitalMap/mockData/allCity.ts

@@ -0,0 +1,172 @@
+export const allCity = [
+  {
+    name: '北京市',
+    value: 1,
+    code: 'beijing'
+  },
+  {
+    name: '天津市',
+    value: 2,
+    code: 'tianjin'
+  },
+  {
+    name: '河北省',
+    value: 3,
+    code: 'hebei'
+  },
+  {
+    name: '山西省',
+    value: 4,
+    code: 'shanxi'
+  },
+  {
+    name: '内蒙古自治区',
+    value: 5,
+    code: 'neimenggu'
+  },
+  {
+    name: '辽宁省',
+    value: 6,
+    code: 'liaoning'
+  },
+  {
+    name: '吉林省',
+    value: 7,
+    code: 'jilin'
+  },
+  {
+    name: '黑龙江省',
+    value: 8,
+    code: 'heilongjiang'
+  },
+  {
+    name: '上海市',
+    value: 9,
+    code: 'shanghai'
+  },
+  {
+    name: '江苏省',
+    value: 10,
+    code: 'jiangsu'
+  },
+  {
+    name: '浙江省',
+    value: 11,
+    code: 'zhejiang'
+  },
+  {
+    name: '安徽省',
+    value: 12,
+    code: 'anhui'
+  },
+  {
+    name: '福建省',
+    value: 13,
+    code: 'fujian'
+  },
+  {
+    name: '江西省',
+    value: 14,
+    code: 'jiangxi'
+  },
+  {
+    name: '山东省',
+    value: 15,
+    code: 'shandong'
+  },
+  {
+    name: '河南省',
+    value: 16,
+    code: 'henan'
+  },
+  {
+    name: '湖北省',
+    value: 17,
+    code: 'hubei'
+  },
+  {
+    name: '湖南省',
+    value: 18,
+    code: 'hunan'
+  },
+  {
+    name: '广东省',
+    value: 19,
+    code: 'guangdong'
+  },
+  {
+    name: '广西壮族自治区',
+    value: 20,
+    code: 'guangxi'
+  },
+  {
+    name: '海南省',
+    value: 21,
+    code: 'hainan'
+  },
+  {
+    name: '重庆市',
+    value: 22,
+    code: 'chongqing'
+  },
+  {
+    name: '四川省',
+    value: 23,
+    code: 'sichuan'
+  },
+  {
+    name: '贵州省',
+    value: 24,
+    code: 'guizhou'
+  },
+  {
+    name: '云南省',
+    value: 25,
+    code: 'yunnan'
+  },
+  {
+    name: '西藏自治区',
+    value: 26,
+    code: 'xizang'
+  },
+  {
+    name: '陕西省',
+    value: 27,
+    code: 'shanxi1'
+  },
+  {
+    name: '甘肃省',
+    value: 28,
+    code: 'gansu'
+  },
+  {
+    name: '青海省',
+    value: 29,
+    code: 'qinghai'
+  },
+  {
+    name: '宁夏回族自治区',
+    value: 30,
+    code: 'ningxia'
+  },
+  {
+    name: '新疆维吾尔自治区',
+    value: 31,
+    code: 'xinjiang'
+  },
+  {
+    name: '台湾省',
+    value: 32,
+    code: 'taiwan'
+  },
+  {
+    name: '香港特别行政区',
+    value: 33,
+    code: 'hongkong'
+  },
+  {
+    name: '澳门特别行政区',
+    value: 34,
+    code: 'macao'
+  }
+];