From 0ae83a895e80a4b9777a27f613d721a7e5e2ac18 Mon Sep 17 00:00:00 2001
From: ali <ali9696@163.com>
Date: 星期二, 03 九月 2024 10:18:27 +0800
Subject: [PATCH] 整体样式修改

---
 energy_management_ui/src/views/energyStatistics/energyConsumption/BarChart.vue |  131 +++++++++++++++++++++++--------------------
 1 files changed, 69 insertions(+), 62 deletions(-)

diff --git a/energy_management_ui/src/views/energyStatistics/energyConsumption/BarChart.vue b/energy_management_ui/src/views/energyStatistics/energyConsumption/BarChart.vue
index 8632876..3596cd6 100644
--- a/energy_management_ui/src/views/energyStatistics/energyConsumption/BarChart.vue
+++ b/energy_management_ui/src/views/energyStatistics/energyConsumption/BarChart.vue
@@ -1,29 +1,29 @@
 <template>
-  <div :class="className" :style="{height:height,width:width}" />
+  <div :class="className" :style="{ height: height, width: width }" />
 </template>
 
 <script>
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from '../mixins/resize'
-const animationDuration = 6000
+import echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
+import resize from "../mixins/resize";
+const animationDuration = 6000;
 export default {
   mixins: [resize],
   props: {
     className: {
       type: String,
-      default: 'chart'
+      default: "chart"
     },
     width: {
       type: String,
-      default: '100%'
+      default: "100%"
     },
     height: {
       type: String,
-      default: '350px'
+      default: "350px"
     },
     chartData: {
-      type:Object,
+      type: Object
       //required: true
     }
   },
@@ -31,49 +31,48 @@
     chartData: {
       deep: true,
       handler(val) {
-        this.setOptions(val)
+        this.setOptions(val);
       }
     }
   },
   data() {
     return {
       chart: null,
-      seriesData: [],
-    }
+      seriesData: []
+    };
   },
   mounted() {
     this.$nextTick(() => {
-      this.initChart()
-    })
+      this.initChart();
+    });
   },
   beforeDestroy() {
     if (!this.chart) {
-      return
+      return;
     }
-    this.chart.dispose()
-    this.chart = null
+    this.chart.dispose();
+    this.chart = null;
   },
   methods: {
     initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
-       this.setOptions(this.chartData)
-     },
-     setOptions({newVisitis,xAxis,actualData} = {}) {
-       var series=[];
-       if(newVisitis !=null ||newVisitis != undefined){
-         newVisitis.forEach(rowData => {
-           series.push({
-               name: actualData,
-               type: 'bar',
-               data: newVisitis,
-               smooth: true,//绾挎潯骞虫粦
-               stack: 'vistors',
-               animationDuration: 2800,
-               animationEasing: 'quadraticOut'
-             },
-           );
-         });
-         /*for(var i=0;i<newVisitis.length;i++){
+      this.chart = echarts.init(this.$el, "macarons");
+      this.setOptions(this.chartData);
+    },
+    setOptions({ newVisitis, xAxis, actualData } = {}) {
+      var series = [];
+      if (newVisitis != null || newVisitis != undefined) {
+        newVisitis.forEach(rowData => {
+          series.push({
+            name: actualData,
+            type: "bar",
+            data: newVisitis,
+            smooth: true, //绾挎潯骞虫粦
+            stack: "vistors",
+            animationDuration: 2800,
+            animationEasing: "quadraticOut"
+          });
+        });
+        /*for(var i=0;i<newVisitis.length;i++){
            series.push({
                name: actualData[i],
                type: 'bar',
@@ -85,40 +84,48 @@
              },
            );
          }*/
-       }
+      }
       this.chart.setOption({
         tooltip: {
-          trigger: 'axis',
-          axisPointer: { // 鍧愭爣杞存寚绀哄櫒锛屽潗鏍囪酱瑙﹀彂鏈夋晥
-            type: 'shadow' // 榛樿涓虹洿绾匡紝鍙�変负锛�'line' | 'shadow'
+          trigger: "axis",
+          axisPointer: {
+            // 鍧愭爣杞存寚绀哄櫒锛屽潗鏍囪酱瑙﹀彂鏈夋晥
+            type: "shadow" // 榛樿涓虹洿绾匡紝鍙�変负锛�'line' | 'shadow'
           }
         },
         grid: {
           top: 40,
-          left: '1%',
-          right: '2%',
-          bottom: '3%',
+          left: "1%",
+          right: "2%",
+          bottom: "3%",
           containLabel: true
         },
         legend: {
-          data:actualData,
-          left: '60%',
+          data: actualData,
+          left: "60%",
+          textStyle: {
+            color: "#fff"
+          }
         },
-        xAxis: [{
-          type: 'category',
-          data: xAxis,
-          axisTick: {
-            alignWithLabel: true
-          },
-        }],
-        yAxis: [{
-          name: '鍚ㄦ爣鐓�',
-          type: 'value',
-          axisTick: {
-            show: false
-          },
-        }],
-        series:series,/*[{
+        xAxis: [
+          {
+            type: "category",
+            data: xAxis,
+            axisTick: {
+              alignWithLabel: true
+            }
+          }
+        ],
+        yAxis: [
+          {
+            name: "鍚ㄦ爣鐓�",
+            type: "value",
+            axisTick: {
+              show: false
+            }
+          }
+        ],
+        series: series /*[{
           name: '鏈湡',
            type: 'bar',
           data: [
@@ -138,8 +145,8 @@
              animationDuration: 2800,
              animationEasing: 'quadraticOut'
          }]*/
-      })
+      });
     }
   }
-}
+};
 </script>

--
Gitblit v1.9.3