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/dashboard/RaddarChart.vue |  126 ++++++++++++++++++++++--------------------
 1 files changed, 66 insertions(+), 60 deletions(-)

diff --git a/energy_management_ui/src/views/dashboard/RaddarChart.vue b/energy_management_ui/src/views/dashboard/RaddarChart.vue
index 6823af3..a748653 100644
--- a/energy_management_ui/src/views/dashboard/RaddarChart.vue
+++ b/energy_management_ui/src/views/dashboard/RaddarChart.vue
@@ -1,116 +1,122 @@
 <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'
+import echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
+import resize from "./mixins/resize";
 
-const animationDuration = 3000
+const animationDuration = 3000;
 
 export default {
   mixins: [resize],
   props: {
     className: {
       type: String,
-      default: 'chart'
+      default: "chart"
     },
     width: {
       type: String,
-      default: '100%'
+      default: "100%"
     },
     height: {
       type: String,
-      default: '300px'
+      default: "300px"
     }
   },
   data() {
     return {
       chart: null
-    }
+    };
   },
   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.chart = echarts.init(this.$el, "macarons");
 
       this.chart.setOption({
         tooltip: {
-          trigger: 'axis',
-          axisPointer: { // 鍧愭爣杞存寚绀哄櫒锛屽潗鏍囪酱瑙﹀彂鏈夋晥
-            type: 'shadow' // 榛樿涓虹洿绾匡紝鍙�変负锛�'line' | 'shadow'
+          trigger: "axis",
+          axisPointer: {
+            // 鍧愭爣杞存寚绀哄櫒锛屽潗鏍囪酱瑙﹀彂鏈夋晥
+            type: "shadow" // 榛樿涓虹洿绾匡紝鍙�変负锛�'line' | 'shadow'
           }
         },
         radar: {
-          radius: '66%',
-          center: ['50%', '42%'],
+          radius: "66%",
+          center: ["50%", "42%"],
           splitNumber: 8,
           splitArea: {
             areaStyle: {
-              color: 'rgba(127,95,132,.3)',
+              color: "rgba(127,95,132,.3)",
               opacity: 1,
               shadowBlur: 45,
-              shadowColor: 'rgba(0,0,0,.5)',
+              shadowColor: "rgba(0,0,0,.5)",
               shadowOffsetX: 0,
               shadowOffsetY: 15
             }
           },
           indicator: [
-            { name: 'Sales', max: 10000 },
-            { name: 'Administration', max: 20000 },
-            { name: 'Information Techology', max: 20000 },
-            { name: 'Customer Support', max: 20000 },
-            { name: 'Development', max: 20000 },
-            { name: 'Marketing', max: 20000 }
+            { name: "Sales", max: 10000 },
+            { name: "Administration", max: 20000 },
+            { name: "Information Techology", max: 20000 },
+            { name: "Customer Support", max: 20000 },
+            { name: "Development", max: 20000 },
+            { name: "Marketing", max: 20000 }
           ]
         },
         legend: {
-          left: 'center',
-          bottom: '10',
-          data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
+          left: "center",
+          bottom: "10",
+          data: ["Allocated Budget", "Expected Spending", "Actual Spending"],
+          textStyle: {
+            color: "#fff"
+          }
         },
-        series: [{
-          type: 'radar',
-          symbolSize: 0,
-          areaStyle: {
-            normal: {
-              shadowBlur: 13,
-              shadowColor: 'rgba(0,0,0,.2)',
-              shadowOffsetX: 0,
-              shadowOffsetY: 10,
-              opacity: 1
-            }
-          },
-          data: [
-            {
-              value: [5000, 7000, 12000, 11000, 15000, 14000],
-              name: 'Allocated Budget'
+        series: [
+          {
+            type: "radar",
+            symbolSize: 0,
+            areaStyle: {
+              normal: {
+                shadowBlur: 13,
+                shadowColor: "rgba(0,0,0,.2)",
+                shadowOffsetX: 0,
+                shadowOffsetY: 10,
+                opacity: 1
+              }
             },
-            {
-              value: [4000, 9000, 15000, 15000, 13000, 11000],
-              name: 'Expected Spending'
-            },
-            {
-              value: [5500, 11000, 12000, 15000, 12000, 12000],
-              name: 'Actual Spending'
-            }
-          ],
-          animationDuration: animationDuration
-        }]
-      })
+            data: [
+              {
+                value: [5000, 7000, 12000, 11000, 15000, 14000],
+                name: "Allocated Budget"
+              },
+              {
+                value: [4000, 9000, 15000, 15000, 13000, 11000],
+                name: "Expected Spending"
+              },
+              {
+                value: [5500, 11000, 12000, 15000, 12000, 12000],
+                name: "Actual Spending"
+              }
+            ],
+            animationDuration: animationDuration
+          }
+        ]
+      });
     }
   }
-}
+};
 </script>

--
Gitblit v1.9.3