Commit cc5d2b5894b705bad724b116a06d6b3329a24c58
Committed by
xp.Huang
1 parent
7da45aca
perf(src/packages/external/Charts): 优化图表类型的柱状,折线,legend图例映射成物模型name
Showing
9 changed files
with
50 additions
and
10 deletions
1 | +/** | |
2 | + * 此hook的作用是针对echarts图表类型,legend图例,映射成物模型中文 | |
3 | + */ | |
4 | + | |
5 | +export const useEchartsMapLegend = (chartConfig: Recordable, seriesArr: Recordable[]) => { | |
6 | + const { request } = chartConfig | |
7 | + const { | |
8 | + requestParams: { | |
9 | + Params: { attrName } | |
10 | + } | |
11 | + } = request || {} | |
12 | + seriesArr?.forEach((item: Recordable, index: number) => { | |
13 | + item.name = attrName?.[index] | |
14 | + }) | |
15 | +} | ... | ... |
... | ... | @@ -27,6 +27,7 @@ import { isPreview } from '@/utils' |
27 | 27 | import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components' |
28 | 28 | import isObject from 'lodash/isObject' |
29 | 29 | import cloneDeep from 'lodash/cloneDeep' |
30 | +import { useEchartsMapLegend } from '@/hooks/external/useEchartLegendMapChinese.hook' | |
30 | 31 | |
31 | 32 | const props = defineProps({ |
32 | 33 | themeSetting: { |
... | ... | @@ -64,6 +65,7 @@ watch( |
64 | 65 | for (let i = 0; i < newData.dimensions.length - 1; i++) { |
65 | 66 | seriesArr.push(cloneDeep(seriesItem)) |
66 | 67 | } |
68 | + useEchartsMapLegend(props.chartConfig, seriesArr) | |
67 | 69 | replaceMergeArr.value = ['series'] |
68 | 70 | props.chartConfig.option.series = seriesArr |
69 | 71 | nextTick(() => { | ... | ... |
... | ... | @@ -29,6 +29,8 @@ import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } fr |
29 | 29 | import { SocketReceiveMessageType } from '@/store/external/modules/socketStore.d' |
30 | 30 | import isObject from 'lodash/isObject' |
31 | 31 | import { useAssembleDataHooks } from '@/hooks/external/useAssembleData.hook' |
32 | +import { useEchartsMapLegend } from '@/hooks/external/useEchartLegendMapChinese.hook' | |
33 | +import cloneDeep from 'lodash/cloneDeep' | |
32 | 34 | |
33 | 35 | const props = defineProps({ |
34 | 36 | themeSetting: { |
... | ... | @@ -57,19 +59,26 @@ const option = computed(() => { |
57 | 59 | return mergeTheme(props.chartConfig.option, props.themeSetting, includes) |
58 | 60 | }) |
59 | 61 | |
62 | +// dataset 无法变更条数的补丁 | |
60 | 63 | watch( |
61 | 64 | () => props.chartConfig.option.dataset, |
62 | - (newData, oldData) => { | |
63 | - if (newData.dimensions.length !== oldData.dimensions.length) { | |
64 | - const seriesArr = [] | |
65 | - for (let i = 0; i < newData.dimensions.length - 1; i++) { | |
66 | - seriesArr.push(barSeriesItem, lineSeriesItem) | |
65 | + (newData: { dimensions: any }, oldData) => { | |
66 | + try { | |
67 | + if (!isObject(newData) || !('dimensions' in newData)) return | |
68 | + if (Array.isArray(newData?.dimensions)) { | |
69 | + const seriesArr = [] | |
70 | + for (let i = 0; i < newData.dimensions.length - 1; i++) { | |
71 | + seriesArr.push(cloneDeep(barSeriesItem),cloneDeep(lineSeriesItem)) | |
72 | + } | |
73 | + useEchartsMapLegend(props.chartConfig, seriesArr) | |
74 | + replaceMergeArr.value = ['series'] | |
75 | + props.chartConfig.option.series = seriesArr | |
76 | + nextTick(() => { | |
77 | + replaceMergeArr.value = [] | |
78 | + }) | |
67 | 79 | } |
68 | - replaceMergeArr.value = ['series'] | |
69 | - props.chartConfig.option.series = seriesArr | |
70 | - nextTick(() => { | |
71 | - replaceMergeArr.value = [] | |
72 | - }) | |
80 | + } catch (error) { | |
81 | + console.log(error) | |
73 | 82 | } |
74 | 83 | }, |
75 | 84 | { | ... | ... |
... | ... | @@ -17,6 +17,7 @@ import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index' |
17 | 17 | import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components' |
18 | 18 | import { useChartDataFetch } from '@/hooks' |
19 | 19 | import { isPreview, colorGradientCustomMerge} from '@/utils' |
20 | +import { useEchartsMapLegend } from '@/hooks/external/useEchartLegendMapChinese.hook' | |
20 | 21 | |
21 | 22 | const props = defineProps({ |
22 | 23 | themeSetting: { |
... | ... | @@ -79,6 +80,9 @@ watch( |
79 | 80 | () => props.chartConfig.option.dataset, |
80 | 81 | () => { |
81 | 82 | option.value = props.chartConfig.option |
83 | + useEchartsMapLegend(props.chartConfig, props.chartConfig.option.series) | |
84 | + },{ | |
85 | + deep: false | |
82 | 86 | } |
83 | 87 | ) |
84 | 88 | ... | ... |
... | ... | @@ -17,6 +17,7 @@ import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index' |
17 | 17 | import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components' |
18 | 18 | import { useChartDataFetch } from '@/hooks' |
19 | 19 | import { isPreview, colorGradientCustomMerge } from '@/utils' |
20 | +import { useEchartsMapLegend } from '@/hooks/external/useEchartLegendMapChinese.hook' | |
20 | 21 | |
21 | 22 | const props = defineProps({ |
22 | 23 | themeSetting: { |
... | ... | @@ -73,6 +74,7 @@ watch( |
73 | 74 | () => props.chartConfig.option.dataset, |
74 | 75 | () => { |
75 | 76 | option.value = props.chartConfig.option |
77 | + useEchartsMapLegend(props.chartConfig, props.chartConfig.option.series) | |
76 | 78 | }, |
77 | 79 | { |
78 | 80 | deep: false | ... | ... |
... | ... | @@ -35,6 +35,7 @@ import cloneDeep from 'lodash/cloneDeep' |
35 | 35 | import { useAssembleDataHooks } from '@/hooks/external/useAssembleData.hook' |
36 | 36 | import { SocketReceiveMessageType } from '@/store/external/modules/socketStore.d' |
37 | 37 | import { CreateComponentGroupType, CreateComponentType } from '@/packages/index.d' |
38 | +import { useEchartsMapLegend } from '@/hooks/external/useEchartLegendMapChinese.hook' | |
38 | 39 | |
39 | 40 | const props = defineProps({ |
40 | 41 | themeSetting: { |
... | ... | @@ -112,6 +113,7 @@ watch( |
112 | 113 | } |
113 | 114 | replaceMergeArr.value = ['series'] |
114 | 115 | nextTick(() => { |
116 | + useEchartsMapLegend(props.chartConfig, props.chartConfig.option.series) | |
115 | 117 | replaceMergeArr.value = [] |
116 | 118 | }) |
117 | 119 | } | ... | ... |
... | ... | @@ -35,6 +35,7 @@ import { useFullScreen } from '../../utls/fullScreen' |
35 | 35 | import { useAssembleDataHooks } from '@/hooks/external/useAssembleData.hook' |
36 | 36 | import { SocketReceiveMessageType } from '@/store/external/modules/socketStore.d' |
37 | 37 | import {CreateComponentGroupType, CreateComponentType} from '@/packages/index.d' |
38 | +import { useEchartsMapLegend } from '@/hooks/external/useEchartLegendMapChinese.hook' | |
38 | 39 | |
39 | 40 | const props = defineProps({ |
40 | 41 | themeSetting: { |
... | ... | @@ -112,6 +113,7 @@ watch( |
112 | 113 | } |
113 | 114 | replaceMergeArr.value = ['series'] |
114 | 115 | nextTick(() => { |
116 | + useEchartsMapLegend(props.chartConfig, props.chartConfig.option.series) | |
115 | 117 | replaceMergeArr.value = [] |
116 | 118 | }) |
117 | 119 | } | ... | ... |
... | ... | @@ -41,6 +41,7 @@ import { useAssembleDataHooks } from '@/hooks/external/useAssembleData.hook' |
41 | 41 | import { SocketReceiveMessageType } from '@/store/external/modules/socketStore.d' |
42 | 42 | import { useChartInteract } from '@/hooks/external/useChartSelectDeviceInteract.hook' |
43 | 43 | import { getPacketIntervalByRange } from './helper' |
44 | +import { useEchartsMapLegend } from '@/hooks/external/useEchartLegendMapChinese.hook' | |
44 | 45 | |
45 | 46 | const props = defineProps({ |
46 | 47 | themeSetting: { |
... | ... | @@ -122,6 +123,7 @@ watch( |
122 | 123 | } |
123 | 124 | replaceMergeArr.value = ['series'] |
124 | 125 | nextTick(() => { |
126 | + useEchartsMapLegend(props.chartConfig, props.chartConfig.option.series) | |
125 | 127 | replaceMergeArr.value = [] |
126 | 128 | }) |
127 | 129 | } | ... | ... |
... | ... | @@ -35,6 +35,7 @@ import cloneDeep from 'lodash/cloneDeep' |
35 | 35 | import { useAssembleDataHooks } from '@/hooks/external/useAssembleData.hook' |
36 | 36 | import { SocketReceiveMessageType } from '@/store/external/modules/socketStore.d' |
37 | 37 | import {CreateComponentGroupType, CreateComponentType} from '@/packages/index.d' |
38 | +import { useEchartsMapLegend } from '@/hooks/external/useEchartLegendMapChinese.hook' | |
38 | 39 | |
39 | 40 | const props = defineProps({ |
40 | 41 | themeSetting: { |
... | ... | @@ -214,6 +215,7 @@ watch( |
214 | 215 | } |
215 | 216 | replaceMergeArr.value = ['series'] |
216 | 217 | nextTick(() => { |
218 | + useEchartsMapLegend(props.chartConfig, props.chartConfig.option.series) | |
217 | 219 | replaceMergeArr.value = [] |
218 | 220 | }) |
219 | 221 | } | ... | ... |