115 lines
2.0 KiB
Vue
115 lines
2.0 KiB
Vue
<script setup>
|
|
import BarChart from "@/components/chart/BarChart.vue";
|
|
import { ref, onMounted } from "vue";
|
|
|
|
const defaultChartOption = ref({
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "shadow",
|
|
},
|
|
},
|
|
legend: {
|
|
data: ["Var. Elec. Cost", "Fixed Elec. Cost", "Total Elec. Cost"],
|
|
textStyle: {
|
|
color: "#ffffff",
|
|
fontSize: 14,
|
|
},
|
|
orient: "horizontal",
|
|
bottom: "0%",
|
|
},
|
|
grid: {
|
|
top: "5%",
|
|
left: "0%",
|
|
right: "0%",
|
|
bottom: "15%",
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
data: [
|
|
"Jan",
|
|
"Feb",
|
|
"Mar",
|
|
"Apr",
|
|
"May",
|
|
"Jun",
|
|
"Jul",
|
|
"Aug",
|
|
"Sep",
|
|
"Oct",
|
|
"Nov",
|
|
"Dec",
|
|
],
|
|
axisLabel: {
|
|
color: "#ffffff",
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
axisLabel: {
|
|
color: "#ffffff",
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: "Var. Elec. Cost",
|
|
type: "bar",
|
|
stack: "total",
|
|
data: [
|
|
15000, 16000, 20000, 21000, 25000, 26000, 30000, 31000, 35000, 27600,
|
|
16500, 15000,
|
|
],
|
|
itemStyle: {
|
|
color: "#45f4ef",
|
|
},
|
|
},
|
|
{
|
|
name: "Fixed Elec. Cost",
|
|
type: "bar",
|
|
stack: "total",
|
|
data: [
|
|
5000, 5500, 7000, 7500, 9000, 9500, 11000, 11500, 11000, 7500, 6500,
|
|
5500,
|
|
],
|
|
itemStyle: {
|
|
color: "#ffd345",
|
|
},
|
|
},
|
|
|
|
{
|
|
name: "Total Elec. Cost",
|
|
type: "bar",
|
|
stack: "total",
|
|
data: [
|
|
3000, 3000, 4000, 5000, 12000, 17000, 20000, 20000, 12000, 12000, 5000,
|
|
0,
|
|
],
|
|
itemStyle: {
|
|
color: "#64ed81",
|
|
},
|
|
},
|
|
],
|
|
});
|
|
|
|
onMounted(() => {
|
|
//
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="bg-slate-800 p-3">
|
|
<div class="text-white mb-3 text-base">
|
|
{{ $t("energy.monthly_elec_consumption") }}
|
|
</div>
|
|
<div class="bar-box">
|
|
<BarChart
|
|
id="electricity_bill_chart"
|
|
class="min-h-[200px] w-full h-full"
|
|
:option="defaultChartOption"
|
|
ref="bill_chart"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|