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 | //地图点击返回 |