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 | { |