feat: 丰富地图配置

This commit is contained in:
蒋承 2022-09-29 12:37:19 +08:00
parent dad4d41894
commit ac85b72be8
2 changed files with 77 additions and 11 deletions

View File

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

View File

@ -14,7 +14,7 @@
</SettingItem> </SettingItem>
</SettingItemBox> </SettingItemBox>
<SettingItemBox name="区域颜色" :alone="true"> <SettingItemBox name="区域颜色">
<SettingItem name="0%处颜色"> <SettingItem name="0%处颜色">
<n-color-picker <n-color-picker
size="small" size="small"
@ -61,7 +61,31 @@
></n-input-number> ></n-input-number>
</SettingItem> </SettingItem>
</SettingItemBox> </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="禁用"> <setting-item name="禁用">
<n-space> <n-space>
<n-switch v-model:value="seriesList[1].emphasis.disabled" size="small"></n-switch> <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" v-model:value="seriesList[1].emphasis.itemStyle.areaColor"
></n-color-picker> ></n-color-picker>
</SettingItem> </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="阴影"> <SettingItem name="阴影">
<n-color-picker <n-color-picker
size="small" size="small"
@ -97,7 +129,37 @@
></n-color-picker> ></n-color-picker>
</SettingItem> </SettingItem>
</SettingItemBox> </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="颜色"> <SettingItem name="颜色">
<n-color-picker <n-color-picker
size="small" size="small"
@ -105,7 +167,7 @@
v-model:value="seriesList[1].itemStyle.borderColor" v-model:value="seriesList[1].itemStyle.borderColor"
></n-color-picker> ></n-color-picker>
</SettingItem> </SettingItem>
<SettingItem name="大小"> <SettingItem name="宽度大小">
<n-input-number <n-input-number
v-model:value="seriesList[1].itemStyle.borderWidth" v-model:value="seriesList[1].itemStyle.borderWidth"
:min="1" :min="1"