Commit b823113d903e104380e2136fd0b3f89a0bc2246b

Authored by xp.Huang
2 parents 2dd02e88 bfe7826c

Merge branch 'fix/DEFECT-1886' into 'main_dev'

fix: 修复折线图鼠标移入没显示具体的值

See merge request yunteng/thingskit-scada!214
  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 }