修改

src/views/ems/report/currentVoltageCurve/index.vue

@@ -57,6 +57,7 @@
 
         <Chart ref="Chart1" class="chart1"/>
         <Chart ref="Chart2" class="chart2"/>
+        <Chart ref="Chart3" class="chart3"/>
       </el-col>
     </el-row>
 
@@ -519,8 +520,121 @@ export default {
           }
         ]
       }
+      let option3 = {
+        title: {
+          text: this.selectMonitorName + ' 功率曲线',
+          x: 'center'
+        },
+        grid: {
+          top: '15%',
+          bottom: '10%',
+          left: '3%',
+          right: '3%'
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+            label: {
+              show: true
+            }
+          }
+        },
+        dataZoom: [{
+          type: 'slider'
+        }],
+        legend: {
+          right: 0
+        },
+        xAxis: {
+          data: data.map(e => e.collectTime),
+          axisLine: {
+            show: true, //隐藏X轴轴线
+            lineStyle: {
+              color: '#000'
+            }
+          },
+          axisTick: {
+            show: true //隐藏X轴刻度
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: '#000' //X轴文字颜色
+            }
+          }
+        },
+        yAxis: [
+          {
+            type: 'value',
+            name: '电流（A）',
+            nameTextStyle: {
+              color: '#000'
+            },
+            splitLine: {
+              show: false
+            },
+            axisTick: {
+              show: true
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#000'
+              }
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: '#000'
+              }
+            }
+          }
+        ],
+        series: [
+          {
+            name: '有功功率',
+            type: 'line',
+            smooth: true, //平滑曲线显示
+            showAllSymbol: true, //显示所有图形。
+            symbol: "emptyCircle", //标记的图形为实心圆
+            symbolSize: 1, //标记的大小
+            // itemStyle: {
+            //   //折线拐点标志的样式
+            //   color: "#058cff",
+            // },
+            // lineStyle: {
+            //   color: "#058cff",
+            // },
+            // areaStyle: {
+            //   color: "rgba(5,140,255, 0.2)",
+            // },
+            data: data.map(e => e.activePower||0)
+          },
+          {
+            name: '无功功率',
+            type: 'line',
+            smooth: true, //平滑曲线显示
+            showAllSymbol: true, //显示所有图形。
+            symbol: "emptyCircle", //标记的图形为实心圆
+            symbolSize: 1, //标记的大小
+            // itemStyle: {
+            //   //折线拐点标志的样式
+            //   color: "#058cff",
+            // },
+            // lineStyle: {
+            //   color: "#058cff",
+            // },
+            // areaStyle: {
+            //   color: "rgba(5,140,255, 0.2)",
+            // },
+            data: data.map(e => e.reactivePower||0)
+          },
+        ]
+      }
       this.$refs.Chart1.setData(option1)
       this.$refs.Chart2.setData(option2)
+      this.$refs.Chart3.setData(option3)
       echarts.connect(this.$refs.Chart1.chart, this.$refs.Chart2.chart)
       this.$refs.Chart1.chart.on('datazoom', (e) => {
         option2.dataZoom[0].start = e.start
@@ -546,4 +660,9 @@ export default {
   width: 100%;
   height: 40vh;
 }
+
+.chart3 {
+  width: 100%;
+  height: 40vh;
+}
 </style>