Commit b22bbead1f1d81ff2f267268dc7ce753caab764b

Authored by xp.Huang
2 parents 7da45aca cc5d2b58

Merge branch 'local_dev_latest' into 'main_dev'

perf(src/packages/external/Charts): 优化图表类型的柱状,折线,legend图例映射成物模型name

See merge request yunteng/thingskit-view!202
  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 }
... ...