297 lines
7.8 KiB
Vue
297 lines
7.8 KiB
Vue
<script setup>
|
|
import { ref, onMounted } from "vue";
|
|
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"],
|
|
values: [
|
|
{
|
|
name: `2024.11.8 ${t("dashboard.electricity_consumption")}`,
|
|
value: [8, 8, 8, 8, 8, 15, 25, 65, 75, 60, 70, 65],
|
|
},
|
|
{
|
|
name: `2024.11.7 ${t("dashboard.electricity_consumption")}`,
|
|
value: [10, 10, 10, 10, 10, 20, 30, 80, 90, 70, 80, 85],
|
|
},
|
|
],
|
|
};
|
|
|
|
// 本週與上週用電比較資料
|
|
const weekComparisonData = {
|
|
categories: ["Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu"],
|
|
values: [
|
|
{
|
|
name: `${t("dashboard.thisweek_electricity_consumption")}`,
|
|
value: [850, 200, 350, 850, 950, 950, 900],
|
|
},
|
|
{
|
|
name: `${t("dashboard.lastweek_electricity_consumption")}`,
|
|
value: [800, 150, 300, 750, 900, 900, 800],
|
|
},
|
|
],
|
|
};
|
|
|
|
// 生成圓柱圖表的 option
|
|
const generateCylinderChartOption = (categories, values, colors) => {
|
|
const barWidth = 15; // 圓柱體寬度
|
|
return {
|
|
xAxis: {
|
|
type: "category",
|
|
data: categories,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#fff",
|
|
},
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#fff",
|
|
},
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: "#ccc",
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: values[0].name,
|
|
type: "bar",
|
|
barWidth: barWidth,
|
|
data: values[0].value,
|
|
itemStyle: {
|
|
color: {
|
|
type: "linear",
|
|
x: 0,
|
|
y: 0,
|
|
x2: 1, // 向右漸層
|
|
y2: 0, // 水平漸層
|
|
colorStops: [
|
|
{ offset: 0, color: colors[0].start },
|
|
{ offset: 0.5, color: colors[0].middle },
|
|
{ offset: 1, color: colors[0].end },
|
|
],
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: values[1].name,
|
|
type: "bar",
|
|
barWidth: barWidth,
|
|
data: values[1].value,
|
|
itemStyle: {
|
|
color: {
|
|
type: "linear",
|
|
x: 0,
|
|
y: 0,
|
|
x2: 1, // 向右漸層
|
|
y2: 0, // 水平漸層
|
|
colorStops: [
|
|
{ offset: 0, color: colors[1].start },
|
|
{ offset: 0.5, color: colors[1].middle },
|
|
{ offset: 1, color: colors[1].end },
|
|
],
|
|
},
|
|
},
|
|
},
|
|
// 圓柱頂部
|
|
{
|
|
name: null,
|
|
type: "pictorialBar",
|
|
symbolSize: [barWidth, 5],
|
|
symbolOffset: [-9, -5],
|
|
symbolPosition: "end",
|
|
data: values[0].value,
|
|
z: 12,
|
|
itemStyle: {
|
|
color: colors[0].middle,
|
|
borderWidth: 10,
|
|
borderColor: "#fff",
|
|
borderType: "solid",
|
|
},
|
|
},
|
|
{
|
|
name: null,
|
|
type: "pictorialBar",
|
|
symbolSize: [barWidth, 5],
|
|
symbolOffset: [9, -5],
|
|
symbolPosition: "end",
|
|
data: values[1].value,
|
|
itemStyle: {
|
|
color: colors[1].middle,
|
|
borderWidth: 10,
|
|
borderColor: "#fff",
|
|
borderType: "solid",
|
|
},
|
|
z: 12,
|
|
},
|
|
// 圓柱底部
|
|
{
|
|
name: null,
|
|
type: "pictorialBar",
|
|
symbolSize: [barWidth, 5],
|
|
symbolOffset: [-9, 4],
|
|
symbolPosition: "start",
|
|
data: values[0].value,
|
|
z: 12,
|
|
itemStyle: {
|
|
color: colors[0].middle,
|
|
},
|
|
},
|
|
{
|
|
name: null,
|
|
type: "pictorialBar",
|
|
symbolSize: [barWidth, 5],
|
|
symbolOffset: [9, 4],
|
|
symbolPosition: "start",
|
|
data: values[1].value,
|
|
itemStyle: {
|
|
color: colors[1].middle,
|
|
},
|
|
z: 12,
|
|
},
|
|
],
|
|
grid: {
|
|
left: "3%",
|
|
right: "3%",
|
|
bottom: "3%",
|
|
top: "15%",
|
|
containLabel: true,
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "shadow",
|
|
},
|
|
formatter: function (params) {
|
|
// 僅顯示 bar 系列的資料
|
|
const barData = params.filter((item) => item.seriesType === "bar");
|
|
return barData
|
|
.map((item) => `${item.seriesName}: ${item.data}`)
|
|
.join("<br/>");
|
|
},
|
|
},
|
|
legend: {
|
|
show: false, // 隱藏 legend
|
|
},
|
|
};
|
|
};
|
|
|
|
// 分別生成每個圖表的 option
|
|
const yesterdayTodayOption = generateCylinderChartOption(
|
|
yesterdayTodayData.categories,
|
|
yesterdayTodayData.values,
|
|
chartColors.yesterdayToday
|
|
);
|
|
const weekComparisonOption = generateCylinderChartOption(
|
|
weekComparisonData.categories,
|
|
weekComparisonData.values,
|
|
chartColors.weekComparison
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-wrap">
|
|
<!-- 昨天與今天的用電比較 -->
|
|
<div class="lg:w-1/2 w-full chart-data relative px-8 py-3">
|
|
<div class="flex flex-wrap items-center">
|
|
<h2 class="text-xs font-light w-1/2 relative">
|
|
{{ $t("dashboard.elec_consumption_comparison_trend") }}
|
|
(kWH)
|
|
</h2>
|
|
<div class="w-[48%]">
|
|
<div class="text-con">
|
|
<img src="@ASSET/img/chart-title01.svg" />
|
|
<span>2024.11.8 {{ $t("dashboard.electricity_consumption") }}</span>
|
|
</div>
|
|
<div class="text-con">
|
|
<img src="@ASSET/img/chart-title02.svg" />
|
|
<span>2024.11.7 {{ $t("dashboard.electricity_consumption") }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="h-[250px]">
|
|
<BarChart
|
|
id="dashboard_chart_yesterday_today"
|
|
class="h-full"
|
|
:option="yesterdayTodayOption"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 本週與上週的用電比較 -->
|
|
<div class="lg:w-1/2 w-full chart-data relative px-8 py-3">
|
|
<div class="flex flex-wrap items-center">
|
|
<h2 class="text-xs font-light w-1/2 relative">
|
|
{{ $t("dashboard.this_last_week") }}<br />
|
|
{{ $t("dashboard.elec_consumption_comparison") }}
|
|
(kWH)
|
|
</h2>
|
|
<div class="w-[48%]">
|
|
<div class="text-con">
|
|
<img src="@ASSET/img/chart-title03.svg" />
|
|
<span>{{ $t("dashboard.thisweek_electricity_consumption") }}</span>
|
|
</div>
|
|
<div class="text-con">
|
|
<img src="@ASSET/img/chart-title04.svg" />
|
|
<span>{{ $t("dashboard.lastweek_electricity_consumption") }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="h-[250px]">
|
|
<BarChart
|
|
id="dashboard_chart_week_comparison"
|
|
class="h-full"
|
|
:option="weekComparisonOption"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.chart-data:before {
|
|
@apply absolute right-0 left-2 top-0 h-10 w-10 bg-no-repeat z-10;
|
|
content: "";
|
|
background: url(@ASSET/img/chart-data-background01.svg) center center;
|
|
}
|
|
|
|
.chart-data::after {
|
|
@apply absolute right-0 bottom-0 h-10 w-10 bg-no-repeat z-10;
|
|
content: "";
|
|
background: url(@ASSET/img/chart-data-background02.svg) center center;
|
|
}
|
|
|
|
h2:after {
|
|
@apply absolute -bottom-2 left-1/3 block translate-y-1/2 w-3/5 h-[1px] bg-success rounded-3xl;
|
|
content: "";
|
|
}
|
|
|
|
.text-con {
|
|
@apply relative text-white text-xs block mb-1;
|
|
}
|
|
|
|
.text-con span {
|
|
@apply absolute top-1/2 w-[90%] left-0 right-0 m-auto -translate-y-1/2 text-xs text-center;
|
|
}
|
|
</style>
|