From 2eb996e89891da7fe35b6e909b28097ef9683b6e Mon Sep 17 00:00:00 2001 From: dengzedong <dengzedong@email> Date: 星期一, 09 六月 2025 14:39:29 +0800 Subject: [PATCH] 建议快照 图表Y轴上下限函数 --- src/views/model/sche/suggest/suggestSnapshot.vue | 116 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 files changed, 112 insertions(+), 4 deletions(-) diff --git a/src/views/model/sche/suggest/suggestSnapshot.vue b/src/views/model/sche/suggest/suggestSnapshot.vue index 03fbed7..fd8272f 100644 --- a/src/views/model/sche/suggest/suggestSnapshot.vue +++ b/src/views/model/sche/suggest/suggestSnapshot.vue @@ -113,26 +113,134 @@ if (!chartInfo) return chart + const markLineData = [] + + if (chartInfo.data?.limitH !== null) { + markLineData.push({ + yAxis: chartInfo.data?.limitH, // 上限 + label: { + show: true, + formatter: '上限', + position: 'insideStartTop', + color: '#FF9A3D' + }, + lineStyle: { + color: '#FF9A3D', + type: 'dashed' + }, + }) + } + if (chartInfo.data?.limitL !== null) { + markLineData.push({ + yAxis: chartInfo.data?.limitL, // 下限 + label: { + show: true, + formatter: '下限', + position: 'insideStartBottom', + color: '#00C2FF' + }, + lineStyle: { + color: '#00C2FF', + type: 'dashed' + }, + }) + } + if (chartInfo.data?.scheduleTime !== null) { + markLineData.push({ + xAxis: chartInfo.data?.scheduleTime, // 真实数据分割线 + label: { + show: true, + formatter: '建\n议\n时\n间', + position: 'insideEndBottom', + color: '#5DFF9E', + rotate: 0 + }, + lineStyle: { + color: '#5DFF9E', + }, + }) + } + // 采纳 + if (chartInfo.data?.status === 1) { + markLineData.push({ + xAxis: chartInfo.data?.handleTime, + label: { + show: true, + formatter: '采\n纳\n时\n间', + position: 'insideEndBottom', + color: '#2196F3', + rotate: 0 + }, + lineStyle: { + color: '#2196F3', + }, + }) + } + // 忽略 + if (chartInfo.data?.status === 2) { + markLineData.push({ + xAxis: chartInfo.data?.handleTime, + label: { + show: true, + formatter: '忽\n略\n时\n间', + position: 'insideEndBottom', + color: '#999999', + rotate: 0 + }, + lineStyle: { + color: '#999999', + }, + }) + } + + // 冲顶触底时间 + if (chartInfo.data?.overLimitTimes?.length > 0) { + chartInfo.data?.overLimitTimes.forEach(overLimitTime => { + markLineData.push({ + xAxis: overLimitTime, + lineStyle: { + color: '#ff0000', + }, + }) + }) + } + const option = { title: { text: chartInfo.name, textStyle: { fontSize: 14 } }, tooltip: { trigger: 'axis' }, - grid: { top: 30, left: '3%', right: '5%', bottom: 20 }, + grid: { top: '10%', left: '3%', right: '5%', bottom: 20 }, xAxis: {type: 'category'}, - yAxis: { type: 'value' }, + yAxis: { type: 'value', + max: (value) => chartInfo.data?.limitH && value.max < chartInfo.data.limitH ? chartInfo.data?.limitH : null, + min: (value) => chartInfo.data?.limitL && value.min > chartInfo.data.limitL ? chartInfo.data?.limitL : null, + }, dataZoom: [{ type: 'inside' }], series: [{ type: 'line', data: chartInfo.data?.dataList || [], - lineStyle: { color: '#5B8FF9', width: 1 } + lineStyle: { color: '#5B8FF9', width: 1 }, + markLine: { + silent: true, + symbol: ['none', 'none'], + lineStyle: { + type: 'solid', + width: 1, + color: '#95E6FF', + }, + label: { + show: false, + }, + data: markLineData, + }, }] } chart.setOption(option) return chart - }).filter(Boolean) as echarts.ECharts[] + }) } </script> -- Gitblit v1.9.3