Showing
4 changed files
with
56 additions
and
45 deletions
1 | +import type { EChartsOption } from 'echarts' | ||
1 | import { isLightboxMode } from '@/utils/env' | 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,7 +28,7 @@ const titleATTR = ref<string[] | any>([]) | ||
28 | 28 | ||
29 | function initChartInstance() { | 29 | function initChartInstance() { |
30 | chartInstance.value = init(unref(chartElRef)) | 30 | chartInstance.value = init(unref(chartElRef)) |
31 | - chartInstance.value.setOption(defaultOption) | 31 | + chartInstance.value.setOption(defaultOption()) |
32 | } | 32 | } |
33 | 33 | ||
34 | const productsStore = useProductsStore() | 34 | const productsStore = useProductsStore() |
@@ -3,6 +3,9 @@ import { isLightboxMode } from '@/utils/env' | @@ -3,6 +3,9 @@ import { isLightboxMode } from '@/utils/env' | ||
3 | 3 | ||
4 | export const getDefaultOption = (): EChartsOption => { | 4 | export const getDefaultOption = (): EChartsOption => { |
5 | return { | 5 | return { |
6 | + | ||
7 | + tooltip: { | ||
8 | + }, | ||
6 | legend: { | 9 | legend: { |
7 | top: '10%', | 10 | top: '10%', |
8 | left: 'center', | 11 | left: 'center', |
@@ -53,6 +53,7 @@ const handleHistoryData = (commandSource: CommandSource, message: SubscriptionDa | @@ -53,6 +53,7 @@ const handleHistoryData = (commandSource: CommandSource, message: SubscriptionDa | ||
53 | seriesData.value.forEach((item: any) => { | 53 | seriesData.value.forEach((item: any) => { |
54 | item.data = unref(timeList).map((time: any) => ({ name: time, value: null })) | 54 | item.data = unref(timeList).map((time: any) => ({ name: time, value: null })) |
55 | }) | 55 | }) |
56 | + | ||
56 | seriesData.value.forEach((item: any) => { | 57 | seriesData.value.forEach((item: any) => { |
57 | item.data.forEach((item1: any) => { | 58 | item.data.forEach((item1: any) => { |
58 | message[item.attribute].forEach((messageItem) => { | 59 | message[item.attribute].forEach((messageItem) => { |
@@ -71,6 +72,9 @@ const handleHistoryData = (commandSource: CommandSource, message: SubscriptionDa | @@ -71,6 +72,9 @@ const handleHistoryData = (commandSource: CommandSource, message: SubscriptionDa | ||
71 | xAxis: { | 72 | xAxis: { |
72 | data: toRaw(unref(timeList.value.map((item: string | number) => formatToDateTime(item)))), | 73 | data: toRaw(unref(timeList.value.map((item: string | number) => formatToDateTime(item)))), |
73 | }, | 74 | }, |
75 | + legend: { | ||
76 | + data: unref(titleATTR), | ||
77 | + } as any, | ||
74 | series: toRaw( | 78 | series: toRaw( |
75 | unref(seriesData).map((item: { type: string; name: string; data: any }) => { | 79 | unref(seriesData).map((item: { type: string; name: string; data: any }) => { |
76 | const { type, name, data } = item | 80 | const { type, name, data } = item |
@@ -138,6 +142,7 @@ const { onMessage } = useOnMessage({ | @@ -138,6 +142,7 @@ const { onMessage } = useOnMessage({ | ||
138 | if (!seriesData.value.length) { | 142 | if (!seriesData.value.length) { |
139 | (attr as string[]).forEach((item: string) => { | 143 | (attr as string[]).forEach((item: string) => { |
140 | titleATTR.value.push(productsStore.getObjectModelByIdWithIdentifier(deviceProfileId, item)?.functionName) | 144 | titleATTR.value.push(productsStore.getObjectModelByIdWithIdentifier(deviceProfileId, item)?.functionName) |
145 | + | ||
141 | seriesData.value.push({ attribute: item, data: [], type: 'line', name: productsStore.getObjectModelByIdWithIdentifier(deviceProfileId, item)?.functionName }) | 146 | seriesData.value.push({ attribute: item, data: [], type: 'line', name: productsStore.getObjectModelByIdWithIdentifier(deviceProfileId, item)?.functionName }) |
142 | }) | 147 | }) |
143 | } | 148 | } |