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