100 lines
2.2 KiB
Vue
100 lines
2.2 KiB
Vue
<script setup>
|
|
import { ref, watch, onMounted, nextTick } from "vue";
|
|
import * as echarts from "echarts";
|
|
import Container from "../Base/Container.vue";
|
|
import { useWsStore } from "../../store";
|
|
import chartSetup from "./HourChartOptions";
|
|
|
|
const store = useWsStore();
|
|
const chartChart = ref(null);
|
|
const chart = ref(null);
|
|
// 小时数据
|
|
const hourData = ref([
|
|
// { hour: "0:1", data: 10 },
|
|
// { hour: "0:2", data: 13 },
|
|
// { hour: "0:3", data: 20 },
|
|
// { hour: "0:4", data: 12 },
|
|
// { hour: "0:5", data: 12 },
|
|
// { hour: "0:6", data: 11 },
|
|
// { hour: "0:7", data: 10 },
|
|
// { hour: "0:8", data: 1 },
|
|
]);
|
|
store.$subscribe((mutation, state) => {
|
|
if (
|
|
state.data2.lineHourList == undefined ||
|
|
state.data2.lineHourList?.length == 0
|
|
) {
|
|
hourData.value.splice(0);
|
|
if (chart.value) chart.value.dispose();
|
|
return;
|
|
}
|
|
hourData.value = (state.data2?.lineHourList ?? []).map((item, index) => ({
|
|
id: `${item.lineName}_${index}`,
|
|
hour: item.hour || `${index}`.padStart(2, "0"),
|
|
data: item.num || Math.floor(Math.random() * 100),
|
|
}));
|
|
setupChart();
|
|
});
|
|
|
|
function setupChart() {
|
|
if (chart.value) chart.value.dispose();
|
|
nextTick(() => {
|
|
chart.value = echarts.init(chartChart.value);
|
|
chartSetup(
|
|
chart.value,
|
|
hourData.value.map((item) => item.hour),
|
|
hourData.value.map((item) => item.data)
|
|
);
|
|
});
|
|
}
|
|
|
|
onMounted(() => {
|
|
chartChart.value.classList.add("h-full");
|
|
// setupChart();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Container class="chart" title="小时数据" icon="cube">
|
|
<div
|
|
ref="chartChart"
|
|
class="chart-chart"
|
|
style="{opacity: (hourData && hourData.length > 0) ? 1 : 0}"
|
|
></div>
|
|
<p v-show="!hourData || hourData.length === 0" class="empty-data-hint">
|
|
暂无数据
|
|
</p>
|
|
</Container>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.chart {
|
|
/* height: 300px; */
|
|
height: auto;
|
|
}
|
|
|
|
.chart-chart {
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
.empty-data-hint {
|
|
color: #c5c5c5;
|
|
letter-spacing: 1px;
|
|
font-size: 24px;
|
|
line-height: 1.25;
|
|
text-align: center;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
display: inline-block;
|
|
width: 200px;
|
|
height: 32px;
|
|
user-select: none;
|
|
}
|
|
</style>
|