a

src/api.js

@@ -59,3 +59,16 @@ export function landListApi(params) {
 export function productListApi(params) {
     return instacne.get('/api/dataview.land/productList', { params })
 }
+
+export function areaPlantTypeCountApi(params) {
+    return instacne.get('/api/dataview.land/areaPlantTypeCount', { params })
+}
+export function monitorInfoApi(params) {
+    return instacne.get('/api/dataview.land/monitorInfo', { params })
+}
+
+export function deviceCountLandApi(params) {
+    return instacne.get('/api/dataview.land/deviceCount', { params })
+}
+
+// /api/dataview.land/deviceCount?areaCode=510521&streetCode=510521100&land_id=18

src/components/areaMap.vue

@@ -2,11 +2,8 @@
   <div>
 
     <div style="width: 45vw;height: 50vh;" id="chart2"></div>
-    <!-- <img src="/static/index/lx.png" class="img4" alt=""> -->
   </div>
-  <!-- <div style="width: 45vw;height: 50vh;" id="myChart"></div> -->
 
-  <!-- <img src="/static/index/SC.png" id="img" style="width: 45vw;height: 50vh;" alt=""> -->
 </template>
 
 
@@ -41,29 +38,22 @@
 
 <script setup>
 import { ref, onMounted } from "vue"
-
 import * as echarts from 'echarts';
 import "echarts-gl"
-
+import geoJson from "/static/jsonData/luxian_geo.js"
-import geoJson from "/static/jsonData/xuantan.js"
+import { useRouter } from "vue-router"
-import {useRouter} from "vue-router"
+const router = useRouter()
-
+const icon = "https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231204\/202312041608529c9e21252.png"
-
+const lx = "https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231205\/20231205092709cfe148712.png"
-const router=useRouter()
-  const icon = "https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231204\/202312041608529c9e21252.png"
-  const lx="https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231205\/20231205092709cfe148712.png"
-
 const pointerFn = () => {
-
-  // console.log()
   let list = []
   geoJson.center.forEach((item, index) => {
     list.push({
       coord: item,
-      symbol:  index==geoJson.center.length-1?('image://'+lx): ('image://' + icon),// 自定义图片路径
+      symbol: index == geoJson.center.length - 1 ? ('image://' + lx) : ('image://' + icon),// 自定义图片路径
       symbolSize: [100, 30], // 图片大小
       symbolOffset: ['50%', '-50%'],
-      value: geoJson.features[index]?.properties.name||'泸县',
+      value: geoJson.features[index]?.properties.name || '泸县',
       animation: true,
       label: {
         show: true,
@@ -74,230 +64,226 @@ const pointerFn = () => {
   })
   return list
 }
-// pointerFn()
 onMounted(() => {
-      var mapName = 'lz';
-      const myChart = document.getElementById("chart2")
-      /*获取地图数据*/
-      let option = {
-        geo: [
 
-        
-          {
-            type: "map",
-            map: mapName,
-            aspectScale: 1,
-            zoom: 1.2,
-            layoutCenter: ["50%", "51%"],
-            layoutSize: "110%",
-            roam: false,
-            label:{
-              emphasis:{
-                show:false
-              }
-            },
-            show: true,
-            map: mapName,
-            zoom: 1.2,
-            aspectScale: 1,
-            roam: false,
-            itemStyle: {
-              normal: {
-                areaColor: 'transparent',
 
+  var mapName = 'lz';
+  const myChart = document.getElementById("chart2")
+  /*获取地图数据*/
+  let option = {
+    geo: [
+
+
+      {
+        type: "map",
+        map: mapName,
+        aspectScale: 1,
+        zoom: 1.2,
+        layoutCenter: ["50%", "51%"],
+        layoutSize: "110%",
+        roam: false,
+        label: {
+          emphasis: {
+            show: false
+          }
+        },
+        show: true,
+        map: mapName,
+        zoom: 1.2,
+        aspectScale: 1,
+        roam: false,
+        itemStyle: {
+          normal: {
+            areaColor: 'transparent',
+
+          },
+          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
+          }
+
+        },
+
+
+      },
+
+      {
+        type: "map",
+        map: mapName,
+        zlevel: -1,
+        aspectScale: 1,
+        zoom: 1.2,
+        layoutCenter: ["50%", "51%"],
+        layoutSize: "110%",
+        roam: false,
+        silent: true,
+
+        itemStyle: {
+          normal: {
+            borderWidth: 1,
+            borderColor: "rgba(17, 149, 216,0.6)",
+            borderColor: "#5AD0E0",
+            shadowColor: "rgba(172, 122, 255,0.5)",
+            shadowOffsetY: 5,
+            shadowBlur: 15,
+            areaColor: "rgba(5,21,35,0.1)",
+          },
+        },
+      },
+
+
+      {
+        type: "map",
+        map: mapName,
+        zlevel: -1,
+        aspectScale: 1,
+        zoom: 1.2,
+        layoutCenter: ["50%", "52%"],
+        layoutSize: "110%",
+        roam: false,
+        silent: true,
+
+        itemStyle: {
+          normal: {
+            borderWidth: 1,
+            borderColor: "rgba(17, 149, 216,0.6)",
+            borderColor: "#5AD0E0",
+            shadowColor: "rgba(172, 122, 255,0.5)",
+            shadowOffsetY: 5,
+            shadowBlur: 15,
+            areaColor: "rgba(5,21,35,0.1)",
+          },
+        },
+      },
+
+
+      {
+        type: "map",
+        map: mapName,
+        zlevel: -2,
+        aspectScale: 1,
+        zoom: 1.2,
+        layoutCenter: ["50%", "53%"],
+        layoutSize: "110%",
+        roam: false,
+        silent: true,
+
+        itemStyle: {
+          normal: {
+            borderWidth: 1,
+            borderColor: "rgba(17, 149, 216,0.4)",
+            borderColor: "#5AD0E0",
+            shadowColor: "rgba(172, 122, 255,0.5)",
+            shadowOffsetY: 5,
+            shadowBlur: 15,
+            areaColor: "rgba(5,21,35,0.1)",
+          },
+        },
+      },
+
+      {
+        type: "map",
+        map: mapName,
+        zlevel: -4,
+        aspectScale: 1,
+        zoom: 1.2,
+        layoutCenter: ["50%", "54%"],
+        layoutSize: "110%",
+        roam: false,
+        silent: true,
+
+        itemStyle: {
+          normal: {
+            borderWidth: 5,
+            // borderColor: "rgba(11, 43, 97,0.8)",
+            borderColor: "rgba(5,9,57,0.8)",
+            shadowColor: "rgba(29, 111, 165,0.8)",
+            shadowOffsetY: 15,
+            shadowBlur: 10,
+            areaColor: "rgba(5,21,35,0.1)",
+          },
+        },
+      },
+
+
+
+    ],
+    series: [
+      {
+        name: '资产数',
+        type: 'effectScatter',
+        coordinateSystem: 'geo',
+        rippleEffect: {
+          period: 4, //动画时间，值越小速度越快
+          brushType: 'fill', //波纹绘制方式 stroke, fill
+          scale: 12, //波纹圆环最大限制，值越大波纹越大
+          number: 2,
+        },
+
+        // 发散点的大小
+        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, index) => ({
+              value: row,
+              itemStyle: {
+                color: index == geoJson.center.length - 1 ? '#FEB821' : '#F0733A',
               },
-              emphasis: {
+            }))
 
-                areaColor: {
+            finalData = [...finalData, ...child]
-                  type: 'radial', // linear 线性渐变  radial径向渐变
+          })
-                  x: 0.5,                  // 0.5为正中心，如果小于渐变中心靠左
+          return finalData
-                  y: 0.5,                  // 0.5为正中心，如果小于渐变中心靠上
+        })(),
-                  r: 1,
+      },
-                  colorStops: [
+    ],
-                    {
+  };
-                      offset: 0, color: '#A46759' // 0% 处的颜色
-                    },
-                    {
-                      offset: 0.1, color: '#A46759' // 0% 处的颜色
-                    },
 
+  document.getElementById("chart2").removeAttribute('_echarts_instance_');
 
-                    {
+  echarts.registerMap(mapName, geoJson)
-                      offset: 1, color: '#FFB821' // 100% 处的颜色
+  const bg = echarts.init(myChart)
-                    }],
+  bg.setOption(option);
 
-                }
+  bg.on('click', function (params) {
-
-
-                // borderWidth: 0
-              }
-
-            },
-            
-
-          },
-
-          {
-            type: "map",
-            map: mapName,
-            zlevel: -1,
-            aspectScale: 1,
-            zoom: 1.2,
-            layoutCenter: ["50%", "51%"],
-            layoutSize: "110%",
-            roam: false,
-            silent: true,
-           
-            itemStyle: {
-              normal: {
-                borderWidth: 1,
-                borderColor: "rgba(17, 149, 216,0.6)",
-                borderColor: "#5AD0E0",
-                shadowColor: "rgba(172, 122, 255,0.5)",
-                shadowOffsetY: 5,
-                shadowBlur: 15,
-                areaColor: "rgba(5,21,35,0.1)",
-              },
-            },
-          },
-
-
-          {
-            type: "map",
-            map: mapName,
-            zlevel: -1,
-            aspectScale: 1,
-            zoom: 1.2,
-            layoutCenter: ["50%", "52%"],
-            layoutSize: "110%",
-            roam: false,
-            silent: true,
-
-            itemStyle: {
-              normal: {
-                borderWidth: 1,
-                borderColor: "rgba(17, 149, 216,0.6)",
-                borderColor: "#5AD0E0",
-                shadowColor: "rgba(172, 122, 255,0.5)",
-                shadowOffsetY: 5,
-                shadowBlur: 15,
-                areaColor: "rgba(5,21,35,0.1)",
-              },
-            },
-          },
-
-
-          {
-            type: "map",
-            map: mapName,
-            zlevel: -2,
-            aspectScale: 1,
-            zoom: 1.2,
-            layoutCenter: ["50%", "53%"],
-            layoutSize: "110%",
-            roam: false,
-            silent: true,
-
-            itemStyle: {
-              normal: {
-                borderWidth: 1,
-                borderColor: "rgba(17, 149, 216,0.4)",
-                borderColor: "#5AD0E0",
-                shadowColor: "rgba(172, 122, 255,0.5)",
-                shadowOffsetY: 5,
-                shadowBlur: 15,
-                areaColor: "rgba(5,21,35,0.1)",
-              },
-            },
-          },
-
-          {
-            type: "map",
-            map: mapName,
-            zlevel: -4,
-            aspectScale: 1,
-            zoom: 1.2,
-            layoutCenter: ["50%", "54%"],
-            layoutSize: "110%",
-            roam: false,
-            silent: true,
-
-            itemStyle: {
-              normal: {
-                borderWidth: 5,
-                // borderColor: "rgba(11, 43, 97,0.8)",
-                borderColor: "rgba(5,9,57,0.8)",
-                shadowColor: "rgba(29, 111, 165,0.8)",
-                shadowOffsetY: 15,
-                shadowBlur: 10,
-                areaColor: "rgba(5,21,35,0.1)",
-              },
-            },
-          },
-
-
-
-        ],
-        series: [
-          {
-            name: '资产数',
-            type: 'effectScatter',
-            coordinateSystem: 'geo',
-            rippleEffect: {
-              period: 4, //动画时间，值越小速度越快
-              brushType: 'fill', //波纹绘制方式 stroke, fill
-              scale: 12, //波纹圆环最大限制，值越大波纹越大
-              number: 2,
-            },
-
-            // 发散点的大小
-            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,index) => ({
-                  value: row,
-                  itemStyle: {
-                    color:index==geoJson.center.length-1?'#FEB821':'#F0733A',
-                  },
-                }))
-
-                finalData = [...finalData, ...child]
-              })
-              return finalData
-            })(),
-          },
-        ],
-      };
-      echarts.registerMap(mapName, geoJson)
-      const bg = echarts.init(myChart)
-      bg.setOption(option);
-
-      bg.on('click', function (params) {
-        mapClick()
-       
-    });
-
-    })
-
-
-
-const mapClick=()=>{
-  router.push("/detail")
-}
 
+  router.push("/detail?town="+params.name||params.value)
 
+  });
 
+})
 
 </script>

src/components/detail/leftTop.vue

@@ -1,20 +1,46 @@
 <template>
     <div style="display: flex;justify-content: space-between;align-items: center;">
-        <span>种植总面积：</span>
+        <span>种植总面积： </span>
         <div>
-            <span class="area-num "><span class="color-font">2</span> </span>
+            <span class="area-num "  v-for="item in plantData.totalArea"><span class="color-font">{{ item }}</span> </span>
-            <span class="area-num "><span class="color-font">2</span> </span>
-            <span class="area-num "><span class="color-font">2</span> </span>
-            <span class="area-num "><span class="color-font">2</span> </span>
         </div>
     </div>
     <div style="">种植种类：</div>
     <div>
         <div class="lands">
-            <div class="land" v-for="(item, index) in 33" :key="index">地块</div>
+            <div class="land" v-for="(item, index) in plantData.plantKindList" :key="index">{{ item.kind }}</div>
         </div>
     </div>
 </template>
+
+<script setup>
+import {areaPlantTypeCountApi} from "@/api.js"
+import {ref,reactive} from "vue"
+
+let plantData=reactive({
+    totalArea:0,
+    plantKindList:[]
+
+
+})
+// api/dataview.land/areaPlantTypeCount?areaCode=510521&streetCode=510521100
+areaPlantTypeCountApi(
+    {
+        areaCode:510521,
+        streetCode:510521100,
+        land_id:12 
+    }
+).then(res=>{
+    for (let key in res.data){
+        plantData[key]=res.data[key]
+    }
+    plantData.totalArea=plantData.totalArea.toString()
+
+})
+
+
+</script>
+
 <style lang="scss">
 .area-num {
     margin-right: 10px;
@@ -32,11 +58,12 @@
     display: flex;
     flex-wrap: wrap;
     height: 100%;
-    justify-content: space-between;
+    // justify-content: space-between;
     font-size: 14px;
     overflow-y: auto;
     margin-top: 1vh;
     height: 15vh;
+    flex-wrap: wrap;
 
     .land {
         width: 5vw;
@@ -47,6 +74,8 @@
         color: white;
         text-align: center;
         line-height: 3vh;
+    margin-right: 10px;
+
 
     }
 }

src/components/detail/rightBottom.vue

@@ -9,7 +9,20 @@
 
 
 <script setup>
-import {reactive} from "vue"
+import { reactive } from "vue"
+import { monitorInfoApi } from "@/api.js"
+
+monitorInfoApi(
+    {
+        areaCode: 510521,
+        streetCode: 510521100,
+        land_id: 18
+    }
+
+).then(res => {
+    console.log(res.data)
+})
+// /api/dataview.land/monitorInfo?areaCode=510521&streetCode=510521100&land_id=18
 
 
 const MoistureData = reactive([

src/components/detail/rightTop.vue

@@ -33,7 +33,16 @@
 import {ref,reactive,onMounted} from "vue"
 import * as echarts from 'echarts';
 import options from "@/view/option.js"
-
+import {deviceCountLandApi} from "@/api.js"
+deviceCountLandApi(
+    {
+        areaCode:510521,
+        streetCode:510521100,
+        land_id:18
+    }
+).then(res=>{
+    console.log(res.data)
+})
 
 // 图表
 const initCharts = (tag, option) => {

src/components/farmerMap.vue

@@ -1,437 +1,308 @@
 <template>
+  <div>
+    <div style="width: 45vw;height: 50vh;" id="farmerchart"></div>
+  </div>
 
-    <div style="width: 45vw;height: 50vh;" id="chart2">
+</template>
-  
+
-  
+
-    </div>
+
-    <!-- <img src="/static/index/SC.png" id="img" style="width: 45vw;height: 50vh;" alt=""> -->
+<style lang="scss" scoped>
-  </template>
+@keyframes spin {
-  
+  0% {
-  
+    transform: rotateY(0deg);
-  
+  }
-  <style lang="scss" scoped>
+
-  @keyframes spin {
+  100% {
-    0% {
+    transform: rotateY(360deg);
-      transform: rotateY(0deg);
+  }
-    }
+}
-  
+
-    100% {
+.img4 {
-      transform: rotateY(360deg);
+  top: 19.5vh;
+  left: 33.3vw;
+  height: 44vh;
+  width: 33.6vw;
+  position: absolute;
+}
+
+#farmerchart {
+  position: absolute;
+  z-index: 9;
+}
+</style>
+
+<script setup>
+import { ref, onMounted } from "vue"
+import * as echarts from 'echarts';
+import "echarts-gl"
+import geoJson from "/static/jsonData/luxian_geo.js"
+import {  useRoute } from "vue-router"
+const deepCopy=(obj)=> {
+  if (typeof obj !== 'object' || obj === null) {
+    return obj;
+  }
+
+  let copy = Array.isArray(obj) ? [] : {};
+
+  for (let key in obj) {
+    if (Object.prototype.hasOwnProperty.call(obj, key)) {
+      copy[key] = deepCopy(obj[key]);
     }
   }
-  
+
-  .img4 {
+  return copy;
-    width: 45VW;
+}
-    height: 50vh;
+
-    transform-origin: center center;
+const townJson=deepCopy(geoJson)
-    //   transform: rotateX(45deg);
+const route = useRoute()
-    // animation: spin 2s linear infinite;
+townJson.features = townJson.features.filter((item) => {
-  
+  return item.properties.name == route.query.town
-  }
+})
-  </style>
+const icon = "https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231204\/202312041608529c9e21252.png"
-  
+const lx = "https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231205\/20231205092709cfe148712.png"
-  <script setup>
+
-  import { ref, onMounted } from "vue"
+const pointerFn = () => {
-  import axios from "axios";
+  return
-  import * as echarts from 'echarts';
+  let list = []
-  import "echarts-gl"
+  geoJson.center.forEach((item, index) => {
-  
+    list.push({
-  
+      coord: item,
-  
+      symbol: index == geoJson.center.length - 1 ? ('image://' + lx) : ('image://' + icon),// 自定义图片路径
-  
+      symbolSize: [100, 30], // 图片大小
-  
+      symbolOffset: ['50%', '-50%'],
-  onMounted(() => {
+      value: geoJson.features[index]?.properties.name || '泸县',
-    const u = 'https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231129\/202311291816106120a4034.png'
+      animation: true,
-    axios.get('https://geo.datav.aliyun.com/areas_v3/bound/510000_full.json')
+      label: {
-      .then(function (response) {
+        show: true,
-        let geoJson = response.data
+        color: 'white',
-        const dot = document.getElementById('img')
+        fontSize: 14,
-        var mapName = 'lz';
+      },
-        var geoCoordMap = {
+    },)
-        };
-  
-        let data = [
-  
-        {
-                  name: "成都市",
-                  value: 12,
-                  itemStyle: {
-                      normal: {
-                          color: {
-                              image: document.getElementById("img"),
-                              repeat: 'no-repeat'
-                          }
-                      }
-                  }
-              },
-        {
-                  name: "眉山市",
-                  value: 12,
-                  itemStyle: {
-                      normal: {
-                          color: {
-                              image: document.getElementById("img"),
-                              repeat: 'no-repeat'
-                          }
-                      }
-                  }
-              },
-        {
-                  name: "雅安市",
-                  value: 12,
-                  itemStyle: {
-                      normal: {
-                          color: {
-                              image: document.getElementById("img"),
-                              repeat: 'no-repeat'
-                          }
-                      }
-                  }
-              },
-  
-        ]
-        const myChart = document.getElementById("chart2")
-        /*获取地图数据*/
-        var mapFeatures = geoJson.features;
-        mapFeatures.forEach(function (v) {
-          // 地区名称
-          var name = v.properties.name;
-          // 地区经纬度
-          geoCoordMap[name] = v.properties.cp;
-        });
-        // console.log(dot)
-        let option = {
-          visualMap: {
-                      show: false
-                  },
-          title: {
-            show: true,
-  
-            // textStyle: {
-            //     color: "#fff",
-            //     fontFamily: "等线",
-            //     fontSize: 18,
-            // },
-          },
-          tooltip: {
-            trigger: 'none',
-            formatter: function (params) {
-              if (typeof params.value[2] == 'undefined') {
-                var toolTiphtml = '';
-                for (var i = 0; i < toolTipData.length; i++) {
-                  if (params.name == toolTipData[i].name) {
-                    toolTiphtml += toolTipData[i].name + "：" + toolTipData[i].value;
-                  }
-                }
-                console.log(toolTiphtml);
-                // console.log(convertData(data))
-                return toolTiphtml;
-              } else {
-                var toolTiphtml = '';
-                for (var i = 0; i < toolTipData.length; i++) {
-                  if (params.name == toolTipData[i].name) {
-                    toolTiphtml += toolTipData[i].name + "：" + toolTipData[i].value;
-                  }
-                }
-                console.log(toolTiphtml);
-  
-                return toolTiphtml;
-              }
-            },
-            backgroundColor: "#fff",
-            borderColor: "#333",
-            padding: [5, 10],
-            textStyle: {
-              color: "#333",
-              fontSize: "16"
-            }
-          },
-          geo: [
-            {
-              layoutSize: '100%',//大小
-              show: true,
-              map: mapName,
-              backgroundColor: {
-                color: {
-                  image: dot, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
-                  repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
-                }
-              },
-              roam: false,
-              zoom: 1.2,
-              layoutCenter: ["50%", "50%"],
-              aspectScale: 1,
-              label: {
-                normal: {
-                  show: false,
-                  textStyle: {
-                    color: '#fff'
-                  }
-                },
-                emphasis: {
-                  show: true,
-                  textStyle: {
-                    color: '#fff'
-                  }
-                }
-              },
-              itemStyle: {
-                areaColor: {
-                  type: "linear",
-                  x: 1200,
-                  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,
-              },
-  
-            },
-  
-            // {
-            //   type: "map",
-            //   map: mapName,
-            //   zlevel: -1,
-            //   aspectScale: 1,
-            //   zoom: 1.2,
-            //   layoutCenter: ["50%", "51%"],
-            //   layoutSize: "100%",
-            //   roam: false,
-            //   silent: true,
-            //   regions: [
-            //     {
-            //       name: "南海诸岛",
-            //       itemStyle: {
-            //         // 隐藏地图
-            //         normal: {
-            //           opacity: 0, // 为 0 时不绘制该图形
-            //         }
-            //       },
-            //       label: {
-            //         show: false // 隐藏文字
-            //       }
-            //     }
-            //   ],
-            //   itemStyle: {
-            //     normal: {
-            //       borderWidth: 1,
-            //       borderColor: "rgba(17, 149, 216,0.6)",
-            //       borderColor: "#5AD0E0",
-            //       shadowColor: "rgba(172, 122, 255,0.5)",
-            //       shadowOffsetY: 5,
-            //       shadowBlur: 15,
-            //       areaColor: "rgba(5,21,35,0.1)",
-            //     },
-            //   },
-            // },
-            // {
-            //   type: "map",
-            //   map: mapName,
-            //   zlevel: -2,
-            //   aspectScale: 1,
-            //   zoom: 1.2,
-            //   layoutCenter: ["50%", "52%"],
-            //   layoutSize: "100%",
-            //   roam: false,
-            //   silent: true,
-            //   regions: [
-            //     {
-            //       name: "南海诸岛",
-            //       itemStyle: {
-            //         // 隐藏地图
-            //         normal: {
-            //           opacity: 0, // 为 0 时不绘制该图形
-            //         }
-            //       },
-            //       label: {
-            //         show: false // 隐藏文字
-            //       }
-            //     }
-            //   ],
-            //   itemStyle: {
-            //     normal: {
-            //       borderWidth: 1,
-            //       // borderColor: "rgba(57, 132, 188,0.4)",
-            //       borderColor: "#1C75C8",
-            //       shadowColor: "rgba(65, 214, 255,1)",
-            //       shadowOffsetY: 5,
-            //       shadowBlur: 15,
-            //       areaColor: "transpercent",
-            //     },
-            //   },
-            // },
-  
-            // {
-            //   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%", "54%"],
-            //   layoutSize: "103%",
-            //   roam: false,
-            //   silent: true,
-            //   regions: [
-            //     {
-            //       name: "南海诸岛",
-            //       itemStyle: {
-            //         // 隐藏地图
-            //         normal: {
-            //           opacity: 0, // 为 0 时不绘制该图形
-            //         }
-            //       },
-            //       label: {
-            //         show: false // 隐藏文字
-            //       }
-            //     }
-            //   ],
-            //   itemStyle: {
-            //     normal: {
-            //       borderWidth: 5,
-            //       // borderColor: "rgba(11, 43, 97,0.8)",
-            //       borderColor: "rgba(5,9,57,0.8)",
-            //       shadowColor: "rgba(29, 111, 165,0.8)",
-            //       shadowOffsetY: 15,
-            //       shadowBlur: 10,
-            //       areaColor: "rgba(5,21,35,0.1)",
-            //     },
-            //   },
-            // },
-  
-  
-  
-          ],
-          series: [
-            {
-              type: 'map',
-              map: mapName,
-              geoIndex: 0,
-              aspectScale: 1, //长宽比
-              zoom: 0.65,
-              showLegendSymbol: true,
-              roam: true,
-              label: {
-                normal: {
-                  show: true,
-                  textStyle: {
-                    color: "#fff",
-                    fontSize: "120%"
-                  },
-                },
-                emphasis: {
-                  // show: false,
-                },
-              },
-              // itemStyle: {
-              //     normal: {
-              //         areaColor: {
-              //             type: "linear",
-              //             x: 1200,
-              //             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: "#fff",
-              //         borderWidth: 0.2,
-              //     },
-              // },
-              layoutCenter: ["50%", "50%"],
-              layoutSize: "180%",
-              animation: true,
-              markPoint: {
-                symbol: "none"
-              },
-              data: data,
-            },
-  
-  
-          ],
-        };
-  
-      
-  
-        echarts.registerMap(mapName, geoJson)
-        const bg = echarts.init(myChart)
-        bg.setOption(option);
-  
-  
-  
-  
-  
-  
-  
-  
-      })
-  
-  
-  
   })
-  
+  return list
-  
+}
-  
+onMounted(() => {
-  
+  var mapName = 'lz';
-  
+  const myChart = document.getElementById("farmerchart")
-  
+  /*获取地图数据*/
-  </script>
+  let option = {
-  <style lang="scss" scoped>
+    geo: [
-  
+      {
-  #chart2{
+        type: "map",
-    transform: rotateX(20deg);
+        map: mapName,
-  }
+        aspectScale: 1,
-  </style>
+        zoom: 1,
+        layoutCenter: ["50%", "51%"],
+        layoutSize: "80%",
+        roam: false,
+        label: {
+          emphasis: {
+            show: false
+          }
+        },
+        show: true,
+        map: mapName,
+        zoom: 1,
+        aspectScale: 1,
+        roam: false,
+        itemStyle: {
+          normal: {
+            areaColor: 'transparent',
+
+          },
+          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
+          }
+
+        },
+
+
+      },
+
+      {
+        type: "map",
+        map: mapName,
+        zlevel: -1,
+        aspectScale: 1,
+        zoom: 1,
+        layoutCenter: ["50%", "51%"],
+        layoutSize: "81%",
+        roam: false,
+        silent: true,
+
+        itemStyle: {
+          normal: {
+            borderWidth: 1,
+            borderColor: "rgba(17, 149, 216,0.6)",
+            borderColor: "#5AD0E0",
+            shadowColor: "rgba(172, 122, 255,0.5)",
+            shadowOffsetY: 5,
+            shadowBlur: 15,
+            areaColor: "rgba(5,21,35,0.1)",
+          },
+        },
+      },
+
+
+      {
+        type: "map",
+        map: mapName,
+        zlevel: -1,
+        aspectScale: 1,
+        zoom: 1,
+        layoutCenter: ["50%", "52%"],
+        layoutSize: "82%",
+        roam: false,
+        silent: true,
+
+        itemStyle: {
+          normal: {
+            borderWidth: 1,
+            borderColor: "rgba(17, 149, 216,0.6)",
+            borderColor: "#5AD0E0",
+            shadowColor: "rgba(172, 122, 255,0.5)",
+            shadowOffsetY: 5,
+            shadowBlur: 15,
+            areaColor: "rgba(5,21,35,0.1)",
+          },
+        },
+      },
+
+
+      {
+        type: "map",
+        map: mapName,
+        zlevel: -2,
+        aspectScale: 1,
+        zoom: 1,
+        layoutCenter: ["50%", "53%"],
+        layoutSize: "83%",
+        roam: false,
+        silent: true,
+
+        itemStyle: {
+          normal: {
+            borderWidth: 1,
+            borderColor: "rgba(17, 149, 216,0.4)",
+            borderColor: "#5AD0E0",
+            shadowColor: "rgba(172, 122, 255,0.5)",
+            shadowOffsetY: 5,
+            shadowBlur: 15,
+            areaColor: "rgba(5,21,35,0.1)",
+          },
+        },
+      },
+
+      {
+        type: "map",
+        map: mapName,
+        zlevel: -4,
+        aspectScale: 1,
+        zoom: 1,
+        layoutCenter: ["50%", "54%"],
+        layoutSize: "84%",
+        roam: false,
+        silent: true,
+
+        itemStyle: {
+          normal: {
+            borderWidth: 5,
+            // borderColor: "rgba(11, 43, 97,0.8)",
+            borderColor: "rgba(5,9,57,0.8)",
+            shadowColor: "rgba(29, 111, 165,0.8)",
+            shadowOffsetY: 15,
+            shadowBlur: 10,
+            areaColor: "rgba(5,21,35,0.1)",
+          },
+        },
+      },
+
+
+
+    ],
+    series: [
+      {
+        name: '资产数',
+        type: 'effectScatter',
+        coordinateSystem: 'geo',
+        rippleEffect: {
+          period: 4, //动画时间，值越小速度越快
+          brushType: 'fill', //波纹绘制方式 stroke, fill
+          scale: 12, //波纹圆环最大限制，值越大波纹越大
+          number: 2,
+        },
+
+        // 发散点的大小
+        symbolSize: function (val) {
+          return 4
+          // return val[2] / 10;
+        },
+        markPoint: {
+          data: pointerFn()
+        },
+
+        data: (() => {
+          return
+          let data = {
+            资产数: geoJson.center
+
+          }
+          let finalData = []
+          Object.keys(data).map((i, index) => {
+            let child = data[i].map((row, index) => ({
+              value: row,
+              itemStyle: {
+                color: index == geoJson.center.length - 1 ? '#FEB821' : '#F0733A',
+              },
+            }))
+
+            finalData = [...finalData, ...child]
+          })
+          return finalData
+        })(),
+      },
+    ],
+  };
+  document.getElementById("farmerchart").removeAttribute('_echarts_instance_');
+
+  echarts.registerMap(mapName, townJson)
+  const bg = echarts.init(myChart)
+  bg.setOption(option);
+
+  bg.on('click', function (params) {
+    // mapClick()
+    console.log(params.name)
+
+  });
+
+})
+
+
+
+
+
+
+</script>

src/view/detail.vue

@@ -13,8 +13,8 @@
                 </video>
             </div>
         </div>
-        <div class="c">
+        <div class="center">
-            <div class="top">
+            <div class="top-c">
                 <div style="display: flex;justify-content: space-between;">
                     <div class="  c-top-tits"><span class="color-font" @click="router.push('/')">返回首页</span></div>
                     <div class="  c-top-tits"><span class="color-font">同谭政地块</span> </div>
@@ -84,11 +84,11 @@ const router=useRouter()
         }
     }
 
-    .c {
+    .center {
         width: 49vw;
         height: 93vh;
 
-        .top {
+        .top-c {
             margin-top: 1vh;
             width: 49vw;
             height: 61vh;