南瑞意见修改:前端页面和后端接口

web/src/components/Home/Charge.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="charge">
-    <div class="text_Cur">
+    <!-- <div class="text_Cur">
       <div v-for="item in curList" :key="item.key">
         <div>{{ item.name }}</div>
         <span class="mark">{{ item.value ? item.value : 0 }}</span>
         <span class="d">{{ item.d }}</span>
       </div>
-    </div>
+    </div> -->
     <div id="charge-chart"></div>
   </div>
 </template>
@@ -24,6 +24,10 @@ export default {
     deviceInfo: {
       type: Array,
       default: () => []
+    },
+    myData: {
+      type: Number, 
+      default: () => -1
     }
   },
   data() {
@@ -95,6 +99,10 @@ export default {
         }
       },
       deep: true // 确保深度比较
+    },
+    myData: {
+      handler(newVal,oldVal) {
+      },
     }
   },
   mounted() {},
@@ -122,34 +130,33 @@ export default {
       arr.forEach((item, index) => {
         this.chargeChartData.ydata[index] = {
           name: item.name,
-          smooth: true,
-          type: 'line',
-          barWidth: 10,
-          itemStyle: {
-            borderRadius: 10,
-            color: item.lineColor
-          },
-          emphasis: {
-            focus: 'series'
-          },
-          areaStyle: {
-            global: false,
-            color: {
-              type: 'linear',
-              x: 0,
-              y: 0,
-              x2: 0,
-              y2: 1,
-              colorStops: [
-                { offset: 0, color: JSON.parse(JSON.stringify(item)).colorStart }, // 顶部颜色
-                { offset: 1, color: JSON.parse(JSON.stringify(item)).colorEnd } // 底部颜色
-              ]
-            }
-          },
-          global: false,
-          showSymbol: false,
-          yAxisIndex: index,
-          data: result.values[index]
+          // smooth: true,
+          // type: 'line',
+          // barWidth: 10,
+          // itemStyle: {
+          //   borderRadius: 10,
+          //   color: item.lineColor
+          // },
+          // emphasis: {
+          //   focus: 'series'
+          // },
+          // areaStyle: {
+          //   global: false,
+          //   color: {
+          //     type: 'linear', x: 0, y: 0,　x2: 0,　y2: 1,
+          //     colorStops: [
+          //       { offset: 0, color: JSON.parse(JSON.stringify(item)).colorStart }, // 顶部颜色
+          //       { offset: 1, color: JSON.parse(JSON.stringify(item)).colorEnd } // 底部颜色
+          //     ]
+          //   }
+          // },
+          // global: false,
+          // showSymbol: false,
+          // yAxisIndex: index,
+          // data: result.values[index]
+          type: 'bar',
+          data: [18,25,39,17,37,41,62],
+          color:  item.lineColor
         }
       })
     },
@@ -196,8 +203,9 @@ export default {
         },
         yAxis: [
           {
-            name: '充电电量(kW·h)',
+            name: '充电电量(kWh)',
             type: 'value',
+            splitNumber: 2,
             nameTextStyle: {
               color: '#fff' // 绿色名称
             },
@@ -205,15 +213,16 @@ export default {
               lineStyle: { type: 'dashed', color: '#435463' }
             },
             axisLabel: {
-              interval: 4,
+              // interval: 2,
               color: '#fff',
               fontSize:12
-
             },
+            // axisLine : {show: true, color: '#f00'}
           },
           {
             name: '充电收益(元)',
             type: 'value',
+            splitNumber: 2,
             splitLine: {
               lineStyle: { type: 'dashed', color: '#435463' }
             },
@@ -221,14 +230,18 @@ export default {
               color: '#fff' // 绿色名称
             },
             axisLabel: {
-              interval: 4,
+              // interval: 4,
               color: '#fff',
               fontSize:12
             },
+            // axisLine : {show: true, lineStyle: { color: '#ff0000', width: 2 } }
           },
          
         ],
         series: this.chargeChartData.ydata
+        // serise: [
+        //   { name: '2011', type: 'bar', data: [18, 23, 29, 10, 13, 63] }
+        // ]
       }
       option && chargeChart.setOption(option)
       this.setupResizeListener()
@@ -244,10 +257,10 @@ export default {
 
 <style lang="scss" scoped>
 .charge {
-  height: calc(100% - 45px);
-
+  height: calc(100% - 35px);
+  background-color: #50505050;
   #charge-chart {
-    height: calc(100% - 45px);
+    height: calc(100% - 5px);
   }
 }