驾驶舱地图

client/package.json

@@ -49,6 +49,8 @@
     "diagram-js": "^12.3.0",
     "echarts": "^5.4.3",
     "echarts-wordcloud": "^2.1.0",
+    "echarts-gl": "^1.1.2",
+    "echarts-liquidfill": "^2.0.6",
     "element-plus": "2.3.14",
     "fast-xml-parser": "^4.3.0",
     "highlight.js": "^11.8.0",
@@ -150,4 +152,4 @@
     "node": ">= 16.0.0",
     "pnpm": ">=8.6.0"
   }
-}
+}

client/src/views/OaSystem/oaViews/marketView/mapView/mapChart.vue

@@ -1,12 +1,163 @@
 <template>
-  <div class="w-100% h-100%" id="myChart4"></div>
+  <div class="w-100% h-100%" id="myChart5"></div>
 </template>
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import * as echarts from 'echarts'
+import China from '@/assets/json/china.json'
+
 const initChart = () => {
-  let myChart = echarts.init(document.getElementById('myChart4'))
-  let option = {}
+  let myChart = echarts.init(document.getElementById('myChart5'))
+  var geoCoordMap = {
+    上海: [119.1803, 31.2891],
+    福建: [119.4543, 25.9222],
+    重庆: [108.384366, 30.439702],
+    北京: [116.4551, 40.2539],
+    辽宁: [123.1238, 42.1216],
+    河北: [114.4995, 38.1006],
+    天津: [117.4219, 39.4189],
+    山西: [112.3352, 37.9413],
+    陕西: [109.1162, 34.2004],
+    甘肃: [103.5901, 36.3043],
+    宁夏: [106.3586, 38.1775],
+    青海: [101.4038, 36.8207],
+    新疆: [87.9236, 43.5883],
+    西藏: [91.11, 29.97],
+    四川: [103.9526, 30.7617],
+    吉林: [125.8154, 44.2584],
+    山东: [117.1582, 36.8701],
+    河南: [113.4668, 34.6234],
+    江苏: [118.8062, 31.9208],
+    安徽: [117.29, 32.0581],
+    湖北: [114.3896, 30.6628],
+    浙江: [119.5313, 29.8773],
+    内蒙古: [110.3467, 41.4899],
+    江西: [116.0046, 28.6633],
+    湖南: [113.0823, 28.2568],
+    贵州: [106.6992, 26.7682],
+    云南: [102.9199, 25.4663],
+    广东: [113.12244, 23.009505],
+    广西: [108.479, 23.1152],
+    海南: [110.3893, 19.8516],
+    黑龙江: [127.9688, 45.368],
+    台湾: [121.4648, 25.563]
+  }
+  var chinaDatas = [
+    {
+      name: '北京',
+      value: 86
+    },
+
+    {
+      name: '江苏',
+      value: 24
+    },
+
+    {
+      name: '浙江',
+      value: 15
+    }
+  ]
+  let domImg = '/src/assets/imgs/oaView/bg-map.png'
+  var convertData = function (data) {
+    var res = []
+    for (var i = 0; i < data.length; i++) {
+      var geoCoord = geoCoordMap[data[i].name]
+      if (geoCoord) {
+        res.push({
+          name: data[i].name,
+          value: geoCoord.concat(data[i].value)
+        })
+      }
+    }
+    return res
+  }
+  //初始化元素
+  echarts.registerMap('china', China as any)
+  let option = {
+    geo: {
+      show: true,
+      map: 'china',
+      zoom: 1.2,
+      layoutCenter: ['50%', '60%'], //地图位置
+      layoutSize: '100%',
+      // roam: true, //是否开启平游或缩放
+      scaleLimit: {
+        //滚轮缩放的极限控制
+        min: 1,
+        max: 2
+      },
+
+      label: {
+        normal: {
+          show: false
+        },
+        emphasis: {
+          show: false
+        }
+      },
+      roam: false,
+      itemStyle: {
+        normal: {
+          borderWidth: 2,
+          borderColor: '#0A8EE8',
+          shadowColor: 'rgba(3,221,255,0.8)',
+          areaColor: {
+            type: 'pattern',
+            image: domImg, //配置图片
+            repeat: 'repeat' //可选值repeat、no-repeat、repeat-x、repeat-y
+          }
+        }
+      }
+    },
+    series: [
+      {
+        type: 'effectScatter',
+        coordinateSystem: 'geo',
+        z: 10,
+        data: convertData(
+          chinaDatas.sort(function (a, b) {
+            return b.value - a.value
+          })
+        ),
+        symbolSize: 20,
+        showEffectOn: 'render',
+        rippleEffect: {
+          brushType: 'stroke'
+        },
+        label: {
+          normal: {
+            show: true,
+            formatter: function (params) {
+              return '{fline|' + ' ' + params.data.name + ' ' + params.value[2] + '}'
+            },
+            position: 'left',
+            distance: 10,
+            backgroundColor: 'rgba(3,219,255,.8)',
+            padding: [0, 0],
+            borderRadius: 3,
+            lineHeight: 24,
+            verticalAlign: 'middle',
+            color: '#fff',
+            z: 11,
+            rich: {
+              fline: {
+                padding: [0, 10],
+                color: '#ffffff'
+              }
+            }
+          }
+        },
+        itemStyle: {
+          normal: {
+            color: 'rgba(3,219,255,1)',
+            shadowBlur: 8
+          }
+        }
+      }
+    ]
+  }
+
   myChart.setOption(option)
 }
 /** 初始化 **/

client/src/views/OaSystem/oaViews/marketView/mapView/mapView.vue

@@ -8,7 +8,7 @@
         <li v-for="(item, index) in infoShowList" :key="index">
           <p>{{ item.name }}</p>
           <h4 :style="{ color: item.color }"
-            >{{ item.value }} <span :style="{ color: item.color }">万元</span>
+            >{{ item.value }} <span :style="{ color: item.color }">亿元</span>
           </h4>
         </li>
       </ul>
@@ -22,17 +22,17 @@ import MapChart from './mapChart.vue'
 const infoShowList = ref([
   {
     name: '合同签约',
-    value: '333.00',
+    value: '2.0601',
     color: '#3AAEFF'
   },
   {
     name: '新开拓',
-    value: '333.00',
+    value: '1.9601',
     color: '#00D488'
   },
   {
     name: '回款',
-    value: '333.00',
+    value: '1.588',
     color: '#E4A306'
   }
 ])

client/src/views/OaSystem/oaViews/personnelView/mapView/mapChart.vue

@@ -1,12 +1,168 @@
 <template>
-  <div class="w-100% h-100%" id="myChart4"></div>
+  <div class="w-100% h-100%" id="myChart5"></div>
 </template>
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import * as echarts from 'echarts'
+import China from '@/assets/json/china.json'
+
 const initChart = () => {
-  let myChart = echarts.init(document.getElementById('myChart4'))
-  let option = {}
+  let myChart = echarts.init(document.getElementById('myChart5'))
+  var geoCoordMap = {
+    上海: [119.1803, 31.2891],
+    福建: [119.4543, 25.9222],
+    重庆: [108.384366, 30.439702],
+    北京: [116.4551, 40.2539],
+    辽宁: [123.1238, 42.1216],
+    河北: [114.4995, 38.1006],
+    天津: [117.4219, 39.4189],
+    山西: [112.3352, 37.9413],
+    陕西: [109.1162, 34.2004],
+    甘肃: [103.5901, 36.3043],
+    宁夏: [106.3586, 38.1775],
+    青海: [101.4038, 36.8207],
+    新疆: [87.9236, 43.5883],
+    西藏: [91.11, 29.97],
+    四川: [103.9526, 30.7617],
+    吉林: [125.8154, 44.2584],
+    山东: [117.1582, 36.8701],
+    河南: [113.4668, 34.6234],
+    江苏: [118.8062, 31.9208],
+    安徽: [117.29, 32.0581],
+    湖北: [114.3896, 30.6628],
+    浙江: [119.5313, 29.8773],
+    内蒙古: [110.3467, 41.4899],
+    江西: [116.0046, 28.6633],
+    湖南: [113.0823, 28.2568],
+    贵州: [106.6992, 26.7682],
+    云南: [102.9199, 25.4663],
+    广东: [113.12244, 23.009505],
+    广西: [108.479, 23.1152],
+    海南: [110.3893, 19.8516],
+    黑龙江: [127.9688, 45.368],
+    台湾: [121.4648, 25.563]
+  }
+  var chinaDatas = [
+    {
+      name: '北京',
+      value: 10
+    },
+
+    {
+      name: '江苏',
+      value: 86
+    },
+
+    {
+      name: '浙江',
+      value: 183
+    }
+  ]
+  let domImg = '/src/assets/imgs/oaView/bg-map.png'
+  let labelImg = '/src/assets/imgs/oaView/labelImg.png'
+  labelImg
+  var convertData = function (data) {
+    var res = []
+    for (var i = 0; i < data.length; i++) {
+      var geoCoord = geoCoordMap[data[i].name]
+      if (geoCoord) {
+        res.push({
+          name: data[i].name,
+          value: geoCoord.concat(data[i].value)
+        })
+      }
+    }
+    return res
+  }
+  //初始化元素
+  echarts.registerMap('china', China as any)
+  let option = {
+    geo: {
+      show: true,
+      map: 'china',
+      zoom: 1.2,
+      layoutCenter: ['50%', '60%'], //地图位置
+      layoutSize: '100%',
+      // roam: true, //是否开启平游或缩放
+      scaleLimit: {
+        //滚轮缩放的极限控制
+        min: 1,
+        max: 2
+      },
+
+      label: {
+        normal: {
+          show: false
+        },
+        emphasis: {
+          show: false
+        }
+      },
+      roam: false,
+      itemStyle: {
+        normal: {
+          borderWidth: 2,
+          borderColor: '#0A8EE8',
+          shadowColor: 'rgba(3,221,255,0.8)',
+          areaColor: {
+            type: 'pattern',
+            image: domImg, //配置图片
+            repeat: 'repeat' //可选值repeat、no-repeat、repeat-x、repeat-y
+          }
+        }
+      }
+    },
+    series: [
+      {
+        type: 'effectScatter',
+        coordinateSystem: 'geo',
+        z: 10,
+        data: convertData(
+          chinaDatas.sort(function (a, b) {
+            return b.value - a.value
+          })
+        ),
+        symbolSize: 20,
+        showEffectOn: 'render',
+        rippleEffect: {
+          brushType: 'stroke'
+        },
+        label: {
+          normal: {
+            show: true,
+            formatter: function (params) {
+              return '{fline|' + ' ' + params.data.name + ' ' + params.value[2] + '人' + '}'
+            },
+            position: 'left',
+            distance: 10,
+            backgroundColor: {
+              image: labelImg // 设置背景图片路径
+            },
+            padding: [0, 0],
+            borderRadius: 3,
+            lineHeight: 24,
+            verticalAlign: 'middle',
+            color: '#fff',
+            z: 11,
+            rich: {
+              fline: {
+                padding: [0, 10],
+                color: '#ffffff',
+                fontFamily: 'AlibabaPuHuiTiR'
+              }
+            }
+          }
+        },
+        itemStyle: {
+          normal: {
+            color: 'rgba(3,219,255,1)',
+            shadowBlur: 8
+          }
+        }
+      }
+    ]
+  }
+
   myChart.setOption(option)
 }
 /** 初始化 **/

client/src/views/OaSystem/oaViews/produceView/mapView/mapChart.vue

@@ -1,12 +1,168 @@
 <template>
-  <div class="w-100% h-100%" id="myChart4"></div>
+  <div class="w-100% h-100%" id="myChart5"></div>
 </template>
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import * as echarts from 'echarts'
+import China from '@/assets/json/china.json'
+
 const initChart = () => {
-  let myChart = echarts.init(document.getElementById('myChart4'))
-  let option = {}
+  let myChart = echarts.init(document.getElementById('myChart5'))
+  var geoCoordMap = {
+    上海: [119.1803, 31.2891],
+    福建: [119.4543, 25.9222],
+    重庆: [108.384366, 30.439702],
+    北京: [116.4551, 40.2539],
+    辽宁: [123.1238, 42.1216],
+    河北: [114.4995, 38.1006],
+    天津: [117.4219, 39.4189],
+    山西: [112.3352, 37.9413],
+    陕西: [109.1162, 34.2004],
+    甘肃: [103.5901, 36.3043],
+    宁夏: [106.3586, 38.1775],
+    青海: [101.4038, 36.8207],
+    新疆: [87.9236, 43.5883],
+    西藏: [91.11, 29.97],
+    四川: [103.9526, 30.7617],
+    吉林: [125.8154, 44.2584],
+    山东: [117.1582, 36.8701],
+    河南: [113.4668, 34.6234],
+    江苏: [118.8062, 31.9208],
+    安徽: [117.29, 32.0581],
+    湖北: [114.3896, 30.6628],
+    浙江: [119.5313, 29.8773],
+    内蒙古: [110.3467, 41.4899],
+    江西: [116.0046, 28.6633],
+    湖南: [113.0823, 28.2568],
+    贵州: [106.6992, 26.7682],
+    云南: [102.9199, 25.4663],
+    广东: [113.12244, 23.009505],
+    广西: [108.479, 23.1152],
+    海南: [110.3893, 19.8516],
+    黑龙江: [127.9688, 45.368],
+    台湾: [121.4648, 25.563]
+  }
+  var chinaDatas = [
+    {
+      name: '北京',
+      value: 10
+    },
+
+    {
+      name: '江苏',
+      value: 86
+    },
+
+    {
+      name: '浙江',
+      value: 183
+    }
+  ]
+  let domImg = '/src/assets/imgs/oaView/bg-map.png'
+  let labelImg = '/src/assets/imgs/oaView/labelImg.png'
+  labelImg
+  var convertData = function (data) {
+    var res = []
+    for (var i = 0; i < data.length; i++) {
+      var geoCoord = geoCoordMap[data[i].name]
+      if (geoCoord) {
+        res.push({
+          name: data[i].name,
+          value: geoCoord.concat(data[i].value)
+        })
+      }
+    }
+    return res
+  }
+  //初始化元素
+  echarts.registerMap('china', China as any)
+  let option = {
+    geo: {
+      show: true,
+      map: 'china',
+      zoom: 1.2,
+      layoutCenter: ['50%', '60%'], //地图位置
+      layoutSize: '100%',
+      // roam: true, //是否开启平游或缩放
+      scaleLimit: {
+        //滚轮缩放的极限控制
+        min: 1,
+        max: 2
+      },
+
+      label: {
+        normal: {
+          show: false
+        },
+        emphasis: {
+          show: false
+        }
+      },
+      roam: false,
+      itemStyle: {
+        normal: {
+          borderWidth: 2,
+          borderColor: '#0A8EE8',
+          shadowColor: 'rgba(3,221,255,0.8)',
+          areaColor: {
+            type: 'pattern',
+            image: domImg, //配置图片
+            repeat: 'repeat' //可选值repeat、no-repeat、repeat-x、repeat-y
+          }
+        }
+      }
+    },
+    series: [
+      {
+        type: 'effectScatter',
+        coordinateSystem: 'geo',
+        z: 10,
+        data: convertData(
+          chinaDatas.sort(function (a, b) {
+            return b.value - a.value
+          })
+        ),
+        symbolSize: 20,
+        showEffectOn: 'render',
+        rippleEffect: {
+          brushType: 'stroke'
+        },
+        label: {
+          normal: {
+            show: true,
+            formatter: function (params) {
+              return '{fline|' + ' ' + params.data.name + ' ' + params.value[2] + '人' + '}'
+            },
+            position: 'left',
+            distance: 10,
+            backgroundColor: {
+              image: labelImg // 设置背景图片路径
+            },
+            padding: [0, 0],
+            borderRadius: 3,
+            lineHeight: 24,
+            verticalAlign: 'middle',
+            color: '#fff',
+            z: 11,
+            rich: {
+              fline: {
+                padding: [0, 10],
+                color: '#ffffff',
+                fontFamily: 'AlibabaPuHuiTiR'
+              }
+            }
+          }
+        },
+        itemStyle: {
+          normal: {
+            color: 'rgba(3,219,255,1)',
+            shadowBlur: 8
+          }
+        }
+      }
+    ]
+  }
+
   myChart.setOption(option)
 }
 /** 初始化 **/