112 lines
2.0 KiB
Vue
112 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: ["尖峰", "半尖峰", "離峰度數"],
|
|
textStyle: {
|
|
color: "#ffffff",
|
|
fontSize: 16,
|
|
},
|
|
orient: "horizontal",
|
|
bottom: "0%",
|
|
},
|
|
grid: {
|
|
top: "5%",
|
|
left: "0%",
|
|
right: "0%",
|
|
bottom: "15%",
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
data: [
|
|
"1月",
|
|
"2月",
|
|
"3月",
|
|
"4月",
|
|
"5月",
|
|
"6月",
|
|
"7月",
|
|
"8月",
|
|
"9月",
|
|
"10月",
|
|
"11月",
|
|
"12月",
|
|
],
|
|
axisLabel: {
|
|
color: "#ffffff",
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
axisLabel: {
|
|
color: "#ffffff",
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: "尖峰",
|
|
type: "bar",
|
|
stack: "total",
|
|
data: [
|
|
5000, 5500, 7000, 7500, 9000, 9500, 11000, 11500, 11000, 7500, 6500,
|
|
5500,
|
|
],
|
|
itemStyle: {
|
|
color: "#45f4ef",
|
|
},
|
|
},
|
|
{
|
|
name: "半尖峰",
|
|
type: "bar",
|
|
stack: "total",
|
|
data: [
|
|
3000, 3200, 4500, 4800, 5200, 5800, 6000, 6100, 6200, 5300, 4500, 4000,
|
|
],
|
|
itemStyle: {
|
|
color: "#ffd345",
|
|
},
|
|
},
|
|
{
|
|
name: "離峰度數",
|
|
type: "bar",
|
|
stack: "total",
|
|
data: [
|
|
2000, 2500, 3500, 4000, 4500, 5000, 5200, 5300, 5400, 4500, 4000, 3500,
|
|
],
|
|
itemStyle: {
|
|
color: "#64ed81",
|
|
},
|
|
},
|
|
],
|
|
});
|
|
|
|
onMounted(() => {
|
|
//
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="bg-slate-800 p-3">
|
|
<div class="text-white mb-3 text-base">每月計費度數 (kWh)</div>
|
|
<div class="bar-box">
|
|
<BarChart
|
|
id="billing_degree_chart"
|
|
class="min-h-[200px] w-full h-full"
|
|
:option="defaultChartOption"
|
|
ref="degree_chart"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped></style>
|