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 | } |