图层分析 样式调整

src/views/globalMap/RightMenu/LayerAnalysis.vue

@@ -9,11 +9,11 @@
     </div>
     <div class="box2">
       <div class="box2-title">各区县分布统计</div>
-      <Chart :option="chartOption1" style="width: 1200px; height: 370px" />
+      <Chart :option="chartOption1" style="width: 100%; height: 948px" />
     </div>
     <div class="box2">
       <div class="box2-title">类型统计</div>
-      <Chart :option="chartOption2" style="width: 100%; height: 422px; margin-top: 60px;" />
+      <Chart :option="chartOption2" style="width: 100%; height: 422px; margin-top: 60px" />
     </div>
   </div>
 </template>
@@ -83,6 +83,7 @@ watch(
     if (!dataList.value || dataList.value.length === 0 || checkedData.length === 0) {
       chartOption1.yAxis.data = [];
       chartOption1.series[0].data = [];
+      chartOption1.series[1].data = [];
       chartOption2.series[0].data = [];
       return;
     }
@@ -105,12 +106,35 @@ watch(
         }, []);
         let yData = [];
         let seriesData = [];
+        let seriesData2 = [];
+        let maxData = [];
+        let max = 0;
         mergedArray.forEach((item) => {
           yData.push(item.area);
           seriesData.push(item.num);
+          if (item.num === 0) {
+            seriesData2.push([item.num, null]);
+          } else {
+            seriesData2.push([item.num, item.area]);
+          }
+          if (item.num > max) {
+            max = item.num;
+          }
         });
+        if (max === 0) {
+          max = 50;
+        } else {
+          max = parseInt(new BigNumber(max).multipliedBy(new BigNumber(1.2)).toNumber());
+        }
+        for (let i = 0; i < seriesData.length; i++) {
+          maxData.push(max);
+        }
+
         chartOption1.yAxis.data = yData;
+        chartOption1.xAxis.max = max;
         chartOption1.series[0].data = seriesData;
+        chartOption1.series[1].data = seriesData2;
+        chartOption1.series[2].data = maxData;
       }
     });
     // 类型统计
@@ -188,8 +212,8 @@ const handleClick = (item) => {
 .title {
   font-size: 60px;
   position: absolute;
-  top: 12px;
-  left: 210px;
+  top: 30px;
+  left: 160px;
 }
 .box {
   display: flex;

src/views/globalMap/RightMenu/OnlinePlotting.vue

@@ -550,7 +550,7 @@ onMounted(() => {
 .title {
   font-size: 60px;
   position: absolute;
-  top: 20px;
+  top: 30px;
   left: 160px;
 }
 

src/views/globalMap/RightMenu/RainMonitor.vue

@@ -142,7 +142,7 @@
             <div class="text1">人口</div>
             <div class="text2">(万)</div>
           </div>
-          <div class="text3">{{ analyzeData.populationSize }}</div>
+          <div class="text4">{{ analyzeData.populationSize }}</div>
         </div>
       </div>
       <div class="data-item">
@@ -152,7 +152,7 @@
             <div class="text1">面积</div>
             <div class="text2">(km²)</div>
           </div>
-          <div class="text3">{{ analyzeData.areaSize }}</div>
+          <div class="text5">{{ analyzeData.areaSize }}</div>
         </div>
       </div>
       <div class="data-item">
@@ -162,7 +162,7 @@
             <div class="text1">GDP</div>
             <div class="text2">(亿)</div>
           </div>
-          <div class="text3">{{ analyzeData.GDP }}</div>
+          <div class="text6">{{ analyzeData.GDP }}</div>
         </div>
       </div>
     </div>
@@ -608,12 +608,47 @@ initData();
     display: flex;
     flex: 1;
     .item-right {
+      margin-left: 20px;
       .text-box {
         display: flex;
+        margin-bottom: 20px;
         .text1 {
-
+          font-size: 32px;
+          color: #ffffff;
+        }
+        .text2 {
+          font-size: 32px;
+          color: #a7ccdf;
+          margin-left: 5px;
         }
       }
+      .text3,
+      .text4,
+      .text5,
+      .text6 {
+        font-size: 38px;
+        font-family: BEBAS-1;
+        /* 设置字体透明 */
+        color: transparent;
+        /* 使用 -webkit-background-clip 属性将背景剪裁至文本形状 */
+        -webkit-background-clip: text;
+        /* 非Webkit内核浏览器需要使用标准前缀 */
+        background-clip: text;
+        /* 把当前元素设置为行内块，以便能够应用背景 */
+        display: inline-block;
+      }
+      .text3 {
+        background-image: linear-gradient(to bottom, #ffffff 20%, #e58400 100%);
+      }
+      .text4 {
+        background-image: linear-gradient(to bottom, #ffffff 20%, #6fe695 100%);
+      }
+      .text5 {
+        background-image: linear-gradient(to bottom, #ffffff 20%, #00fde8 100%);
+      }
+      .text6 {
+        background-image: linear-gradient(to bottom, #ffffff 20%, #2b72d6 100%);
+      }
     }
     .icon1,
     .icon2,
@@ -641,7 +676,7 @@ initData();
 .title {
   font-size: 60px;
   position: absolute;
-  top: 20px;
+  top: 30px;
   left: 160px;
 }
 </style>

src/views/globalMap/RightMenu/Reservoir.vue

@@ -109,7 +109,7 @@ initData();
 .title {
   font-size: 60px;
   position: absolute;
-  top: 20px;
+  top: 30px;
   left: 160px;
 }
 .custom-table {

src/views/globalMap/RightMenu/ReservoirMonitor.vue

@@ -235,7 +235,7 @@ const getVideoList = () => {
 .title {
   font-size: 60px;
   position: absolute;
-  top: 20px;
+  top: 30px;
   left: 160px;
 }
 

src/views/globalMap/RightMenu/RiverMonitor.vue

@@ -230,7 +230,7 @@ const handleShowDialog = (row) => {
 .title {
   font-size: 60px;
   position: absolute;
-  top: 20px;
+  top: 30px;
   left: 160px;
 }
 .detail-container {

src/views/globalMap/RightMenu/RoadNetworkVideo.vue

@@ -129,7 +129,7 @@ initData();
 .title {
   font-size: 60px;
   position: absolute;
-  top: 20px;
+  top: 30px;
   left: 160px;
 }
 </style>

src/views/globalMap/RightMenu/SpatialAnalysis.vue

@@ -118,7 +118,7 @@ const handleAnalysisData = (data) => {
 .title {
   font-size: 60px;
   position: absolute;
-  top: 20px;
+  top: 30px;
   left: 160px;
 }
 .analyze-data-container {

src/views/globalMap/RightMenu/UAV.vue

@@ -152,15 +152,6 @@ const plan_type = [
   }
 }
 
-.menu-content {
-  width: 1579px;
-  height: 1394px;
-  background: url('@/assets/images/map/rightMenu/content.png') no-repeat;
-  padding: 130px 20px 20px 20px;
-  font-size: 36px;
-  position: relative;
-  color: #000000;
-}
 .menu-content {
   width: 1579px;
   height: 1394px;
@@ -173,7 +164,7 @@ const plan_type = [
 .title {
   font-size: 60px;
   position: absolute;
-  top: 20px;
+  top: 30px;
   left: 160px;
 }
 

src/views/globalMap/RightMenu/WarningInfo.vue

@@ -311,7 +311,7 @@ export default defineComponent({
 .title {
   font-size: 60px;
   position: absolute;
-  top: 20px;
+  top: 30px;
   left: 160px;
 }
 

src/views/globalMap/RightMenu/echartOptions.ts

@@ -1,6 +1,7 @@
 import { graphic } from 'echarts';
 import pieIcon from '@/assets/images/map/rightMenu/pie-icon.png';
 import pieBg from '@/assets/images/map/rightMenu/pie-bg.png';
+import dotImg from '@/assets/images/map/rightMenu/LayerAnalysis/dot.png';
 // 降雨过程实况
 export const option1 = {
   xAxis: {
@@ -240,20 +241,94 @@ export const option3 = {
 
 // 各区县分布统计
 export const option4 = {
-  tooltip: {
-    show: true
+  grid: {
+    left: '10',
+    right: '140',
+    bottom: '0',
+    containLabel: true
   },
   xAxis: {
-    type: 'value'
+    type: 'value',
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#3C4550'
+      }
+    },
+    splitLine: {
+      show: false,
+      interval: 0,
+      lineStyle: {
+        // color: 'rgba(0, 0, 0, 0.1)'
+        color: '#ff0000'
+      }
+    },
+    axisLabel: {
+      color: '#A8CCDE',
+      fontFamily: 'Microsoft YaHei',
+      fontSize: '32'
+    }
   },
   yAxis: {
     type: 'category',
+    axisTick: false,
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#3C4550'
+      }
+    },
+    axisLabel: {
+      color: '#a8ccde',
+      fontFamily: 'PingFang SC',
+      fontSize: '32'
+    },
     data: []
   },
+  graphic: {
+    elements: [
+      {
+        type: 'text',
+        right: '30', // 这里指定了文本在容器的左侧
+        bottom: '0', // 可以根据需要调整位置
+        style: {
+          text: '数量', // 你要显示的文本
+          fill: '#A8CCDE', // 文本颜色
+          fontSize: 32 // 文本大小
+        }
+      }
+    ]
+  },
   series: [
     {
-      data: [],
-      type: 'bar'
+      type: 'bar',
+      barWidth: 14,
+      itemStyle: {
+        color: '#247dff'
+      },
+      data: []
+    },
+    {
+      type: 'scatter',
+      symbol: 'image://' + dotImg,
+      symbolSize: 95,
+      symbolOffset: [0, -16],
+      label: {
+        show: false
+      },
+      itemStyle: {
+        color: '#ff0000'
+      },
+      data: []
+    },
+    {
+      type: 'bar',
+      barWidth: 45,
+      itemStyle: {
+        color: 'rgba(0, 255, 255, 0.08)'
+      },
+      barGap: '-100%',
+      data: []
     }
   ]
 };
@@ -312,7 +387,6 @@ export const option5 = {
 
 // 水利站点降雨分布统计
 export const option6 = {
-  legend: {},
   grid: {
     left: '50',
     right: '60',

src/views/globalMap/RightMenu/index.vue

@@ -111,6 +111,11 @@ const handleMenu = (name) => {
 // 新增菜单 type 1 新增 2 删除
 const updateMenu = (type, menu) => {
   if (type === '1') {
+    if (menu.name === '图层分析') {
+
+    } else {
+
+    }
     menuState.menuData.push(menu);
     clickMenu(menuState.menuData.length - 1);
   } else if (type === '2') {