95 lines
2.4 KiB
Vue
95 lines
2.4 KiB
Vue
<script setup>
|
|
import { ref, onMounted, nextTick } from "vue";
|
|
import * as echarts from "echarts";
|
|
|
|
const chartDiv = ref(null);
|
|
|
|
const chartOption = {
|
|
tooltip: {
|
|
trigger: "item",
|
|
formatter: "{b}: {c}kWh",
|
|
},
|
|
series: [
|
|
{
|
|
type: "sankey",
|
|
layout: "none",
|
|
nodeWidth: 20,
|
|
nodeGap: 10,
|
|
data: [
|
|
{ name: "Total", value: 100 },
|
|
{ name: "HVAC System", value: 40 },
|
|
{ name: "Lighting System", value: 25 },
|
|
{ name: "Elevator System", value: 15 },
|
|
{ name: "Outlets", value: 10 },
|
|
{ name: "Others", value: 10 },
|
|
],
|
|
links: [
|
|
{ source: "Total", target: "HVAC System", value: 40 },
|
|
{ source: "Total", target: "Lighting System", value: 25 },
|
|
{ source: "Total", target: "Elevator System", value: 15 },
|
|
{ source: "Total", target: "Outlets", value: 10 },
|
|
{ source: "Total", target: "Others", value: 10 },
|
|
],
|
|
emphasis: {
|
|
focus: "adjacency",
|
|
},
|
|
label: {
|
|
position: "right",
|
|
fontSize: 14,
|
|
color: "#fff",
|
|
},
|
|
itemStyle: {
|
|
borderWidth: 0,
|
|
},
|
|
lineStyle: {
|
|
color: "target",
|
|
opacity: 0.7,
|
|
curveness: 0.5,
|
|
},
|
|
},
|
|
],
|
|
};
|
|
|
|
onMounted(() => {
|
|
nextTick(() => {
|
|
const myChart = echarts.init(chartDiv.value);
|
|
myChart.setOption(chartOption);
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="p-3">
|
|
<h2 class="text text-lg text-white mb-5 relative">
|
|
{{ $t("energy.elec_consumption") }}
|
|
</h2>
|
|
<div class="chart-container">
|
|
<div ref="chartDiv" class="w-full min-h-[190px] h-full"></div>
|
|
</div>
|
|
<div class="text-sm mt-3.5">
|
|
<ul class="flex flex-wrap items-center text-white">
|
|
<li class="pr-5 relative z-20">
|
|
<span class="pr-3.5"> {{ $t("energy.total_elec") }} (kWh)</span>
|
|
<span class="pr-3.5">160.05</span>
|
|
</li>
|
|
<li class="pr-5 relative z-20">
|
|
<span class="pr-3.5">{{ $t("energy.green_elec") }} (kWh)</span>
|
|
<span class="pr-3.5">39.50</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.text::after {
|
|
@apply absolute -bottom-2.5 left-0 block w-3/5 h-[1px] bg-slate-600;
|
|
content: "";
|
|
}
|
|
|
|
ul li:last-child:after {
|
|
@apply absolute top-0 bottom-0 left-full block w-full h-[1px] bg-slate-600 m-auto z-10;
|
|
content: "";
|
|
}
|
|
</style>
|