100 lines
1.7 KiB
Vue
100 lines
1.7 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: ["Carbon Equivalent", "Reduction Target"],
|
|
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: "Carbon Equivalent",
|
|
type: "bar",
|
|
data: [
|
|
5400, 6500, 7200, 7500, 9800, 9500, 11200, 11500, 11800, 7500, 6500,
|
|
5500,
|
|
],
|
|
itemStyle: {
|
|
color: "#45f4ef",
|
|
},
|
|
},
|
|
{
|
|
name: "Reduction Target",
|
|
type: "bar",
|
|
data: [
|
|
5000, 6000, 6000, 7000, 9500, 9000, 10000, 11000, 10000, 7200, 6000,
|
|
5000,
|
|
],
|
|
itemStyle: {
|
|
color: "#ffd345",
|
|
},
|
|
},
|
|
],
|
|
});
|
|
|
|
onMounted(() => {
|
|
//
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="bg-slate-800 p-3">
|
|
<div class="text-white mb-3 text-base">
|
|
{{ $t("energy.monthly_carbon_emission_and_reduction") }}
|
|
</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>
|