柱状图

.env.local

@@ -4,9 +4,10 @@ NODE_ENV=development
 VITE_DEV=true
 
 # 请求路径
-VITE_BASE_URL='http://localhost:48080'
-#VITE_BASE_URL='http://188.188.4.176:48080'
-#VITE_BASE_URL='http://192.168.2.63:48080'
+#VITE_BASE_URL='http://localhost:48080'
+#VITE_BASE_URL='http://188.188.3.232:48080'
+# VITE_BASE_URL='http://188.188.5.188:48080'
+VITE_BASE_URL='https://hb.jzce.com'
 
 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务
 VITE_UPLOAD_TYPE=server

src/views/screen/compenonts/map.vue

@@ -145,6 +145,7 @@ const handlerResize = () => {
 
 const initMap = () => {
   const chartInstance = unref(mapChartRef).getChartRef()
+  const BARWIDTH = 10
   echarts.util.each(mapPoint, (dataItem, id) => {
     //获取对应城市的经纬度
     const geoCoord = dataItem.value.reverse()
@@ -196,8 +197,8 @@ const initMap = () => {
     })
     mapOption.value.grid.push({
       id: idx,
-      width: 20,
-      height: 80,
+      width: 30,
+      height: 60,
       left: coord[0] - 10,
       top: coord[1] - 65,
       zLevel: 0
@@ -210,7 +211,7 @@ const initMap = () => {
       xAxisIndex: idx,
       yAxisIndex: idx,
       zLevel: 3,
-      barWidth: 6,
+      barWidth: BARWIDTH,
       itemStyle: {
         borderRadius: [3, 3, 0, 0]
       },
@@ -242,6 +243,7 @@ const initMap = () => {
         }
       ]
     })
+
     // 背景柱状图
     mapOption.value.series.push({
       name: `${dataItem.name}2`,
@@ -249,23 +251,25 @@ const initMap = () => {
       coordinateSystem: 'cartesian2d',
       xAxisIndex: idx,
       yAxisIndex: idx,
-      zLevel: 2,
-      barWidth: 6,
-      barGap: '-100%',
-      itemStyle: {
-        borderRadius: [3, 3, 0, 0]
+      zLevel: 3,
+      barWidth: BARWIDTH,
+      label: {
+        show: false,
+        position: 'top',
+        color: '#fff'
       },
+      barGap: '-100%',
       data: [
         {
           value: 100,
           itemStyle: {
-            color: 'rgba(251, 233, 71, 0.05)'
+            color: 'rgba(251, 233, 71, .2)'
           }
         },
         {
           value: 100,
           itemStyle: {
-            color: 'rgba(88, 215, 100, 0.05)'
+            color: 'rgba(88, 215, 100, .2)'
           }
         }
       ]
@@ -277,7 +281,7 @@ const initMap = () => {
       coordinateSystem: 'cartesian2d',
       xAxisIndex: idx,
       yAxisIndex: idx,
-      symbolSize: [6, 2],
+      symbolSize: [BARWIDTH, 2],
       symbolOffset: [0, 0],
       symbolPosition: 'end',
       symbol: 'circle',
@@ -297,35 +301,7 @@ const initMap = () => {
         }
       ]
     })
-    mapOption.value.series.push({
-      name: `${dataItem.name}2`,
-      type: 'bar',
-      coordinateSystem: 'cartesian2d',
-      xAxisIndex: idx,
-      yAxisIndex: idx,
-      zLevel: 3,
-      barWidth: 6,
-      label: {
-        show: false,
-        position: 'top',
-        color: '#fff'
-      },
-      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',
@@ -336,9 +312,9 @@ const initMap = () => {
       symbol: 'circle',
       zLevel: 3,
       label: {
-        show: false,
+        show: false
       },
-      symbolSize: [6, 3],
+      symbolSize: [BARWIDTH, 3],
       symbolOffset: [0, -1],
       barGap: '-100%',
       data: [
@@ -356,6 +332,7 @@ const initMap = () => {
         }
       ]
     })
+	  // 背景顶部底部装饰
     mapOption.value.series.push({
       name: `${dataItem.name}3`,
       type: 'pictorialBar',
@@ -366,10 +343,10 @@ const initMap = () => {
       symbolPosition: 'end',
       symbol: 'circle',
       label: {
-        show: false,
+        show: false
       },
       barGap: '-100%',
-      symbolSize: [6, 3],
+      symbolSize: [BARWIDTH, 3],
       symbolOffset: [0, -1],
       data: [
         {
@@ -386,7 +363,6 @@ const initMap = () => {
         }
       ]
     })
-
   })
 }
 
@@ -501,6 +477,4 @@ onUnmounted(() => {
     }
   }
 }
-
-
 </style>