diff --git a/src/components/cockpit/exceedanceLevel/components/dailyTrendChart.vue b/src/components/cockpit/exceedanceLevel/components/dailyTrendChart.vue
index c761d21..513bd04 100644
--- a/src/components/cockpit/exceedanceLevel/components/dailyTrendChart.vue
+++ b/src/components/cockpit/exceedanceLevel/components/dailyTrendChart.vue
@@ -2,7 +2,7 @@
-
+
@@ -13,15 +13,15 @@ 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]},
- timeKey: { type: [String, Number]},
+ width: { type: [String, Number] },
+ height: { type: [String, Number] },
+ timeKey: { type: [String, Number] },
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
- },
- timeLabel: {
- color: '#333',
- fontSize: 14,
- padding: [0, 0, 0, 10]
- },
- name: {
- color: '#333',
- fontSize: 14,
- padding: [0, 0, 0, 10]
- }
- }
+ text: dialogText.value
+ },
+ legend: {
+ itemWidth: 20,
+ itemHeight: 20,
+ itemStyle: { opacity: 0 }, //去圆点
+ right: 70
+ },
+ tooltip: {
+ trigger: 'axis',
+ formatter: (params: any) => {
+ if (!params || params.length === 0) return ''
+
+ // 使用第一个项目的轴标签作为时间标题
+ let tooltipText = params[0].axisValueLabel + '
'
+
+ // 遍历所有项目并累加到tooltipText中
+ params.forEach((item: any) => {
+ // 将数值格式化为保留两位小数
+ const formattedValue = Math.round(item.value[1] * 100) / 100
+ tooltipText += `${item.marker} ${item.seriesName}: ${formattedValue}
`
+ })
+
+ 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)
})
diff --git a/src/components/cockpit/exceedanceLevel/index.vue b/src/components/cockpit/exceedanceLevel/index.vue
index 10c72dc..fac8fd7 100644
--- a/src/components/cockpit/exceedanceLevel/index.vue
+++ b/src/components/cockpit/exceedanceLevel/index.vue
@@ -119,7 +119,7 @@ const tableStore: any = new TableStore({
}
},
{
- title: '发生日期',
+ title: '越限时间',
field: 'time',
minWidth: '60',
render: 'customTemplate',