Commit 0f3a6079b4103f755232648f124b136776a94a41
1 parent
e2795c64
perf(src/packages): 图表地图组件新增返回按钮显示隐藏和自定义颜色和距离
Showing
3 changed files
with
30 additions
and
13 deletions
| @@ -16,6 +16,8 @@ export const includes = [] | @@ -16,6 +16,8 @@ export const includes = [] | ||
| 16 | export const option = { | 16 | export const option = { | 
| 17 | iconColor:'black', | 17 | iconColor:'black', | 
| 18 | showIcon:false, | 18 | showIcon:false, | 
| 19 | + iconDistanceRight:20, | ||
| 20 | + iconDistanceTop:20, | ||
| 19 | drillingIn: false, | 21 | drillingIn: false, | 
| 20 | dataset: dataJson, | 22 | dataset: dataJson, | 
| 21 | mapRegion: { | 23 | mapRegion: { | 
| @@ -22,6 +22,24 @@ | @@ -22,6 +22,24 @@ | ||
| 22 | ></n-color-picker> | 22 | ></n-color-picker> | 
| 23 | </SettingItem> | 23 | </SettingItem> | 
| 24 | </SettingItemBox> | 24 | </SettingItemBox> | 
| 25 | + <SettingItemBox name="返回图标距离"> | ||
| 26 | + <SettingItem name="距右"> | ||
| 27 | + <n-input-number | ||
| 28 | + v-model:value="optionData.iconDistanceRight" | ||
| 29 | + :min="1" | ||
| 30 | + size="small" | ||
| 31 | + placeholder="请输入" | ||
| 32 | + ></n-input-number> | ||
| 33 | + </SettingItem> | ||
| 34 | + <SettingItem name="距上"> | ||
| 35 | + <n-input-number | ||
| 36 | + v-model:value="optionData.iconDistanceTop" | ||
| 37 | + :min="1" | ||
| 38 | + size="small" | ||
| 39 | + placeholder="请输入" | ||
| 40 | + ></n-input-number> | ||
| 41 | + </SettingItem> | ||
| 42 | + </SettingItemBox> | ||
| 25 | <SettingItemBox name="区域颜色"> | 43 | <SettingItemBox name="区域颜色"> | 
| 26 | <SettingItem name="0%处颜色"> | 44 | <SettingItem name="0%处颜色"> | 
| 27 | <n-color-picker | 45 | <n-color-picker | 
| @@ -71,7 +71,8 @@ const option = reactive({ | @@ -71,7 +71,8 @@ const option = reactive({ | ||
| 71 | 71 | ||
| 72 | const toolBoxOption = ref({ | 72 | const toolBoxOption = ref({ | 
| 73 | show: true, | 73 | show: true, | 
| 74 | - right: 20, | 74 | + right: 110, | 
| 75 | + top: 20, | ||
| 75 | feature: { | 76 | feature: { | 
| 76 | myFullButton: { | 77 | myFullButton: { | 
| 77 | show: true, | 78 | show: true, | 
| @@ -86,23 +87,19 @@ const toolBoxOption = ref({ | @@ -86,23 +87,19 @@ const toolBoxOption = ref({ | ||
| 86 | }) | 87 | }) | 
| 87 | 88 | ||
| 88 | watch( | 89 | watch( | 
| 89 | - () => props.chartConfig.option.iconColor, | ||
| 90 | - (newData: string) => { | ||
| 91 | - toolBoxOption.value.feature.myFullButton.iconStyle.color = newData | ||
| 92 | - }, | ||
| 93 | - { | ||
| 94 | - deep: true | ||
| 95 | - } | ||
| 96 | -) | ||
| 97 | -watch( | ||
| 98 | - () => props.chartConfig.option.showIcon, | ||
| 99 | - (newData: boolean) => { | ||
| 100 | - toolBoxOption.value.feature.myFullButton.show = newData | 90 | + () => props.chartConfig.option, | 
| 91 | + newData => { | ||
| 92 | + const { iconColor, showIcon, iconDistanceRight, iconDistanceTop } = newData | ||
| 93 | + toolBoxOption.value.feature.myFullButton.show = showIcon | ||
| 94 | + toolBoxOption.value.feature.myFullButton.iconStyle.color = iconColor | ||
| 95 | + toolBoxOption.value.right = iconDistanceRight | ||
| 96 | + toolBoxOption.value.top = iconDistanceTop | ||
| 101 | }, | 97 | }, | 
| 102 | { | 98 | { | 
| 103 | deep: true | 99 | deep: true | 
| 104 | } | 100 | } | 
| 105 | ) | 101 | ) | 
| 102 | + | ||
| 106 | props.chartConfig.option = { | 103 | props.chartConfig.option = { | 
| 107 | ...props.chartConfig.option, | 104 | ...props.chartConfig.option, | 
| 108 | ...{ toolbox: toolBoxOption.value } | 105 | ...{ toolbox: toolBoxOption.value } |