Commit 9478781fcb6016cb5f559e135c53d0c6be41a6e6

Authored by ww
1 parent 221c5cd4

perf: DEFECT-705 adjust chart value font size

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