src/components/centerMap.vue

@@ -46,9 +46,9 @@ const chartsData = reactive({
     geo3D: {
       map: mapName.value,
       roam: true,
-      zoom: 1.2,
+      zoom: 0.9,
       show: true,
-      zlevel: -1, // 必须设置，
+      zlevel: -2, // 必须设置，
       viewControl: {
         distance: 110,
         alpha: 60,
@@ -62,7 +62,7 @@ const chartsData = reactive({
       },
       itemStyle: {
         // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
-        color: 'rgba(75,255,180,0.2)', // 地图板块的颜色
+        color: 'rgba(48,160,187,0.8)', // 地图板块的颜色
         opacity: 1, // 图形的不透明度 [ default: 1 ]
         borderWidth: 1.5, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
         borderColor: '#4bffb4', // 图形描边的颜色。[ default: #333 ]
@@ -88,7 +88,19 @@ const chartsData = reactive({
           color: '#fff',
         },
         itemStyle: {
-          color: 'rgba(75,255,180,0.3)', // 地图板块的颜色
+          // show: false,
+          color: {
+            type: 'linear', // 线性渐变
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              { offset: 0, color: '#45bfe9' },
+              { offset: 1, color: '#01589c' },
+            ],
+            global: false, // 默认为 false
+          },
         },
       },
     },
@@ -140,7 +152,7 @@ const chartsData = reactive({
       show: true,
       itemStyle: {
         // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
-        color: 'rgba(75,255,180,0.2)', // 地图板块的颜色
+        color: 'rgba(48,160,187,0.8)', // 地图板块的颜色
         opacity: 1, // 图形的不透明度 [ default: 1 ]
         borderWidth: 1.5, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
         borderColor: 'rgba(92, 184, 238, 1)', // 图形描边的颜色。[ default: #333 ]
@@ -159,27 +171,27 @@ const chartsData = reactive({
           borderColor: '#000',
         },
       },
-      // emphasis: {
-      //   //高亮状态的效果
-      //   label: {
-      //     show: true,
-      //     color: '#fff',
-      //   },
-      //   itemStyle: {
-      //     // show: false,
-      //     areaColor: {
-      //       type: 'linear',
-      //       x: 0,
-      //       y: 0,
-      //       x2: 1,
-      //       y2: 0,
-      //       colorStops: [
-      //         { offset: 0, color: '#4bffb4' },
-      //         { offset: 1, color: '#4bffb4' },
-      //       ],
-      //     },
-      //   },
-      // },
+      emphasis: {
+        //高亮状态的效果
+        label: {
+          show: true,
+          color: '#fff',
+        },
+        itemStyle: {
+          // show: false,
+          color: {
+            type: 'linear', // 线性渐变
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              { offset: 0, color: '#45bfe9' },
+              { offset: 1, color: '#01589c' },
+            ],
+          },
+        },
+      },
     },
     // 闪烁散点图系列
     {
@@ -246,8 +258,8 @@ div {
     max-height: 1000px;
   }
   .map-pos {
-    width: 100%;
-    height: 100%;
+    width: 80%;
+    height: 80%;
     position: absolute;
     bottom: 0;
     left: 50%;

src/components/subTop.vue

@@ -70,7 +70,7 @@ watch(
     letter-spacing: 4px;
     text-shadow: -2px 0 0 1px #add8f1;
     width: 100%;
-    padding: 0 36px 0 72px;
+    padding: 0 36px;
     box-sizing: border-box;
     position: absolute;
     left: 0;