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/energyStructure/lineChart.vue |  246 +++++++++++++++++++++++++-----------------------
 1 files changed, 129 insertions(+), 117 deletions(-)

diff --git a/energy_management_ui/src/views/energyStatistics/energyStructure/lineChart.vue b/energy_management_ui/src/views/energyStatistics/energyStructure/lineChart.vue
index e370f7d..e197022 100644
--- a/energy_management_ui/src/views/energyStatistics/energyStructure/lineChart.vue
+++ b/energy_management_ui/src/views/energyStatistics/energyStructure/lineChart.vue
@@ -1,146 +1,158 @@
 <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
-  export default {
-    mixins: [resize],
-    props: {
-      className: {
-        type: String,
-        default: 'chart'
-      },
-      width: {
-        type: String,
-        default: '100%'
-      },
-      height: {
-        type: String,
-        default: '350px'
-      },
-      chartData: {
-        type:Object,
+import echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
+import resize from "../mixins/resize";
+import { color } from "echarts/lib/export";
+const animationDuration = 6000;
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: "chart"
+    },
+    width: {
+      type: String,
+      default: "100%"
+    },
+    height: {
+      type: String,
+      default: "350px"
+    },
+    chartData: {
+      type: Object
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val);
       }
+    }
+  },
+  data() {
+    return {
+      chart: null,
+      seriesData: []
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    this.chart.dispose();
+    this.chart = null;
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, "macarons");
+      this.setOptions(this.chartData);
     },
-    watch: {
-      chartData: {
-        deep: true,
-        handler(val) {
-          this.setOptions(val)
-        }
-      }
-    },
-    data() {
-      return {
-        chart: null,
-        seriesData: [],
-      }
-    },
-    mounted() {
-      this.$nextTick(() => {
-        this.initChart()
-      })
-    },
-    beforeDestroy() {
-      if (!this.chart) {
-        return
-      }
-      this.chart.dispose()
-      this.chart = null
-    },
-    methods: {
-      initChart() {
-        this.chart = echarts.init(this.$el, 'macarons')
-        this.setOptions(this.chartData)
-      },
-      setOptions({currentValue,xAxis,lastYearValue,title} = {}) {
-        var series=[];
-/*        if(newVisitis !=null ||newVisitis != undefined){
+    setOptions({ currentValue, xAxis, lastYearValue, title } = {}) {
+      var series = [];
+      /*        if(newVisitis !=null ||newVisitis != undefined){
           series.push()
         }
         console.log("newVisitis:"+newVisitis+"actual"+actual);*/
-        this.chart.setOption({
-          title: {
-            text: title,
-            x:'center',
-            y: 'top',
-            textStyle: {
-              color: "#333"
-            },
-          },
-          tooltip: {
-            trigger: 'axis',
-            axisPointer: { // 鍧愭爣杞存寚绀哄櫒锛屽潗鏍囪酱瑙﹀彂鏈夋晥
-              type: 'shadow' // 榛樿涓虹洿绾匡紝鍙�変负锛�'line' | 'shadow'
-            }
-          },
-          grid: {
-            top: 40,
-            left: '2%',
-            right: '2%',
-            bottom: '3%',
-            containLabel: true
-          },
-          legend: {
-            data:['娑堣垂閲�', '浜ч噺'],
-            left: '60%',
-          },
-          xAxis: [{
-            type: 'category',
+      this.chart.setOption({
+        title: {
+          text: title,
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff"
+          }
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            // 鍧愭爣杞存寚绀哄櫒锛屽潗鏍囪酱瑙﹀彂鏈夋晥
+            type: "shadow" // 榛樿涓虹洿绾匡紝鍙�変负锛�'line' | 'shadow'
+          }
+        },
+        grid: {
+          top: 40,
+          left: "2%",
+          right: "2%",
+          bottom: "3%",
+          containLabel: true
+        },
+        legend: {
+          data: ["娑堣垂閲�", "浜ч噺"],
+          left: "60%",
+          textStyle: {
+            color: "#fff"
+          }
+        },
+        xAxis: [
+          {
+            type: "category",
             data: xAxis,
             axisPointer: {
-              type: 'shadow'
+              type: "shadow"
             }
-          }],
-          yAxis: [{
-              name: '娑堣垂閲�',
-              type: 'value',
-              nameTextStyle:{
-                color:"#333",
-              },
-              axisLabel: {
-                formatter: '{value}'
-              },
-              axisTick: {
-                show: false
-              },
-            },{
-            name: '浜ч噺',
-            type: 'value',
-            nameTextStyle:{
-              color:"#333",
+          }
+        ],
+        yAxis: [
+          {
+            name: "娑堣垂閲�",
+            type: "value",
+            nameTextStyle: {
+              color: "#fff"
             },
             axisLabel: {
-              formatter: '{value}'
+              formatter: "{value}"
             },
             axisTick: {
               show: false
+            }
+          },
+          {
+            name: "浜ч噺",
+            type: "value",
+            nameTextStyle: {
+              color: "#fff"
             },
+            axisLabel: {
+              formatter: "{value}"
+            },
+            axisTick: {
+              show: false
+            }
           }
-          ],
-          series:[{
+        ],
+        series: [
+          {
             name: "娑堣垂閲�",
-            type: 'bar',
+            type: "bar",
             data: currentValue,
-            smooth: true,//绾挎潯骞虫粦
+            smooth: true, //绾挎潯骞虫粦
             //stack: 'vistors',
-            barMaxWidth:30,//鏈�澶у搴�
+            barMaxWidth: 30, //鏈�澶у搴�
             animationDuration: 2800,
-            animationEasing: 'quadraticOut'
-          },{
-          name: '浜ч噺',
-            type: 'line',
+            animationEasing: "quadraticOut"
+          },
+          {
+            name: "浜ч噺",
+            type: "line",
             yAxisIndex: 1,
             data: lastYearValue,
             animationDuration: 2800,
-            animationEasing: 'quadraticOut'
-        }]
-        })
-      }
+            animationEasing: "quadraticOut"
+          }
+        ]
+      });
     }
   }
+};
 </script>

--
Gitblit v1.9.3