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 } |