Commit e2795c645ec983941914ae443c77edda4b328e74

Authored by fengwotao
1 parent 320f15b6

perf(src/packages): 图表地图组件新增返回按钮显示隐藏和自定义颜色

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