Commit e2795c645ec983941914ae443c77edda4b328e74
1 parent
320f15b6
perf(src/packages): 图表地图组件新增返回按钮显示隐藏和自定义颜色
Showing
3 changed files
with
40 additions
and
3 deletions
@@ -14,6 +14,8 @@ export const enum areaEnum { | @@ -14,6 +14,8 @@ export const enum areaEnum { | ||
14 | export const includes = [] | 14 | export const includes = [] |
15 | 15 | ||
16 | export const option = { | 16 | export const option = { |
17 | + iconColor:'black', | ||
18 | + showIcon:false, | ||
17 | drillingIn: false, | 19 | drillingIn: false, |
18 | dataset: dataJson, | 20 | dataset: dataJson, |
19 | mapRegion: { | 21 | mapRegion: { |
@@ -8,6 +8,20 @@ | @@ -8,6 +8,20 @@ | ||
8 | <n-switch v-model:value="optionData.drillingIn" size="small"></n-switch> | 8 | <n-switch v-model:value="optionData.drillingIn" size="small"></n-switch> |
9 | </SettingItem> | 9 | </SettingItem> |
10 | </SettingItemBox> | 10 | </SettingItemBox> |
11 | + <SettingItemBox name="显示返回图标"> | ||
12 | + <SettingItem name=""> | ||
13 | + <n-switch v-model:value="optionData.showIcon" size="small"></n-switch> | ||
14 | + </SettingItem> | ||
15 | + </SettingItemBox> | ||
16 | + <SettingItemBox name="返回图标颜色"> | ||
17 | + <SettingItem name=""> | ||
18 | + <n-color-picker | ||
19 | + size="small" | ||
20 | + :modes="['hex']" | ||
21 | + v-model:value="optionData.iconColor" | ||
22 | + ></n-color-picker> | ||
23 | + </SettingItem> | ||
24 | + </SettingItemBox> | ||
11 | <SettingItemBox name="区域颜色"> | 25 | <SettingItemBox name="区域颜色"> |
12 | <SettingItem name="0%处颜色"> | 26 | <SettingItem name="0%处颜色"> |
13 | <n-color-picker | 27 | <n-color-picker |
@@ -69,7 +69,7 @@ const option = reactive({ | @@ -69,7 +69,7 @@ const option = reactive({ | ||
69 | value: mergeTheme(props.chartConfig.option, props.themeSetting, includes) | 69 | value: mergeTheme(props.chartConfig.option, props.themeSetting, includes) |
70 | }) | 70 | }) |
71 | 71 | ||
72 | -const toolBoxOption = { | 72 | +const toolBoxOption = ref({ |
73 | show: true, | 73 | show: true, |
74 | right: 20, | 74 | right: 20, |
75 | feature: { | 75 | feature: { |
@@ -77,14 +77,35 @@ const toolBoxOption = { | @@ -77,14 +77,35 @@ const toolBoxOption = { | ||
77 | show: true, | 77 | show: true, |
78 | title: '返回', | 78 | title: '返回', |
79 | icon: iconStr.value, | 79 | icon: iconStr.value, |
80 | + iconStyle: { | ||
81 | + color: '' | ||
82 | + }, | ||
80 | onclick: () => watchAdcode() | 83 | onclick: () => watchAdcode() |
81 | } | 84 | } |
82 | } | 85 | } |
83 | -} | 86 | +}) |
84 | 87 | ||
88 | +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 | ||
101 | + }, | ||
102 | + { | ||
103 | + deep: true | ||
104 | + } | ||
105 | +) | ||
85 | props.chartConfig.option = { | 106 | props.chartConfig.option = { |
86 | ...props.chartConfig.option, | 107 | ...props.chartConfig.option, |
87 | - ...{ toolbox: toolBoxOption } | 108 | + ...{ toolbox: toolBoxOption.value } |
88 | } | 109 | } |
89 | 110 | ||
90 | //地图点击返回 | 111 | //地图点击返回 |