Commit 0f3a6079b4103f755232648f124b136776a94a41

Authored by fengwotao
1 parent e2795c64

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

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