地图柱状图

src/views/screen/compenonts/leftwrapper.vue

@@ -94,7 +94,7 @@ const row1Options = ref({
       }
     },
     {
-      name: '主要任务类型占比',
+      name: '任务类型占比',
       type: 'scatter',
       data: [100, 90, 10, 90, 90, 20, 56, 89],
       symbol:

src/views/screen/compenonts/map.vue

@@ -134,7 +134,7 @@ const mapOption: any = ref({
         fontWeight: 'bold',
         fontSize: 14,
         fontStyle: 'italic',
-        formatter: (v) => {
+        formatter: () => {
           return `AQI 25`
         }
       },
@@ -321,7 +321,10 @@ const initMap = () => {
         color: '#fff',
         fontSize: 10
       },
-      data: [dataItem.name]
+      nameTextStyle: {
+        color: '#fff'
+      },
+      data: [dataItem.name, '']
     })
     //针对每个城市数据添加y轴
     mapOption.value.yAxis.push({
@@ -366,12 +369,53 @@ const initMap = () => {
       itemStyle: {
         color: '#56ca00'
       },
-	    label: {
-		    show: true,
-		    position: 'top',
-		    color: '#fff'
-	    },
-      data: [value1]
+      label: {
+        show: true,
+        position: 'top',
+        color: '#fff'
+      },
+      data: [
+        {
+          value: value1,
+          itemStyle: {
+            color: 'rgba(251, 233, 71, 1)'
+          }
+        },
+        {
+          value: value2,
+          itemStyle: {
+            color: 'rgba(88, 215, 100, 1)'
+          }
+        }
+      ]
+    })
+    mapOption.value.series.push({
+      name: `${dataItem.name}1`,
+      type: 'pictorialBar',
+      coordinateSystem: 'cartesian2d',
+      xAxisIndex: idx,
+      yAxisIndex: idx,
+      symbolSize: [6,3],
+      symbolOffset: [0, -1],
+      symbolPosition: 'end',
+      symbol: 'circle',
+      label: {
+        show: false,
+      },
+      data: [
+        {
+          value: value1,
+          itemStyle: {
+            color: 'rgba(251, 233, 71, 1)'
+          }
+        },
+        {
+          value: value2,
+          itemStyle: {
+            color: 'rgba(88, 215, 100, 1)'
+          }
+        }
+      ]
     })
     mapOption.value.series.push({
       name: `${dataItem.name}2`,
@@ -381,17 +425,88 @@ const initMap = () => {
       yAxisIndex: idx,
       zLevel: 3,
       barWidth: 6,
-      itemStyle: {
-        color: '#ffe700',
-	      fontSize:10,
-      },
       label: {
-        show: true,
+        show: false,
         position: 'top',
         color: '#fff'
       },
-      data: [value2]
+      barGap: '-100%',
+      data: [
+        {
+          value: 100,
+          itemStyle: {
+            color: 'rgba(251, 233, 71, .2)'
+          }
+        },
+        {
+          value: 100,
+          itemStyle: {
+            color: 'rgba(88, 215, 100, .2)'
+          }
+        }
+      ]
+    })
+    mapOption.value.series.push({
+      name: `${dataItem.name}3`,
+      type: 'pictorialBar',
+      coordinateSystem: 'cartesian2d',
+      xAxisIndex: idx,
+      yAxisIndex: idx,
+      symbolPosition: 'end',
+      symbol: 'circle',
+      zLevel: 3,
+      label: {
+        show: false,
+      },
+      symbolSize: [6,3],
+      symbolOffset: [0, -1],
+      barGap: '-100%',
+      data: [
+        {
+          value: 100,
+          itemStyle: {
+            color: 'rgba(251, 233, 71, .2)'
+          }
+        },
+        {
+          value: 100,
+          itemStyle: {
+            color: 'rgba(88, 215, 100, .2)'
+          }
+        }
+      ]
+    })
+    mapOption.value.series.push({
+      name: `${dataItem.name}3`,
+      type: 'pictorialBar',
+      coordinateSystem: 'cartesian2d',
+      xAxisIndex: idx,
+      yAxisIndex: idx,
+      zLevel: 3,
+      symbolPosition: 'end',
+      symbol: 'circle',
+      label: {
+        show: false,
+      },
+      barGap: '-100%',
+      symbolSize: [6,3],
+      symbolOffset: [0, -1],
+      data: [
+        {
+          value: 0,
+          itemStyle: {
+            color: 'rgba(251, 233, 71, 1)'
+          }
+        },
+        {
+          value: 0,
+          itemStyle: {
+            color: 'rgba(88, 215, 100, 1)'
+          }
+        }
+      ]
     })
+  
   })
 }
 
@@ -411,6 +526,7 @@ onUnmounted(() => {
   position: relative;
   width: 100%;
   height: 100%;
+
   &::before {
     content: '';
     position: absolute;
@@ -421,6 +537,7 @@ onUnmounted(() => {
     background-position: center;
     //animation: rotate 5s linear infinite;
   }
+
   &::after {
     content: '';
     position: absolute;
@@ -431,6 +548,7 @@ onUnmounted(() => {
     background-position: center;
     //animation: rotate 5s linear infinite;
   }
+
   .map {
     position: absolute;
     inset: 0;
@@ -438,35 +556,41 @@ onUnmounted(() => {
     flex-flow: column nowrap;
     padding: 12px;
   }
+
   .air-quality {
     position: absolute;
     left: 12px;
     top: 0;
   }
+
   .nomr-box {
     position: absolute;
     right: 12px;
     top: 50%;
     transform: translateY(-50%);
   }
+
   .weather {
     position: absolute;
     left: 50%;
     top: 0;
     transform: translateX(-50%);
   }
+
   .num-box {
     position: absolute;
     right: 12px;
     top: 0;
   }
+
   .tabber-box {
     position: absolute;
     left: 50%;
     bottom: 0;
     transform: translateX(-50%);
-    z-index: 2;
+    z-index: 3;
   }
+
   .block-box {
     border: 1px solid rgba(255, 255, 255, 0.15);
     background: rgba(255, 255, 255, 0.02);
@@ -474,13 +598,16 @@ onUnmounted(() => {
     z-index: 2;
   }
 }
+
 @keyframes rotate {
   from {
     transform: rotateX(0deg) rotateZ(0);
   }
+
   50% {
     transform: rotateX(-30deg) rotateZ(30deg);
   }
+
   to {
     transform: rotateX(0deg) rotateZ(0deg);
   }

src/views/screen/compenonts/tabber.vue

@@ -17,6 +17,7 @@
         v-for="(item, index) in tabberList"
         :key="index"
         @click="curTab = index"
+        style="padding: 12px 16px;"
       >
         {{ item }}
       </section>
@@ -50,16 +51,15 @@ const curTab = ref(0)
   flex-flow: row nowrap;
   gap: 8px;
   width: fit-content;
+  font-size: 12px;
   .item {
-	  font-size: 1rem;
 	  padding: 6px;
     white-space: nowrap;
     border: 1px solid rgba(255, 255, 255, 0.15);
 	  transition: .2s all;
   }
 	.type-item{
-		font-size: 1rem;
-		padding: 8px;
+		padding: 6px 16px;
 		white-space: nowrap;
 		border: 1px solid rgba(255, 255, 255, 0.15);
 		transition: .2s all;