106 lines
1.9 KiB
Vue
106 lines
1.9 KiB
Vue
<script setup>
|
|
import { ref, onMounted, onUnmounted } from "vue";
|
|
import * as echarts from "echarts"; // 引入 echarts
|
|
|
|
// 假資料
|
|
const data = {
|
|
categories: [
|
|
"16:22:29",
|
|
"16:22:37",
|
|
"16:22:47",
|
|
"16:23:00",
|
|
"16:23:08",
|
|
"16:23:18",
|
|
],
|
|
series: [
|
|
{
|
|
name: "即時趨勢",
|
|
type: "line",
|
|
data: [320, 310, 300, 305, 310, 300],
|
|
smooth: true,
|
|
lineStyle: {
|
|
width: 3,
|
|
},
|
|
},
|
|
{
|
|
name: "契約容量",
|
|
type: "line",
|
|
data: [400, 400, 400, 400, 400, 400],
|
|
smooth: true,
|
|
lineStyle: {
|
|
width: 3,
|
|
},
|
|
},
|
|
{
|
|
name: "警戒容量",
|
|
type: "line",
|
|
data: [350, 350, 350, 350, 350, 350],
|
|
smooth: true,
|
|
lineStyle: {
|
|
width: 3,
|
|
},
|
|
},
|
|
{
|
|
name: "偵測值",
|
|
type: "line",
|
|
data: [280, 300, 290, 295, 300, 290],
|
|
smooth: true,
|
|
lineStyle: {
|
|
width: 3,
|
|
},
|
|
},
|
|
],
|
|
};
|
|
|
|
const demand_chart = ref(null);
|
|
const defaultChartOption = ref({
|
|
tooltip: {
|
|
trigger: "axis",
|
|
},
|
|
legend: {
|
|
data: data.series.map((s) => s.name),
|
|
orient: "horizontal",
|
|
bottom: "0%",
|
|
},
|
|
grid: {
|
|
top: "10%",
|
|
left: "0%",
|
|
right: "5%",
|
|
bottom: "10%",
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
data: data.categories,
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
},
|
|
series: data.series,
|
|
});
|
|
|
|
let chartInstance = null; // 图表实例
|
|
|
|
onMounted(() => {
|
|
chartInstance = echarts.init(demand_chart.value);
|
|
chartInstance.setOption(defaultChartOption.value);
|
|
|
|
window.addEventListener("resize", () => {
|
|
chartInstance.resize();
|
|
});
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
if (chartInstance) {
|
|
chartInstance.dispose();
|
|
}
|
|
window.removeEventListener("resize", () => {
|
|
chartInstance.resize();
|
|
});
|
|
});
|
|
</script>
|
|
<template>
|
|
<div ref="demand_chart" style="width: 100%; height: 200px"></div>
|
|
</template>
|
|
<style scoped></style>
|