diff --git a/src/pages/safe_majorHazard/module/OnlineMonitoring.js b/src/pages/safe_majorHazard/module/OnlineMonitoring.js index e97c4f8..0be948e 100644 --- a/src/pages/safe_majorHazard/module/OnlineMonitoring.js +++ b/src/pages/safe_majorHazard/module/OnlineMonitoring.js @@ -20,45 +20,38 @@ const OnlineMonitoring = () => { const option = { color: ['#04A7F3', '#E7C42C', '#EC6941'], - title: { - // text: '实时监测数据', - left: 'center', - // textStyle: { - // fontSize: 14, - // color: '#333' - // } - }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'cross', - label: { - backgroundColor: '#6a7985' - } - } - }, + legend: { data: ['液位', '温度', '压力'], - top: 0 + top: "-3px", + left: "center", + itemGap: 40, // 图例间距 + textStyle: { + fontSize: 10 + } }, grid: { - left: '3%', + left: '2%', right: '4%', - bottom: '3%', - top: '0%', + bottom: '2%', + top: '12%', containLabel: true }, xAxis: { type: 'category', boundaryGap: false, - data: ['0:00', '2:00', '4:00', '6:00', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00'] + data: ['0:00', '2:00', '4:00', '6:00', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00'], + axisLabel: { + fontSize: 10 + } }, yAxis: { type: 'value', min: 0, - max: 900, + max:500, axisLabel: { - formatter: '{value}' + formatter: '{value}', + fontSize: 10 } }, series: [ @@ -70,6 +63,20 @@ const OnlineMonitoring = () => { width: 1.5, color: '#04A7F3' }, + areaStyle: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(4, 167, 243, 0.5)' }, + { offset: 1, color: 'rgba(4, 167, 243, 0)' } + ] + } + }, + symbol: 'none', // 不显示数据点 data: [120, 200, 150, 300, 250, 400, 350, 280, 320, 180, 220, 160, 140] }, { @@ -80,6 +87,20 @@ const OnlineMonitoring = () => { width: 1.5, color: '#E7C42C' }, + areaStyle: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(231, 196, 44, 0.5)' }, + { offset: 1, color: 'rgba(231, 196, 44, 0)' } + ] + } + }, + symbol: 'none', data: [80, 120, 100, 180, 160, 220, 200, 150, 170, 90, 110, 85, 75] }, { @@ -90,7 +111,21 @@ const OnlineMonitoring = () => { width: 1.5, color: '#EC6941' }, - data: [200, 300, 250, 450, 400, 600, 550, 420, 480, 280, 320, 260, 240] + areaStyle: { + color: { + type: 'linear', + x: 0, + y: 1, + x2: 0, + y2: 0, + colorStops: [ + { offset: 0, color: 'rgba(236, 105, 65, 0)' }, + { offset: 1, color: 'rgba(236, 105, 65, 0.5)' } + ] + } + }, + symbol: 'none', // 不显示数据点 + data: [200, 300, 250, 450, 400, 430, 480, 420, 480, 280, 320, 260, 240] } ] }; diff --git a/src/pages/safe_majorHazard/module/OnlineMonitoring.less b/src/pages/safe_majorHazard/module/OnlineMonitoring.less index 4e4ecd3..4bc4255 100644 --- a/src/pages/safe_majorHazard/module/OnlineMonitoring.less +++ b/src/pages/safe_majorHazard/module/OnlineMonitoring.less @@ -13,6 +13,7 @@ .OcontainerTopLeft { width: 72%; height: 100%; + // background-color: pink; margin-right: 10px; // display: flex; @@ -242,7 +243,8 @@ display: flex; justify-content: space-between; align-items: center; - padding: 8px 15px; + // padding: 8px 15px; + padding: 8px 15px 0px 15px; .titleLeft { display: flex;