功率、pcs、电池堆曲线更新为折线图

src/views/ems/dzjk/tjbb/glqx/index.vue

@@ -1,128 +1,151 @@
-
 <template>
-  <el-card shadow="always" class="common-card-container time-range-card" style="margin-top:20px">
+  <el-card
+    shadow="always"
+    class="common-card-container time-range-card"
+    style="margin-top: 20px"
+  >
     <div slot="header" class="time-range-header">
       <span class="card-title">功率曲线</span>
-      <date-range-select ref="dateRangeSelect" @reset="resetTime" @updateDate="updateDate"/>
+      <date-range-select
+        ref="dateRangeSelect"
+        @reset="resetTime"
+        @updateDate="updateDate"
+      />
     </div>
     <div class="card-main" v-loading="loading">
-      <div id="glqxEchart" style="height: 310px;"></div>
+      <div id="glqxEchart" style="height: 310px"></div>
     </div>
   </el-card>
 </template>
 
-
 <script>
-import * as echarts from 'echarts'
+import * as echarts from "echarts";
 import resize from "@/mixins/ems/resize";
 import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
-import {getPcsNameList, getPowerData} from "@/api/ems/dzjk";
-import {formatDate} from "@/filters/ems";
+import { getPcsNameList, getPowerData } from "@/api/ems/dzjk";
+import { formatDate } from "@/filters/ems";
 import DateRangeSelect from "@/components/Ems/DateRangeSelect/index.vue";
 export default {
-  name:'DzjkTjbbGlqx',
-  components: {DateRangeSelect},
-  mixins: [resize,getQuerySiteId],
+  name: "DzjkTjbbGlqx",
+  components: { DateRangeSelect },
+  mixins: [resize, getQuerySiteId],
   data() {
     return {
-      pickerOptions:{
+      pickerOptions: {
         disabledDate(time) {
           return time.getTime() > Date.now();
         },
       },
-      dateRange:[],
-      loading:false,
-      dateRangeInit:true,
-    }
+      dateRange: [],
+      loading: false,
+      dateRangeInit: true,
+    };
   },
   methods: {
     // 更新时间范围 重置图表
-    updateDate(data){
-      this.dateRange=data || []
-      this.getData()
+    updateDate(data) {
+      this.dateRange = data || [];
+      this.getData();
     },
-    resetTime(){
-      this.dateRangeInit=true;
+    resetTime() {
+      this.dateRangeInit = true;
     },
-    getData(){
-      const {siteId}=this;
-      let [start='',end='']=(this.dateRange || [])
+    getData() {
+      const { siteId } = this;
+      let [start = "", end = ""] = this.dateRange || [];
       //接口调用完成之后 设置图表、结束loading
-      this.loading=true;
-      if(this.dateRangeInit){
-        start = ''
-        end = ''
-        this.dateRangeInit=false
+      this.loading = true;
+      if (this.dateRangeInit) {
+        start = "";
+        end = "";
+        this.dateRangeInit = false;
       }
-      getPowerData({siteId,startDate:formatDate(start),endDate:formatDate(end)}).then(response => {
-        this.setOption(response?.data || [])
-      }).finally(()=>{this.loading=false;})
+      getPowerData({
+        siteId,
+        startDate: formatDate(start),
+        endDate: formatDate(end),
+      })
+        .then((response) => {
+          this.setOption(response?.data || []);
+        })
+        .finally(() => {
+          this.loading = false;
+        });
     },
     setOption(data) {
-      const source = [['日期','电网功率','负载功率','储能功率','光伏功率']]
-      data.forEach(item=>{
-        source.push([item.statisDate,item.gridPower,item.loadPower,item.storagePower,item.pvPower])
-      })
-      this.chart.setOption({
-        grid: {
-          containLabel: true
-        },
-        legend: {
-          left: 'center',
-          bottom: '15',
-        },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: { // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-          }
-        },
-        textStyle:{
-          color:"#333333",
-        },
-        xAxis: {
-          type: 'category',
-         },
-        yAxis: {
-          type: 'value',
-        },
-        dataset:{source},
-        series: [
-          {
-            type: 'scatter',
+      const source = [["日期", "电网功率", "负载功率", "储能功率", "光伏功率"]];
+      data.forEach((item) => {
+        source.push([
+          item.statisDate,
+          item.gridPower,
+          item.loadPower,
+          item.storagePower,
+          item.pvPower,
+        ]);
+      });
+      this.chart.setOption(
+        {
+          grid: {
+            containLabel: true,
           },
-          {
-            type: 'scatter',
+          legend: {
+            left: "center",
+            bottom: "15",
           },
-          {
-            type: 'scatter',
+          tooltip: {
+            trigger: "axis",
+            axisPointer: {
+              // 坐标轴指示器，坐标轴触发有效
+              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+            },
           },
-          {
-            type: 'scatter',
-          }
-        ]
-      },true)
+          textStyle: {
+            color: "#333333",
+          },
+          xAxis: {
+            type: "category",
+          },
+          yAxis: {
+            type: "value",
+          },
+          dataset: { source },
+          series: [
+            {
+              type: "line",
+            },
+            {
+              type: "line",
+            },
+            {
+              type: "line",
+            },
+            {
+              type: "line",
+            },
+          ],
+        },
+        true
+      );
     },
     initChart() {
-      if(this.chart) return
-      this.chart = echarts.init(document.querySelector('#glqxEchart'));
+      if (this.chart) return;
+      this.chart = echarts.init(document.querySelector("#glqxEchart"));
+    },
+    init() {
+      this.$nextTick(() => {
+        this.dateRangeInit = true;
+        this.initChart();
+        this.$refs.dateRangeSelect.init();
+      });
     },
-    init(){
-      this.$nextTick(()=>{
-        this.dateRangeInit=true;
-        this.initChart()
-        this.$refs.dateRangeSelect.init()
-      })
-    }
   },
 
   beforeDestroy() {
     if (!this.chart) {
-      return
+      return;
     }
-    this.chart.dispose()
-    this.chart = null
+    this.chart.dispose();
+    this.chart = null;
   },
-}
+};
 </script>
-