shit

src/components/areaMap.vue

@@ -44,74 +44,96 @@ import { ref, onMounted } from "vue"
 import axios from "axios";
 import * as echarts from 'echarts';
 import "echarts-gl"
-// import geoJson from "/static/jsonData/xuantan.js"
+import iconbg from '/static/index/mapicon.png'
+import geoJson from "/static/jsonData/xuantan.js"
+const u = 'https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231129\/202311291816106120a4034.png'
+  const icon = "https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231204\/202312041608529c9e21252.png"
+
+const pointerFn = () => {
+
+  // console.log()
+  let list = []
+  geoJson.center.forEach((item, index) => {
 
 
 
     
+    list.push({
+      coord: item,
+      symbol: ('image://' + icon),// 自定义图片路径
+      symbolSize: [100, 30], // 图片大小
+      symbolOffset: ['50%', '-50%'],
+      value: geoJson.features[index].properties.name,
+      animation: true,
+      label: {
+        show: true,
+        color: 'white',
+        fontSize: 14,
+      },
+    },)
+  })
+  return list
+}
+// pointerFn()
 onMounted(() => {
-  const u = 'https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231129\/202311291816106120a4034.png'
-
-
-  axios.get('https://geo.datav.aliyun.com/areas_v3/bound/510500_full.json')
-
-
-  axios.get('https://geo.datav.aliyun.com/areas_v3/bound/510000_full.json')
-    .then(function (response) {
-      let geoJson = response.data
-      const dot = document.getElementById('img')
       var mapName = 'lz';
-      let data = [
-      ]
       const myChart = document.getElementById("chart2")
       /*获取地图数据*/
-
-
       let option = {
-
-
-
         geo: [
+
+        
           {
-            layoutSize: '100%',//大小
+            type: "map",
+            map: mapName,
+            aspectScale: 1,
+            zoom: 1.2,
+            layoutCenter: ["50%", "51%"],
+            layoutSize: "100%",
+            roam: false,
+            label:{
+              emphasis:{
+                show:false
+              }
+            },
             show: true,
             map: mapName,
-
-            roam: false,
             zoom: 1.2,
-            layoutCenter: ["50%", "50%"],
             aspectScale: 1,
-            label: {
+            roam: false,
+            itemStyle: {
               normal: {
-                show: false,
+                areaColor: 'transparent',
-                textStyle: {
+
-                  color: '#fff'
-                }
               },
+              emphasis: {
+
+                areaColor: {
+                  type: 'radial', // linear 线性渐变  radial径向渐变
+                  x: 0.5,                  // 0.5为正中心，如果小于渐变中心靠左
+                  y: 0.5,                  // 0.5为正中心，如果小于渐变中心靠上
+                  r: 1,
+                  colorStops: [
+                    {
+                      offset: 0, color: '#A46759' // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.1, color: '#A46759' // 0% 处的颜色
+                    },
+
+
+                    {
+                      offset: 1, color: '#FFB821' // 100% 处的颜色
+                    }],
+
+                }
+
+
+                // borderWidth: 0
+              }
 
             },
-            itemStyle: {
+            
-              areaColor: {
-                type: "linear",
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 0,
-                colorStops: [{
-                  offset: 0,
-                  color: "rgba(3,27,78,0.75)", // 0% 处的颜色
-                }, {
-                  offset: 1,
-                  color: "rgba(58,149,253,0.75)", // 50% 处的颜色
-                },],
-                global: true, // 缺省为 false
-              },
-              borderColor: "#D2F2FC",
-              borderWidth: 2,
-              shadowColor: "#8cd3ef",
-              shadowOffsetY: 10,
-              shadowBlur: 120,
-            },
 
           },
 
@@ -125,20 +147,7 @@ onMounted(() => {
             layoutSize: "100%",
             roam: false,
             silent: true,
-            regions: [
+           
-              {
-                name: "南海诸岛",
-                itemStyle: {
-                  // 隐藏地图
-                  normal: {
-                    opacity: 0, // 为 0 时不绘制该图形
-                  }
-                },
-                label: {
-                  show: false // 隐藏文字
-                }
-              }
-            ],
             itemStyle: {
               normal: {
                 borderWidth: 1,
@@ -153,8 +162,6 @@ onMounted(() => {
           },
 
 
-
-
           {
             type: "map",
             map: mapName,
@@ -178,13 +185,15 @@ onMounted(() => {
               },
             },
           },
+
+
           {
             type: "map",
             map: mapName,
             zlevel: -2,
             aspectScale: 1,
             zoom: 1.2,
-            layoutCenter: ["50%", "52%"],
+            layoutCenter: ["50%", "53%"],
             layoutSize: "100%",
             roam: false,
             silent: true,
@@ -202,66 +211,17 @@ onMounted(() => {
             },
           },
 
-          // {
-          //   type: "map",
-          //   map: mapName,
-          //   zlevel: -3,
-          //   aspectScale: 1,
-          //   zoom: 1.2,
-          //   layoutCenter: ["50%", "53%"],
-          //   layoutSize: "101%",
-          //   roam: false,
-          //   silent: true,
-          //   regions: [
-          //     {
-          //       name: "南海诸岛",
-          //       itemStyle: {
-          //         // 隐藏地图
-          //         normal: {
-          //           opacity: 0, // 为 0 时不绘制该图形
-          //         }
-          //       },
-          //       label: {
-          //         show: false // 隐藏文字
-          //       }
-          //     }
-          //   ],
-          //   itemStyle: {
-          //     normal: {
-          //       borderWidth: 1,
-          //       // borderColor: "rgba(11, 43, 97,0.8)",
-          //       borderColor: "rgba(58,149,253,0.4)",
-          //       shadowColor: "rgba(58,149,253,1)",
-          //       shadowOffsetY: 15,
-          //       shadowBlur: 10,
-          //       areaColor: "transpercent",
-          //     },
-          //   },
-          // },
           {
             type: "map",
             map: mapName,
             zlevel: -4,
             aspectScale: 1,
             zoom: 1.2,
-            layoutCenter: ["50%", "53%"],
+            layoutCenter: ["50%", "54%"],
             layoutSize: "100%",
             roam: false,
             silent: true,
-            regions: [
+
-              {
-                name: "南海诸岛",
-                itemStyle: {
-                  // 隐藏地图
-                  normal: {
-                    opacity: 0, // 为 0 时不绘制该图形
-                  }
-                },
-                label: {
-                  show: false // 隐藏文字
-                }
-              }
-            ],
             itemStyle: {
               normal: {
                 borderWidth: 5,
@@ -280,63 +240,54 @@ onMounted(() => {
         ],
         series: [
           {
-            type: 'map',
+            name: '资产数',
-            map: mapName,
+            type: 'effectScatter',
-            geoIndex: 0,
+            coordinateSystem: 'geo',
-            aspectScale: 1, //长宽比
+            rippleEffect: {
-
+              period: 4, //动画时间，值越小速度越快
-            showLegendSymbol: true,
+              brushType: 'fill', //波纹绘制方式 stroke, fill
-            roam: true,
+              scale: 12, //波纹圆环最大限制，值越大波纹越大
-            label: {
+              number: 2,
-                            show: true,
-                            position: "top",
-                            distance: -10,
-                            formatter(params) {
-                                return "2";
-                            },
-
-                            textStyle: {
-                                // color: "transparent",
-                                padding: [15, 20],
-                                backgroundColor: {
-                                    image: '/static/index/aa.png',
-                                },
-                                // backgroundColor:""
-                            },
-                        },
-
-
-
-            animation: true,
-            markPoint: {
-              symbol: "none"
             },
-            data: data,
+
+            // 发散点的大小
+            symbolSize: function (val) {
+              return 4
+              // return val[2] / 10;
+            },
+            markPoint: {
+              data:pointerFn()
+            },
+
+            data: (() => {
+              let data = {
+                资产数: geoJson.center
+
+              }
+              let finalData = []
+              Object.keys(data).map((i, index) => {
+                let child = data[i].map((row) => ({
+                  value: row,
+                  itemStyle: {
+                    color: '#FFB922',
+                  },
+                }))
+
+                finalData = [...finalData, ...child]
+              })
+              return finalData
+            })(),
           },
-
-
         ],
       };
-
-
-
       echarts.registerMap(mapName, geoJson)
       const bg = echarts.init(myChart)
       bg.setOption(option);
 
-
-
-
-
-
-
-
     })
 
 
 
-})
-
 
 
 

src/view/detail.vue

@@ -282,7 +282,8 @@ const test = () => {
 }
 
 onMounted(() => {
-
+    document.getElementById("online").removeAttribute('_echarts_instance_');
+    document.getElementById("offline").removeAttribute('_echarts_instance_');
     initCharts('online', options.onLine)
     initCharts('offline', options.offLine)
 

src/view/index.vue

@@ -10,7 +10,6 @@
                 <div class="cont">
                     <div style="display: flex;justify-content: space-between;align-items: center;margin-top: 3vh;">
                         <img src="/static/index/JYZ.png" style="width: 2.8vw; height: 4vw;" alt="">
-
                         <div class="circle">
                             <img src="/static/detail/bk.png" class="act-img" alt="">
                             <div style="width: 110px;height: 110px;" class="online" id="online"></div>
@@ -21,7 +20,6 @@
                         </div>
                         <img src="/static/index/JTY.png" style="width: 2.8vw; height: 4vw;" alt="">
                     </div>
-
                     <div class="eqNum">
                         <div>
                             <img src="/static/index/Q.png" alt="" style="transform: translateY(2px);"> 在线设备统计：<span
@@ -50,12 +48,8 @@
                             style="font-size: 18px;margin-left: 1vw; ">45454</span> 块</div>
                 </div>
                 <div class="map">
-
                     <areaMap></areaMap>
-
                 </div>
-
-
             </div>
             <div class="bottom">
                 <warnPop v-if="showWarnPop" ref="ChildsDom" @off="showWarnPop = false"></warnPop>
@@ -70,12 +64,12 @@
                         <div
                             style="display: flex;flex-direction: column;justify-content: space-between;margin-left: 1vw;color: #CAD5E5;">
                             <div style="display: flex;align-items: center;">
-                                <img src="/static/index/MC.png" style="width:1.5vw;height: 1.5vw;margin-right: 5px; "
+                                <img src="/static/index/MC.png" style="width:1.7vw;height: 1.5vw;margin-right: 5px; "
                                     alt="">
                                 张伟
                             </div>
                             <div style="display: flex;align-items: center;">
-                                <img src="/static/index/MC.png" style="width:1.5vw;height: 1.5vw;margin-right: 5px; "
+                                <img src="/static/index/JS.png" style="width:1.7vw;height: 1.5vw;margin-right: 5px; "
                                     alt="">
                                 这是一名后端开发
                             </div>
@@ -173,7 +167,6 @@ const config3 = reactive({
 
     ]
 })
-
 // 图表
 const initCharts = (tag, option) => {
     var chartDom = document.getElementById(tag);
@@ -181,9 +174,7 @@ const initCharts = (tag, option) => {
     myChart.setOption(option);
 }
 const ChildsDom = ref(null);
-
 const showWarnPop = ref(false)
-
 const hdClick = (e) => {
     // console.log(e)
     if (e.ceil) {
@@ -192,7 +183,6 @@ const hdClick = (e) => {
         }
     }
 }
-
 const showWarnDeatil = ref(false)
 const hdClick3 = (e) => {
     if (e.ceil) {
@@ -203,7 +193,6 @@ const hdClick3 = (e) => {
     }
 }
 
-
 const test = () => {
     router.replace('/detail')
 }
@@ -221,7 +210,8 @@ const scrollTableFn = () => {
 
 }
 onMounted(() => {
-
+    document.getElementById("online").removeAttribute('_echarts_instance_');
+    document.getElementById("offline").removeAttribute('_echarts_instance_');
     scrollTableFn()
     initCharts('online', options.onLine)
     initCharts('offline', options.offLine)