图表样式

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%',
+                    bottom: '2%',
-                    top: '0%',
+                    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]
                     }
                 ]
             };

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;