Commit 9478781fcb6016cb5f559e135c53d0c6be41a6e6
1 parent
221c5cd4
perf: DEFECT-705 adjust chart value font size
Showing
2 changed files
with
25 additions
and
19 deletions
@@ -21,6 +21,7 @@ | @@ -21,6 +21,7 @@ | ||
21 | fontSize, | 21 | fontSize, |
22 | } from '../../detail/config/util'; | 22 | } from '../../detail/config/util'; |
23 | import { Tooltip } from 'ant-design-vue'; | 23 | import { Tooltip } from 'ant-design-vue'; |
24 | + import { useThrottleFn } from '@vueuse/shared'; | ||
24 | 25 | ||
25 | const props = defineProps({ | 26 | const props = defineProps({ |
26 | add: { | 27 | add: { |
@@ -81,23 +82,28 @@ | @@ -81,23 +82,28 @@ | ||
81 | return (_radio: number) => {}; | 82 | return (_radio: number) => {}; |
82 | }; | 83 | }; |
83 | 84 | ||
84 | - watch( | ||
85 | - () => props.value.value, | ||
86 | - (newValue) => { | ||
87 | - const updateFn = getUpdateValueFn(props.layout.componentType); | ||
88 | - unref(chartRef)?.setOption((updateFn(newValue || 0) as unknown as EChartsOption) || {}); | ||
89 | - } | ||
90 | - ); | ||
91 | - | ||
92 | - watch( | ||
93 | - () => props.radio, | ||
94 | - () => { | ||
95 | - const option = beforeUpdateFn(props.layout.componentType); | ||
96 | - setTimeout(() => { | ||
97 | - unref(chartRef)?.setOption((option(unref(getRadio)) as unknown as EChartsOption) || {}); | ||
98 | - }); | ||
99 | - } | ||
100 | - ); | 85 | + const updateChartValue = useThrottleFn((newValue) => { |
86 | + const updateFn = getUpdateValueFn(props.layout.componentType); | ||
87 | + unref(chartRef)?.setOption((updateFn(newValue || 0) as unknown as EChartsOption) || {}); | ||
88 | + }, 500); | ||
89 | + | ||
90 | + watch(() => props.value.value, updateChartValue); | ||
91 | + | ||
92 | + const updateChartFont = useThrottleFn(() => { | ||
93 | + const option = beforeUpdateFn(props.layout.componentType); | ||
94 | + setTimeout(() => { | ||
95 | + unref(chartRef)?.setOption((option(unref(getRadio)) as unknown as EChartsOption) || {}); | ||
96 | + }); | ||
97 | + }, 500); | ||
98 | + | ||
99 | + watch(() => props.radio, updateChartFont); | ||
100 | + | ||
101 | + const updateChartType = useThrottleFn(() => { | ||
102 | + unref(chartRef)?.clear(); | ||
103 | + unref(chartRef)?.setOption(props?.layout?.chartOption || {}); | ||
104 | + }, 500); | ||
105 | + | ||
106 | + watch(() => props.layout.componentType, updateChartType); | ||
101 | 107 | ||
102 | let timeout: Nullable<number> = null; | 108 | let timeout: Nullable<number> = null; |
103 | 109 |
@@ -239,7 +239,7 @@ export const getGradient = (key: Gradient, record: GradientInfo[] = []) => { | @@ -239,7 +239,7 @@ export const getGradient = (key: Gradient, record: GradientInfo[] = []) => { | ||
239 | }; | 239 | }; |
240 | 240 | ||
241 | export const update_instrument_1_font = (radio: number) => { | 241 | export const update_instrument_1_font = (radio: number) => { |
242 | - const basicFontSize = fontSize({ radio, basic: 10, max: 20 }); | 242 | + const basicFontSize = fontSize({ radio, basic: 20, max: 25, min: 12 }); |
243 | return { | 243 | return { |
244 | series: [ | 244 | series: [ |
245 | { | 245 | { |
@@ -256,7 +256,7 @@ export const update_instrument_1_font = (radio: number) => { | @@ -256,7 +256,7 @@ export const update_instrument_1_font = (radio: number) => { | ||
256 | 256 | ||
257 | export const update_instrument_2_font = (radio: number) => { | 257 | export const update_instrument_2_font = (radio: number) => { |
258 | const axisLabelFontSize = fontSize({ radio, basic: 10, max: 16 }); | 258 | const axisLabelFontSize = fontSize({ radio, basic: 10, max: 16 }); |
259 | - const detailFontSize = fontSize({ radio, basic: 12 }); | 259 | + const detailFontSize = fontSize({ radio, basic: 20, max: 25, min: 12 }); |
260 | return { | 260 | return { |
261 | series: [ | 261 | series: [ |
262 | { | 262 | { |