Commit b823113d903e104380e2136fd0b3f89a0bc2246b
Merge branch 'fix/DEFECT-1886' into 'main_dev'
fix: 修复折线图鼠标移入没显示具体的值 See merge request yunteng/thingskit-scada!214
Showing
4 changed files
with
56 additions
and
45 deletions
1 | +import type { EChartsOption } from 'echarts' | |
1 | 2 | import { isLightboxMode } from '@/utils/env' |
2 | - | |
3 | -export const defaultOption = { | |
4 | - tooltip: { | |
5 | - }, | |
6 | - calculable: true, | |
7 | - xAxis: [ | |
8 | - { | |
9 | - type: 'category', | |
10 | - // prettier-ignore | |
11 | - data: isLightboxMode() ? [] : ['Jan', 'Feb', 'Mar', 'Apr', 'May'], | |
3 | +export const defaultOption = (): EChartsOption => { | |
4 | + return { | |
5 | + tooltip: { | |
12 | 6 | }, |
13 | - ], | |
14 | - legend: { | |
15 | - top: '8%', | |
16 | - left: 'center', | |
17 | - data: [''], | |
18 | - }, | |
7 | + calculable: true, | |
8 | + xAxis: | |
9 | + { | |
10 | + type: 'category', | |
11 | + // prettier-ignore | |
12 | + data: isLightboxMode() ? [] : ['Jan', 'Feb', 'Mar', 'Apr', 'May'], | |
13 | + }, | |
19 | 14 | |
20 | - grid: { | |
21 | - top: '25%', | |
22 | - left: '6%', | |
23 | - right: '10%', | |
24 | - bottom: '8%', | |
25 | - containLabel: true, | |
26 | - }, | |
27 | - yAxis: [ | |
28 | - { | |
29 | - type: 'value', | |
30 | - }, | |
31 | - ], | |
32 | - series: [ | |
33 | - { | |
34 | - name: 'Rainfall', | |
35 | - type: 'bar', | |
36 | - data: [ | |
37 | - 25.6, 76.7, 42.0, 27.0, 23.2, | |
38 | - ], | |
15 | + legend: { | |
16 | + top: '8%', | |
17 | + left: 'center', | |
18 | + data: [''], | |
39 | 19 | }, |
40 | - { | |
41 | - name: 'Evaporation', | |
42 | - type: 'bar', | |
43 | - data: isLightboxMode() | |
44 | - ? [] | |
45 | - : [ | |
46 | - 28.7, 32.6, 70.7, 29.0, 26.4, | |
47 | - ], | |
20 | + | |
21 | + grid: { | |
22 | + top: '25%', | |
23 | + left: '6%', | |
24 | + right: '10%', | |
25 | + bottom: '8%', | |
26 | + containLabel: true, | |
48 | 27 | }, |
49 | - ], | |
28 | + yAxis: | |
29 | + { | |
30 | + type: 'value', | |
31 | + }, | |
32 | + series: [ | |
33 | + { | |
34 | + name: 'Rainfall', | |
35 | + type: isLightboxMode() ? 'line' : 'bar', | |
36 | + data: isLightboxMode() | |
37 | + ? [] | |
38 | + : [ | |
39 | + 25.6, 76.7, 42.0, 27.0, 23.2, | |
40 | + ], | |
41 | + }, | |
42 | + { | |
43 | + name: 'Evaporation', | |
44 | + type: 'bar', | |
45 | + data: isLightboxMode() | |
46 | + ? [] | |
47 | + : [ | |
48 | + 28.7, 32.6, 70.7, 29.0, 26.4, | |
49 | + ], | |
50 | + }, | |
51 | + ], | |
52 | + } | |
50 | 53 | } | ... | ... |
... | ... | @@ -28,7 +28,7 @@ const titleATTR = ref<string[] | any>([]) |
28 | 28 | |
29 | 29 | function initChartInstance() { |
30 | 30 | chartInstance.value = init(unref(chartElRef)) |
31 | - chartInstance.value.setOption(defaultOption) | |
31 | + chartInstance.value.setOption(defaultOption()) | |
32 | 32 | } |
33 | 33 | |
34 | 34 | const productsStore = useProductsStore() | ... | ... |
... | ... | @@ -53,6 +53,7 @@ const handleHistoryData = (commandSource: CommandSource, message: SubscriptionDa |
53 | 53 | seriesData.value.forEach((item: any) => { |
54 | 54 | item.data = unref(timeList).map((time: any) => ({ name: time, value: null })) |
55 | 55 | }) |
56 | + | |
56 | 57 | seriesData.value.forEach((item: any) => { |
57 | 58 | item.data.forEach((item1: any) => { |
58 | 59 | message[item.attribute].forEach((messageItem) => { |
... | ... | @@ -71,6 +72,9 @@ const handleHistoryData = (commandSource: CommandSource, message: SubscriptionDa |
71 | 72 | xAxis: { |
72 | 73 | data: toRaw(unref(timeList.value.map((item: string | number) => formatToDateTime(item)))), |
73 | 74 | }, |
75 | + legend: { | |
76 | + data: unref(titleATTR), | |
77 | + } as any, | |
74 | 78 | series: toRaw( |
75 | 79 | unref(seriesData).map((item: { type: string; name: string; data: any }) => { |
76 | 80 | const { type, name, data } = item |
... | ... | @@ -138,6 +142,7 @@ const { onMessage } = useOnMessage({ |
138 | 142 | if (!seriesData.value.length) { |
139 | 143 | (attr as string[]).forEach((item: string) => { |
140 | 144 | titleATTR.value.push(productsStore.getObjectModelByIdWithIdentifier(deviceProfileId, item)?.functionName) |
145 | + | |
141 | 146 | seriesData.value.push({ attribute: item, data: [], type: 'line', name: productsStore.getObjectModelByIdWithIdentifier(deviceProfileId, item)?.functionName }) |
142 | 147 | }) |
143 | 148 | } | ... | ... |