diff --git a/src/assets/img/chart-title01.svg b/src/assets/img/chart-title01.svg index 554b6b4..8421061 100644 --- a/src/assets/img/chart-title01.svg +++ b/src/assets/img/chart-title01.svg @@ -3,9 +3,9 @@ diff --git a/src/assets/img/chart-title02.svg b/src/assets/img/chart-title02.svg index c18a121..b49dea2 100644 --- a/src/assets/img/chart-title02.svg +++ b/src/assets/img/chart-title02.svg @@ -1,7 +1,7 @@ diff --git a/src/assets/img/chart-title03.svg b/src/assets/img/chart-title03.svg new file mode 100644 index 0000000..b935ccf --- /dev/null +++ b/src/assets/img/chart-title03.svg @@ -0,0 +1,21 @@ + + + + + + + + + + diff --git a/src/assets/img/chart-title04.svg b/src/assets/img/chart-title04.svg new file mode 100644 index 0000000..afa5774 --- /dev/null +++ b/src/assets/img/chart-title04.svg @@ -0,0 +1,21 @@ + + + + + + + + + + diff --git a/src/views/dashboard/components/DashboardElecChart.vue b/src/views/dashboard/components/DashboardElecChart.vue index 47d1b43..ee245cb 100644 --- a/src/views/dashboard/components/DashboardElecChart.vue +++ b/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.5, color: "#398ECA" }, // 中間顏色 - { offset: 1, color: "#17CEE3" }, // 右側顏色 + { offset: 0, color: colors[0].start }, + { offset: 0.5, color: colors[0].middle }, + { 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.5, color: "#05AA9A" }, // 中間顏色 - { offset: 1, color: "#62E39A" }, // 右側顏色 + { offset: 0, color: colors[1].start }, + { offset: 0.5, color: colors[1].middle }, + { 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 ); @@ -234,11 +248,11 @@ const weekComparisonOption = generateCylinderChartOption(
- + {{ $t("dashboard.thisweek_electricity_consumption") }}
- + {{ $t("dashboard.lastweek_electricity_consumption") }}
diff --git a/src/views/energyManagement/components/BillingDegreeChart.vue b/src/views/energyManagement/components/BillingDegreeChart.vue index 3384cdb..f2f88ac 100644 --- a/src/views/energyManagement/components/BillingDegreeChart.vue +++ b/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", }, }, { diff --git a/src/views/energyManagement/components/CarbonEmissionChart.vue b/src/views/energyManagement/components/CarbonEmissionChart.vue index a42e5e2..6b97ba0 100644 --- a/src/views/energyManagement/components/CarbonEmissionChart.vue +++ b/src/views/energyManagement/components/CarbonEmissionChart.vue @@ -48,7 +48,7 @@ const defaultChartOption = ref({ type: "bar", data: [], itemStyle: { - color: "#398ECA", + color: "#17CEE3", }, }, ], diff --git a/src/views/energyManagement/components/ElecConsumption.vue b/src/views/energyManagement/components/ElecConsumption.vue index c2c60f0..4532a0f 100644 --- a/src/views/energyManagement/components/ElecConsumption.vue +++ b/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, diff --git a/src/views/energyManagement/components/ImmediateDemandChart.vue b/src/views/energyManagement/components/ImmediateDemandChart.vue index 452e62c..7b5b21d 100644 --- a/src/views/energyManagement/components/ImmediateDemandChart.vue +++ b/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", }, }, ], diff --git a/src/views/energyManagement/components/IntervalBillChart.vue b/src/views/energyManagement/components/IntervalBillChart.vue index d24c529..4cb709e 100644 --- a/src/views/energyManagement/components/IntervalBillChart.vue +++ b/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, diff --git a/src/views/energyManagement/components/MonthlyElecBillChart.vue b/src/views/energyManagement/components/MonthlyElecBillChart.vue index a711e50..26d8956 100644 --- a/src/views/energyManagement/components/MonthlyElecBillChart.vue +++ b/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", }, }, {