单站监控首页更新

src/views/ems/dzjk/home/WeekChart.vue

@@ -15,7 +15,6 @@
 <script>
 import * as echarts from 'echarts'
 import resize from '@/mixins/ems/resize'
-import {formatNumber} from "@/filters/ems";
 
 export default {
   mixins: [resize],
@@ -40,106 +39,56 @@ export default {
     initChart() {
       this.chart = echarts.init(document.querySelector('#weekChart'))
     },
-    setOption(data) {
-      const {siteMonitorDataVo=[],gridNrtPower,loadNrtPower,energyStorageNrtPower,energyStorageAvailElec} = data
+    showLoading(){
+      this.chart && this.chart.showLoading()
+    },
+    setOption(data,unit) {
       const source = [['日期','充电量','放电量']]
-      siteMonitorDataVo.forEach(item=>{
+      data.forEach(item=>{
         source.push([item.ammeterDate, item.chargedCap,item.disChargedCap])
       })
       this.chart.setOption({
-        title: [
-          // 右上角
-          {
-            text: `电网 实时功率：${formatNumber(gridNrtPower)} kW`,
-            top: 10,
-            right: 10,
-            textStyle:{
-              fontSize:12,
-              color:'#666666'
-            }
-          },
-          // 右下角
-          {
-            text: `负载 实时功率：${formatNumber(loadNrtPower)} kW`,
-            bottom: 10,
-            right: 10,
-            textStyle:{
-              fontSize:12,
-              color:'#666666'
-            }
-          },
-          // 左下角第一行
-          {
-            text: '储能',
-            bottom: 40,
-            left: 10,
-            textStyle:{
-              fontSize:12,
-              color:'#666666'
-            }
-          },
-          // 左下角第二行
-          {
-            text: `实时功率：${formatNumber(energyStorageNrtPower)} kW`,
-            bottom: 26,
-            left: 10,
-            textStyle:{
-              fontSize:12,
-              color:'#666666'
-            }
-          },
-          // 左下角第三行
-          {
-            text: `可用电量：${formatNumber(energyStorageAvailElec)} kWh`,
-            bottom: 10,
-            left: 10,
-            textStyle:{
-              fontSize:12,
-              color:'#666666'
-            }
-          }
-        ],
-        grid:{
-          left:200
-        },
+        color:['#FFBD00','#3C81FF','#05AEA3'],
         tooltip: {
           trigger: 'axis',
           axisPointer: { // 坐标轴指示器，坐标轴触发有效
             type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
           }
         },
-        textStyle:{
-          color:"#333333",
+        legend: {
+          left: 'center',
+          bottom: '10',
         },
         xAxis: {
           type: 'category',
-          axisLine: {
-            lineStyle:{
-              color: '#333333',
-            }
-          }
+          name:unit,
+          nameLocation:'center'
         },
-        yAxis: {
+        yAxis: [{
           type: 'value',
+          name:'充电量/放电量kWh',
           axisLine: {
             lineStyle:{
               color: '#333333',
-            }
+            },
+            onZero:false
           }
-        },
+        }],
         dataset:{
           source
-          // source: [['日期','充电量','放电量']]
         },
         series: [
           {
-            name:'充电量',
+            yAxisIndex:0,
             type: 'line',
-          },{
-            name:'放电量',
+          },
+          {
+            yAxisIndex:0,
             type: 'line',
-          }]
+          },
+        ]
       })
+      this.chart.hideLoading()
     }
   }
 }