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

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

@@ -11,9 +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 {batteryAveSoc} from '@/api/ems/dzjk'
 export default {
   mixins: [resize],
   data() {
@@ -22,9 +22,7 @@ export default {
     }
   },
   mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
+    this.chart = echarts.init(document.querySelector('#dcpjsocChart'))
   },
   beforeDestroy() {
     if (!this.chart) {
@@ -34,44 +32,53 @@ export default {
     this.chart = null
   },
   methods: {
-    initChart() {
-      this.chart = echarts.init(document.querySelector('#dcpjsocChart'))
-      this.setOptions()
+    init(siteId){
+      this.chart.showLoading()
+      const x = []
+      const data =[]
+      batteryAveSoc(siteId).then(response => {
+        const source = response?.data?.batteryAveSOCList || []
+        source.forEach(item=>{
+          x.push(formatDate(item.createDate,false,true))
+          data.push(item.batterySOC)
+        })
+        this.setOption(x,data)
+      }).finally(()=>{
+        this.chart.hideLoading()
+      })
     },
-    setOptions() {
-
+    setOption(x,data) {
       this.chart.setOption({
         color:['#FFBD00','#3C81FF'],
-        legend: {
-          left: 'center',
-          bottom: '10',
-        },
+        // legend: {
+        //   left: 'center',
+        //   bottom: '10',
+        // },
         tooltip: {
           trigger: 'axis',
           axisPointer: { // 坐标轴指示器，坐标轴触发有效
             type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
           }
         },
+        grid: {
+          left: "15%"
+        },
         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',
         },
-        // POC昨日有功功率、POC昨日无功功率
         series: [
           {
-            name:'昨日同时段电池平均SOC',
-            data: [80,92,1,34,90,130,320,80,9,91,34,90],
-            type: 'scatter',
+            name:'电池平均SOC',
+            data: data,
+            type: 'line',
+            areaStyle: {
+              color:'#FFBD00'
+            }
 
-          },{
-            name:'实时电池平均SOC',
-            data: [820,932,901,934,1290,1330,1320,820,932,901,934,1290],
-            type: 'scatter',
           }]
       })
     }