CviLux_fe/src/views/energyManagement/components/CarbonEmissionChart.vue

89 lines
1.5 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"],
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",
},
}
],
});
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>