Explorar el Código

feat: 丰富地图配置

蒋承 hace 3 años
padre
commit
ac85b72be8

+ 11 - 7
src/packages/components/Charts/Maps/MapBase/config.ts

@@ -95,19 +95,23 @@ export const option = {
       geoIndex: 1,
       tooltip: {
         show: true,
-        backgroundColor: 'rgba(0,0,0,.6)',
-        borderColor: 'rgba(147, 235, 248, .8)',
+        backgroundColor: '#00000060',
+        borderColor: 'rgba(147, 235, 248, 0.8)',
         textStyle: {
-          color: '#FFF'
+          color: '#FFFFFF',
+          fontSize: 12,
         }
       },
       label: {
-        show: false
+        show: false,
+        color: '#FFFFFF',
+        fontSize: 12,
       },
       emphasis: {
         disabled: false,
         label: {
-          color: '#fffFFF'
+          color: '#FFFFFF',
+          fontSize: 12,
         },
         itemStyle: {
           areaColor: '#389BB7',
@@ -126,11 +130,11 @@ export const option = {
           colorStops: [
             {
               offset: 0,
-              color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
+              color: '#93ebf800' // 0% 处的颜色
             },
             {
               offset: 1,
-              color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
+              color: '#93ebf820' // 100% 处的颜色
             }
           ],
           globalCoord: false

+ 66 - 4
src/packages/components/Charts/Maps/MapBase/config.vue

@@ -14,7 +14,7 @@
       </SettingItem>
     </SettingItemBox>
 
-    <SettingItemBox name="区域颜色" :alone="true">
+    <SettingItemBox name="区域颜色">
       <SettingItem name="0%处颜色">
         <n-color-picker
           size="small"
@@ -61,7 +61,31 @@
         ></n-input-number>
       </SettingItem>
     </SettingItemBox>
-    <SettingItemBox name="聚焦 (预览可见)">
+
+    <SettingItemBox name="省级名称">
+      <setting-item name="显示">
+        <n-space>
+          <n-switch v-model:value="seriesList[1].label.show" size="small"></n-switch>
+        </n-space>
+      </setting-item>
+      <SettingItem name="字体颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="seriesList[1].label.color"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="字体大小">
+        <n-input-number
+          v-model:value="seriesList[1].label.fontSize"
+          :min="1"
+          size="small"
+          placeholder="请输入字体大小"
+        ></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+
+    <SettingItemBox name="悬浮 (预览可见)">
       <setting-item name="禁用">
         <n-space>
           <n-switch v-model:value="seriesList[1].emphasis.disabled" size="small"></n-switch>
@@ -74,6 +98,14 @@
           v-model:value="seriesList[1].emphasis.itemStyle.areaColor"
         ></n-color-picker>
       </SettingItem>
+      <SettingItem name="字体大小">
+        <n-input-number
+          v-model:value="seriesList[1].emphasis.label.fontSize"
+          :min="1"
+          size="small"
+          placeholder="请输入字体大小"
+        ></n-input-number>
+      </SettingItem>
       <SettingItem name="阴影">
         <n-color-picker
           size="small"
@@ -97,7 +129,37 @@
         ></n-color-picker>
       </SettingItem>
     </SettingItemBox>
-    <SettingItemBox name="边框">
+    
+    <SettingItemBox name="悬浮弹窗">
+      <SettingItem name="显示">
+        <n-space>
+          <n-switch v-model:value="seriesList[1].tooltip.show" size="small"></n-switch>
+        </n-space>
+      </SettingItem>
+      <SettingItem name="字体大小">
+        <n-input-number
+          v-model:value="seriesList[1].tooltip.textStyle.fontSize"
+          :min="1"
+          size="small"
+          placeholder="请输入字体大小"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="字体颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="seriesList[1].tooltip.textStyle.color"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="背景颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="seriesList[1].tooltip.backgroundColor"
+        ></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="区域边框">
       <SettingItem name="颜色">
         <n-color-picker
           size="small"
@@ -105,7 +167,7 @@
           v-model:value="seriesList[1].itemStyle.borderColor"
         ></n-color-picker>
       </SettingItem>
-      <SettingItem name="大小">
+      <SettingItem name="宽度大小">
         <n-input-number
           v-model:value="seriesList[1].itemStyle.borderWidth"
           :min="1"