修改Chart顏色色系

src/assets/img/chart-title01.svg

@@ -3,9 +3,9 @@
 <svg version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 124.4 12" style="enable-background:new 0 0 124.4 12;" xml:space="preserve">
 <style type="text/css">
-	.st0{fill:#0CA9D4;}
+	.st0{fill:#17CEE3;}
 	.st1{opacity:0.3;fill:#969696;}
-	.st2{opacity:0.8;fill:#0CA9D4;}
+	.st2{opacity:0.8;fill:#17CEE3;}
 </style>
 <g>
 	<polygon class="st0" points="92.7,2.9 31.5,2.9 28.8,0 95.6,0 	"/>

src/assets/img/chart-title02.svg

@@ -1,7 +1,7 @@
 <svg id="圖層_1" data-name="圖層 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 124.4 12.01">
   <defs>
     <style>
-      .cls-1,.cls-3 { fill: #05AA9A; }
+      .cls-1,.cls-3 { fill: #E4EA00; }
       .cls-2 { fill: #969696; opacity: 0.3; }
       .cls-3 { opacity: 0.8; }
     </style>

src/assets/img/chart-title03.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 124.4 12" style="enable-background:new 0 0 124.4 12;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#62E39A;}
+	.st1{opacity:0.3;fill:#969696;}
+	.st2{opacity:0.8;fill:#62E39A;}
+</style>
+<g>
+	<polygon class="st0" points="92.7,2.9 31.5,2.9 28.8,0 95.6,0 	"/>
+	<path class="st1" d="M124.4,0.1v11.7c0,0.1-0.3,0.1-0.7,0.1H97.8c-0.2,0-0.4,0-0.5-0.1l-1.8-0.4c-0.1,0-0.3-0.1-0.5-0.1H29.8
+		c-0.2,0-0.4,0-0.5,0.1L27.5,12C27.4,12,27.2,12,27,12H0.7C0.3,12,0,11.9,0,11.9V0.1C0,0.1,0.3,0,0.7,0l26.2,0.1
+		c0.2,0,0.4,0,0.5,0.1L29,2.2c0.1,0,0.3,0.1,0.5,0.1h65.3c0.2,0,0.4,0,0.5-0.1l1.9-2.1c0.1,0,0.3-0.1,0.5-0.1l26-0.1
+		C124.1,0,124.4,0.1,124.4,0.1z"/>
+	<path class="st2" d="M122.9,12V2.1c0-0.5-0.4-0.9-0.9-0.9H96.4c-0.3,0-0.5,0.1-0.7,0.3l-1.8,1.6c-0.1,0.1-0.2,0.1-0.3,0.1H30.7
+		c-0.1,0-0.2,0-0.3-0.1l-1.6-1.6c-0.2-0.2-0.4-0.3-0.7-0.3H2.4c-0.5,0-0.9,0.4-0.9,0.9V12 M1.7,12V2.1c0-0.4,0.3-0.6,0.6-0.6h25.8
+		c0.2,0,0.4,0.1,0.5,0.2l1.6,1.6c0.1,0.1,0.3,0.2,0.5,0.2h62.9c0.2,0,0.4-0.1,0.5-0.2l1.8-1.6c0.1-0.1,0.3-0.2,0.5-0.2H122
+		c0.4,0,0.6,0.3,0.6,0.6V12"/>
+</g>
+</svg>

src/assets/img/chart-title04.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 124.4 12" style="enable-background:new 0 0 124.4 12;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#E9971F;}
+	.st1{opacity:0.3;fill:#969696;}
+	.st2{opacity:0.8;fill:#E9971F;}
+</style>
+<g>
+	<polygon class="st0" points="92.7,2.9 31.5,2.9 28.8,0 95.6,0 	"/>
+	<path class="st1" d="M124.4,0.1v11.7c0,0.1-0.3,0.1-0.7,0.1H97.8c-0.2,0-0.4,0-0.5-0.1l-1.8-0.4c-0.1,0-0.3-0.1-0.5-0.1H29.8
+		c-0.2,0-0.4,0-0.5,0.1L27.5,12C27.4,12,27.2,12,27,12H0.7C0.3,12,0,11.9,0,11.9V0.1C0,0.1,0.3,0,0.7,0l26.2,0.1
+		c0.2,0,0.4,0,0.5,0.1L29,2.2c0.1,0,0.3,0.1,0.5,0.1h65.3c0.2,0,0.4,0,0.5-0.1l1.9-2.1c0.1,0,0.3-0.1,0.5-0.1l26-0.1
+		C124.1,0,124.4,0.1,124.4,0.1z"/>
+	<path class="st2" d="M122.9,12V2.1c0-0.5-0.4-0.9-0.9-0.9H96.4c-0.3,0-0.5,0.1-0.7,0.3l-1.8,1.6c-0.1,0.1-0.2,0.1-0.3,0.1H30.7
+		c-0.1,0-0.2,0-0.3-0.1l-1.6-1.6c-0.2-0.2-0.4-0.3-0.7-0.3H2.4c-0.5,0-0.9,0.4-0.9,0.9V12 M1.7,12V2.1c0-0.4,0.3-0.6,0.6-0.6h25.8
+		c0.2,0,0.4,0.1,0.5,0.2l1.6,1.6c0.1,0.1,0.3,0.2,0.5,0.2h62.9c0.2,0,0.4-0.1,0.5-0.2l1.8-1.6c0.1-0.1,0.3-0.2,0.5-0.2H122
+		c0.4,0,0.6,0.3,0.6,0.6V12"/>
+</g>
+</svg>

src/views/dashboard/components/DashboardElecChart.vue

@@ -4,6 +4,18 @@ import * as echarts from "echarts";
 import BarChart from "@/components/chart/BarChart.vue";
 import { useI18n } from "vue-i18n";
 const { t } = useI18n();
+// 獨立顏色配置
+const chartColors = {
+  yesterdayToday: [
+    { start: "#17CEE3", middle: "#398ECA", end: "#17CEE3" },
+    { start: "#E4EA00", middle: "#b2b800", end: "#E4EA00" },
+  ],
+  weekComparison: [
+    { start: "#62E39A", middle: "#53c283", end: "#62E39A" },
+    { start: "#E9971F", middle: "#ba7a1c", end: "#E9971F" },
+  ],
+};
+
 // 定義用電比較資料
 const yesterdayTodayData = {
   categories: ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00"],
@@ -35,7 +47,7 @@ const weekComparisonData = {
 };
 
 // 生成圓柱圖表的 option
-const generateCylinderChartOption = (categories, values) => {
+const generateCylinderChartOption = (categories, values, colors) => {
   const barWidth = 15; // 圓柱體寬度
   return {
     xAxis: {
@@ -74,9 +86,9 @@ const generateCylinderChartOption = (categories, values) => {
             x2: 1, // 向右漸層
             y2: 0, // 水平漸層
             colorStops: [
-              { offset: 0, color: "#17CEE3" }, // 左側顏色
+              { offset: 0, color: colors[0].start },
-              { offset: 0.5, color: "#398ECA" }, // 中間顏色
+              { offset: 0.5, color: colors[0].middle },
-              { offset: 1, color: "#17CEE3" }, // 右側顏色
+              { offset: 1, color: colors[0].end },
             ],
           },
         },
@@ -94,9 +106,9 @@ const generateCylinderChartOption = (categories, values) => {
             x2: 1, // 向右漸層
             y2: 0, // 水平漸層
             colorStops: [
-              { offset: 0, color: "#62E39A" }, // 左側顏色
+              { offset: 0, color: colors[1].start },
-              { offset: 0.5, color: "#05AA9A" }, // 中間顏色
+              { offset: 0.5, color: colors[1].middle },
-              { offset: 1, color: "#62E39A" }, // 右側顏色
+              { offset: 1, color: colors[1].end },
             ],
           },
         },
@@ -111,7 +123,7 @@ const generateCylinderChartOption = (categories, values) => {
         data: values[0].value,
         z: 12,
         itemStyle: {
-          color: "#0b86a7",
+          color: colors[0].middle,
           borderWidth: 10,
           borderColor: "#fff",
           borderType: "solid",
@@ -125,7 +137,7 @@ const generateCylinderChartOption = (categories, values) => {
         symbolPosition: "end",
         data: values[1].value,
         itemStyle: {
-          color: "#05AA9A",
+          color: colors[1].middle,
           borderWidth: 10,
           borderColor: "#fff",
           borderType: "solid",
@@ -142,7 +154,7 @@ const generateCylinderChartOption = (categories, values) => {
         data: values[0].value,
         z: 12,
         itemStyle: {
-          color: "#0ca9d4",
+          color: colors[0].middle,
         },
       },
       {
@@ -153,7 +165,7 @@ const generateCylinderChartOption = (categories, values) => {
         symbolPosition: "start",
         data: values[1].value,
         itemStyle: {
-          color: "#05AA9A",
+          color: colors[1].middle,
         },
         z: 12,
       },
@@ -187,11 +199,13 @@ const generateCylinderChartOption = (categories, values) => {
 // 分別生成每個圖表的 option
 const yesterdayTodayOption = generateCylinderChartOption(
   yesterdayTodayData.categories,
-  yesterdayTodayData.values
+  yesterdayTodayData.values,
+  chartColors.yesterdayToday
 );
 const weekComparisonOption = generateCylinderChartOption(
   weekComparisonData.categories,
-  weekComparisonData.values
+  weekComparisonData.values,
+  chartColors.weekComparison
 );
 </script>
 
@@ -234,11 +248,11 @@ const weekComparisonOption = generateCylinderChartOption(
         </h2>
         <div class="w-[48%]">
           <div class="text-con">
-            <img src="@ASSET/img/chart-title01.svg" />
+            <img src="@ASSET/img/chart-title03.svg" />
             <span>{{ $t("dashboard.thisweek_electricity_consumption") }}</span>
           </div>
           <div class="text-con">
-            <img src="@ASSET/img/chart-title02.svg" />
+            <img src="@ASSET/img/chart-title04.svg" />
             <span>{{ $t("dashboard.lastweek_electricity_consumption") }}</span>
           </div>
         </div>

src/views/energyManagement/components/BillingDegreeChart.vue

@@ -49,7 +49,7 @@ const defaultChartOption = ref({
       stack: "total",
       data: [],
       itemStyle: {
-        color: "#398ECA",
+        color: "#17CEE3",
       },
     },
     {
@@ -58,7 +58,7 @@ const defaultChartOption = ref({
       stack: "total",
       data: [],
       itemStyle: {
-        color: "#05AA9A",
+        color: "#E4EA00",
       },
     },
     {

src/views/energyManagement/components/CarbonEmissionChart.vue

@@ -48,7 +48,7 @@ const defaultChartOption = ref({
       type: "bar",
       data: [],
       itemStyle: {
-        color: "#398ECA",
+        color: "#17CEE3",
       },
     },
   ],

src/views/energyManagement/components/ElecConsumption.vue

@@ -72,7 +72,7 @@ const loadData = async () => {
       percentage: item.percentage,
     }));
 
-    const colors = ["#45f4ef", "#398ECA", "#05AA9A", "#62E39A", "#17CEE3", "#E9971F"];
+    const colors = ["#45f4ef", "#17CEE3", "#E4EA00", "#62E39A", "#E9971F", "#E52EFF"];
     // 更新 chartOption
     chartOption.series[0].data = data.map((item, index) => ({
       ...item,

src/views/energyManagement/components/ImmediateDemandChart.vue

@@ -26,7 +26,7 @@ const data = {
         width: 3,
       },
       itemStyle: {
-        color: "#398ECA",
+        color: "#17CEE3",
       },
     },
     {
@@ -38,7 +38,7 @@ const data = {
         width: 3,
       },
       itemStyle: {
-        color: "#05AA9A",
+        color: "#E4EA00",
       },
     },
     {
@@ -62,7 +62,7 @@ const data = {
         width: 3,
       },
       itemStyle: {
-        color: "#17CEE3",
+        color: "#E9971F",
       },
     },
   ],

src/views/energyManagement/components/IntervalBillChart.vue

@@ -14,9 +14,9 @@ const dateRange = ref({
 // 圖表配置
 const chartConfig = {
   colors: {
-    peak: "#398ECA",
+    peak: "#E52EFF",
     semiPeak: "#05AA9A",
-    offPeak: "#62E39A",
+    offPeak: "#398ECA",
   },
   textColor: "#ffffff",
   fontSize: 14,

src/views/energyManagement/components/MonthlyElecBillChart.vue

@@ -50,7 +50,7 @@ const defaultChartOption = ref({
       stack: "total",
       data: [],
       itemStyle: {
-        color: "#398ECA",
+        color: "#17CEE3",
       },
     },
     {
@@ -59,7 +59,7 @@ const defaultChartOption = ref({
       stack: "total",
       data: [],
       itemStyle: {
-        color: "#05AA9A",
+        color: "#E4EA00",
       },
     },
     {