微调

src/components/cockpit/exceedanceLevel/components/dailyTrendChart.vue

@@ -2,7 +2,7 @@
     <!-- 指标日趋势图 -->
     <el-dialog draggable :title="dialogTitle" v-model="dialogVisible" append-to-body width="70%">
         <div :style="pageHeight">
-            <my-echart class="tall" :options="echartList" style="width: 98%" />
+            <my-echart class="tall" :options="echartList" style="width: 100%" />
         </div>
     </el-dialog>
 </template>
@@ -13,7 +13,7 @@ import MyEchart from '@/components/echarts/MyEchart.vue'
 import { useConfig } from '@/stores/config'
 import { mainHeight } from '@/utils/layout'
 import { limitExtentDayData } from '@/api/harmonic-boot/cockpit/cockpit'
-
+import { yMethod } from '@/utils/echartMethod'
 const prop = defineProps({
     width: { type: [String, Number] },
     height: { type: [String, Number] },
@@ -21,7 +21,7 @@ const prop = defineProps({
     timeValue: { type: Object }
 })
 
-const pageHeight = ref(mainHeight(332))
+const pageHeight = mainHeight(0, 2)
 
 const dialogVisible: any = ref(false)
 
@@ -36,57 +36,45 @@ const echartList = ref()
 const init = () => {
     echartList.value = {
         title: {
-            text: dialogText.value,
-            textStyle: {
-                fontSize: 14,
-                rich: {
-                    lineName: {
-                        color: '#333',
-                        fontSize: 14
+            text: dialogText.value
         },
-                    timeLabel: {
-                        color: '#333',
-                        fontSize: 14,
-                        padding: [0, 0, 0, 10]
+        legend: {
+            itemWidth: 20,
+            itemHeight: 20,
+            itemStyle: { opacity: 0 }, //去圆点
+            right: 70
         },
-                    name: {
-                        color: '#333',
-                        fontSize: 14,
-                        padding: [0, 0, 0, 10]
-                    }
-                }
+        tooltip: {
+            trigger: 'axis',
+            formatter: (params: any) => {
+                if (!params || params.length === 0) return ''
+
+                // 使用第一个项目的轴标签作为时间标题
+                let tooltipText = params[0].axisValueLabel + '<br/>'
+
+                // 遍历所有项目并累加到tooltipText中
+                params.forEach((item: any) => {
+                    // 将数值格式化为保留两位小数
+                    const formattedValue = Math.round(item.value[1] * 100) / 100
+                    tooltipText += `${item.marker} ${item.seriesName}: ${formattedValue}<br/>`
+                })
+
+                return tooltipText
             }
         },
         xAxis: {
-            type: 'category',
-            data: []
-        },
-        yAxis: {
-            type: 'value',
-            name: '数值'
-        },
-        grid: {
-            left: '1%',
-            right: '45px',
-            bottom: '40px',
-            top: '15%',
-            containLabel: true
-        },
-        dataZoom: [
-            {
-                type: 'inside',
-                height: 13,
-                start: 0,
-                bottom: '20px',
-                end: 100
-            },
-            {
-                start: 0,
-                height: 13,
-                bottom: '20px',
-                end: 100
+            type: 'time',
+            axisLabel: {
+                formatter: {
+                    day: '{MM}-{dd}',
+                    month: '{MM}',
+                    year: '{yyyy}'
                 }
-        ],
+            }
+        },
+
+        yAxis: {},
+
         options: {
             series: []
         }
@@ -98,6 +86,7 @@ const initData = async (row: any) => {
         if (res.data && res.data.length > 0) {
             // 重新初始化图表
             init()
+            let [min, max] = yMethod(res.data.map((item: any) => item.value.split(',')).flat())
 
             // 从第一条数据中提取时间作为x轴数据
             const firstItem = res.data[0]
@@ -112,12 +101,17 @@ const initData = async (row: any) => {
 
             // 处理每条相位数据
             const seriesData = res.data.map((item: any) => {
-                const values = item.value.split(',').map((v: string) => parseFloat(v) || 0)
+                const values = xAxisData.map((time: string, index: number) => {
+                    // 将传入的日期与时间拼接成完整的时间字符串
+                    const fullTime = `${row.time} ${time}`
+                    const value = parseFloat(item.value.split(',')[index]) || 0
+                    return [fullTime, value]
+                })
 
                 return {
                     name: `${item.phasic}相`,
                     type: 'line',
-                    showSymbol: true,
+                    showSymbol: false,
                     smooth: true,
                     data: values,
                     itemStyle: {
@@ -128,20 +122,20 @@ const initData = async (row: any) => {
                     }
                 }
             })
-
+            echartList.value.yAxis.max = max
+            echartList.value.yAxis.min = min
             // 更新图表配置
-            echartList.value.xAxis.data = xAxisData
             echartList.value.options.series = seriesData
+            // 注意：使用时间轴时不需要设置 xAxis.data
         }
     })
 }
-
 onMounted(() => {})
 
 const open = async (row: any) => {
     dialogVisible.value = true
     dialogTitle.value = row.name + '日趋势图'
-    dialogText.value = `{lineName|${row.lineName}}{timeLabel|${row.time}}{name|${row.name}日趋势图}`
+    dialogText.value = `监测点名称:${row.lineName}_越限时间:${row.time}_指标名称:${row.name}`
     nextTick(() => {
         initData(row)
     })

src/components/cockpit/exceedanceLevel/index.vue

@@ -119,7 +119,7 @@ const tableStore: any = new TableStore({
             }
         },
         {
-            title: '发生日期',
+            title: '越限时间',
             field: 'time',
             minWidth: '60',
             render: 'customTemplate',