db接口参数更新，实时运行接口联调

src/views/ems/dzjk/sbjk/ssyx/CnglqxChart.vue

@@ -11,8 +11,9 @@
 <style scoped lang="scss"></style>
 <script>
 import * as echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
 import resize from '@/mixins/ems/resize'
+import {formatDate} from "@/filters/ems";
+import {storagePower} from '@/api/ems/dzjk'
 
 export default {
   mixins: [resize],
@@ -22,9 +23,7 @@ export default {
     }
   },
   mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
+    this.chart = echarts.init(document.querySelector('#cnglqxChart'))
   },
   beforeDestroy() {
     if (!this.chart) {
@@ -34,17 +33,31 @@ export default {
     this.chart = null
   },
   methods: {
-    initChart() {
-      this.chart = echarts.init(document.querySelector('#cnglqxChart'))
-      this.setOptions()
+    init(siteId){
+      this.chart.showLoading()
+      const x = []
+      const data1 =[],data2 =[]
+      storagePower(siteId).then(response => {
+        const source = response?.data?.energyStoragePowList || []
+        source.forEach(item=>{
+          x.push(formatDate(item.createDate,false,true))
+          data1.push(item.pcsTotalActPower)
+          data2.push(item.pcsTotalReactivePower)
+        })
+        this.setOption(x,data1,data2)
+      }).finally(()=>{
+        this.chart.hideLoading()
+      })
     },
-    setOptions() {
-
+    setOption(x,data1,data2) {
       this.chart.setOption({
         color:['#FFBD00','#3C81FF'],
         legend: {
           left: 'center',
-          bottom: '10',
+          top: '10',
+        },
+        grid: {
+          left: "15%"
         },
         tooltip: {
           trigger: 'axis',
@@ -55,23 +68,37 @@ export default {
         textStyle:{
           color:"#333333",
         },
-        xAxis: {
-          data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
-        },
+        xAxis: {type:'category',data:x},
         yAxis: {
           type: 'value',
         },
+        dataZoom: [
+          {
+            type: 'inside',
+            start: 0,
+            end: 10
+          },
+          {
+            start: 0,
+            end: 10
+          }
+        ],
         // POC昨日有功功率、POC昨日无功功率
         series: [
           {
             name:'POC实时有功功率',
-            data: [80,92,1,34,90,130,320,80,9,91,34,90],
             type: 'line',
-
+            areaStyle: {
+              color:'#FFBD00'
+            },
+            data: data1,
           },{
             name:'POC实时无功功率',
-            data: [820,932,901,934,1290,1330,1320,820,932,901,934,1290],
             type: 'line',
+            areaStyle: {
+              color: '#3C81FF'
+            },
+            data: data2
           }]
       })
     }