设备状态图表-甘特图

1.背景：设备状态监控图表，监控不同状态的时间段，可以使用甘特图来展示效果
在这里插入图片描述
鼠标经过时的数据提示框

2、代码实现

<template><divref="ganttChartRefs":style="{ height: '6.2rem', width: '100%' }"class="bg_screen"></div>
</template>
<script lang="ts" setup>
import { onMounted, ref, watch, nextTick,onBeforeUnmount } from "vue";
import * as echarts from "echarts";
// import { GaugeChart } from "echarts/charts";
import { useDebounceFn, useResizeObserver } from "@vueuse/core";
// echarts.use([GaugeChart]); // 引入仪表盘 看版本 echart5以上不需要引入
const chartInstance = ref<any>(null);
const ganttChartRefs = ref<any>(null);
const myChart = ref<any>(null);
const props = defineProps({chartData: {type: Array,default: () => [],},
});
function setChartOptions(data:any) {myChart.value = echarts.init(ganttChartRefs.value);var types:any = [{ value: "1", color: "#91cc75", label: '运行'},{ value: "2", color: "#ccc", label: '停机'},{ value: "3", color: "#fd666d", label: '故障'},];var datatemp = data.map((d:any) => ({  // 数据集处理name: types.filter((a:any) => a.value == d.STATUSDESC)[0].label,  // 状态名称value: [parseInt(d.GROUPID),new Date(d.RUNTIME).getTime(),  // 处理成时间辍的格式new Date(d.END_TIME).getTime(),],itemStyle: {normal: {color: types.filter((a:any) => a.value == d.STATUSDESC)[0].color, // 状态颜色的绑定},},}));var groupedData = datatemp.reduce((acc:any, curr:any) => {if (!acc[curr.value[0]]) {acc[curr.value[0]] = [];}acc[curr.value[0]].push(curr);return acc;}, {});  // 状态值组合成一组 以便后面排序var gaps:any = [];const now = new Date();// 更新起始时间为当前时间前24小时
const twentyFourHoursAgo = now.getTime() - 24 * 60 * 60 * 1000;
// 获取第一条数据的开始时间
const firstRecordTime = new Date(data[0]?.RUNTIME).getTime();
// 检查是否有空隙（即不足24小时时）
if (firstRecordTime > twentyFourHoursAgo) {// 添加到 gaps 数组gaps.unshift([parseInt(data[0]?.GROUPID), twentyFourHoursAgo, firstRecordTime]);
}Object.keys(groupedData).forEach((groupID) => {var groupData = groupedData[groupID];// 按开始时间排序groupData.sort((a:any, b:any) => a.value[1] - b.value[1]);let lastEndTime = twentyFourHoursAgo; // 起始时间为当前时间前24小时for (var i = 0; i < groupData.length; i++) {var currentStartTime = groupData[i].value[1];var currentEndTime = groupData[i].value[2];if (currentStartTime > lastEndTime) {gaps.push([parseInt(groupID), lastEndTime, currentStartTime]);}lastEndTime = Math.max(lastEndTime, currentEndTime);}// 检查最后一个时间段结束时间与24小时结束时间之间的空隙if (lastEndTime < now.getTime()) {gaps.push([parseInt(groupID), lastEndTime,now.getTime()]);}});function renderItem(params:any, api: any) {var categoryIndex = api.value(0);var start = api.coord([api.value(1), categoryIndex]);var end = api.coord([api.value(2), categoryIndex]);var height = api.size([0, 1])[1] * 0.6;var rectShape = echarts.graphic.clipRectByRect({x: start[0],y: start[1] - height / 2,width: end[0] - start[0],height: height,},{x: params.coordSys.x,y: params.coordSys.y,width: params.coordSys.width,height: params.coordSys.height,});var shapes;shapes = rectShape && {type: "rect",transition: ["shape"],shape: rectShape,style: api.style(),};return shapes;}const series = [{type: "custom",renderItem: renderItem,encode: {x: [1, 2],y: 0,},data: datatemp,},{type: "custom",renderItem: renderItem,z: -1, // 放在最底层data: gaps,},];const option = {grid: {left: "1%",right: "1%",top: "1%",bottom: 2,height: "28%",width: "98%",containLabel: true,},tooltip: {show: true,textStyle: {fontSize: 10,},position: function (point:any, size:any) {var mouseX = point[0];var mouseY = point[1];// 获取容器的宽度和 tooltip 的宽度var containerWidth = size.viewSize&&size.viewSize[0];var tooltipWidth =  size.contentSize&&size.contentSize[0];// 调整 tooltip 的位置var offsetX = 10; // x 方向偏移量var offsetY = 1; // y 方向偏移量// 如果 tooltip 超出容器的右侧，将其显示在鼠标的左侧if (mouseX + tooltipWidth + offsetX > containerWidth) {// 新的位置坐标var newX = mouseX - tooltipWidth - offsetX;var newY = mouseY + offsetY;// 返回新的位置坐标return [newX, newY];} else {// tooltip 显示在鼠标的下方var newX:number = mouseX + offsetX;var newY:any = mouseY + offsetY;// 返回新的位置坐标return [newX, newY];}},formatter: function (params:any) {// 参数校验if (!Array.isArray(params.value) || params.value.length < 2) {return "";}try {const startTime = params.value[1];const endTime = params.value[2];if (endTime < startTime) {return "";}const duration = endTime - startTime;const hours = Math.floor(duration / (1000 * 60 * 60));const minutes = Math.floor((duration % (1000 * 60 * 60)) / (1000 * 60));const seconds = Math.floor((duration % (1000 * 60)) / 1000);// 获取带前导0的小时、分钟和秒const formatTimeUnit = (unit:any) =>unit < 10 ? "0" + unit : unit.toString();const formattedStartTimeHours = formatTimeUnit(new Date(startTime).getHours());const formattedStartTimeMinutes = formatTimeUnit(new Date(startTime).getMinutes());const formattedStartTimeSeconds = formatTimeUnit(new Date(startTime).getSeconds());const formattedEndTimeHours = formatTimeUnit(new Date(endTime).getHours());const formattedEndTimeMinutes = formatTimeUnit(new Date(endTime).getMinutes());const formattedEndTimeSeconds = formatTimeUnit(new Date(endTime).getSeconds());const formattedTimeSeconds = formatTimeUnit(seconds);let formattedDuration = `${hours}小时${minutes}分${formattedTimeSeconds}秒`;// output 鼠标经过的时候展示的文本let output = `${params.marker}${params.name}${params.seriesIndex === 1? `空闲时长：`: `时长：`}${formattedDuration}<br/>`;output += `${params.marker}时间区间：${formattedStartTimeHours}:${formattedStartTimeMinutes}:${formattedStartTimeSeconds} - ${formattedEndTimeHours}:${formattedEndTimeMinutes}:${formattedEndTimeSeconds}`;return output;} catch (error) {return ""; // 根据实际情况考虑是否返回错误信息或特定的格式化失败字符串}},},dataZoom: [{type: "inside",filterMode: "none",showDataShadow: false,show: true,},],xAxis: {type: "time",min: new Date().getTime() - 24 * 60 * 60 * 1000, // 24小时前max: new Date().getTime(), // 当前时间axisLabel: {formatter: function (value:any) {var date = new Date(value);var hours = date.getHours();var minutes = date.getMinutes();var seconds = date.getSeconds();// 如果分钟和秒都是0，则只显示小时（例如：00）if (minutes === 0 && seconds === 0) {return hours === 0? "00:00": echarts.format.formatTime("hh:mm", value);}// 其他情况显示小时、分钟和秒（例如：01:30:45）return echarts.format.formatTime("hh:mm:ss", value);},// 标签与轴线紧挨在一起padding: [0, 0, 0, 0], // 标签的内边距（可根据实际情况调整）// rotate: 30, // 旋转角度，避免标签重叠（可选）},splitNumber: 24,splitLine: {show: false,},axisLine: {show: false, // 隐藏坐标轴线},axisTick: {show: false, // 隐藏刻度线},},yAxis: [{yAxisIndex: 0,type: "category",data: [""],axisLine: {show: false,},axisTick: {show: false,},axisLabel: {show: false,},},],series: series,};useResizeObserver(ganttChartRefs.value, resizeChart);myChart.value.setOption(option);
}
// 窗口自适应并开启过渡动画
const resize = () => {if (chartInstance.value) {chartInstance.value.resize({ animation: { duration: 300 } });}
};
// 重绘图表函数
const resizeChart = useDebounceFn(() => {myChart.value?.resize();
}, 300);
const debouncedResize = useDebounceFn(resize, 500, { maxWait: 800 });
watch(() => props.chartData,() => {nextTick(() => {setChartOptions(props.chartData);});},{immediate: true,}
);
onMounted(() => {window.addEventListener("resize", debouncedResize);
});
onBeforeUnmount(() => {myChart.value?.dispose();myChart.value = null;window.removeEventListener("resize", debouncedResize);
});
</script>

3.数据源：组件传过来 props.chartData
格式如下：

var data = [{"GROUPID": "0", // 组别 因为考虑到有多种设备情况 若只有一种 默认0就好"END_TIME": "2024-08-25 18:35:31",  // 结束时间"RUNTIME": "2024-08-25 18:25:07",   // 开始时间"STATUSDESC": "1" // 状态值},{"GROUPID": "0","END_TIME": "2024-08-26 00:25:49","RUNTIME": "2024-08-25 18:05:31","STATUSDESC": "2"},{"GROUPID": "0","END_TIME": "2024-08-26 01:26:29","RUNTIME": "2024-08-26 00:25:49","STATUSDESC": "1"},{"GROUPID": "0","END_TIME": "2024-08-26 04:31:38","RUNTIME": "2024-08-26 01:26:29","STATUSDESC": "1"},{"GROUPID": "0","END_TIME": "2024-08-26 04:37:25","RUNTIME": "2024-08-26 11:31:38","STATUSDESC": "2"},{"GROUPID": "0","END_TIME": "2024-08-26 06:52:45","RUNTIME": "2024-08-26 04:37:25","STATUSDESC": "3"},{"GROUPID": "0","END_TIME": "2024-08-26 06:54:42","RUNTIME": "2024-08-26 06:52:45","STATUSDESC": "2"},{"GROUPID": "0","END_TIME": "2024-08-26 08:01:53","RUNTIME": "2024-08-26 06:54:42","STATUSDESC": "1"},{"GROUPID": "0","END_TIME": "2024-08-26 08:40:18","RUNTIME": "2024-08-26 08:01:53","STATUSDESC": "3"},{"GROUPID": "0","END_TIME": "2024-08-26 08:53:59","RUNTIME": "2024-08-26 08:40:18","STATUSDESC": "1"},{"GROUPID": "0","END_TIME": "2024-08-26 08:03:59","RUNTIME": "2024-08-26 08:53:59","STATUSDESC": "1"},{"GROUPID": "0","END_TIME": "2024-08-26 09:29:19","RUNTIME": "2024-08-26 09:03:59","STATUSDESC": "1"},{"GROUPID": "0","END_TIME": "2024-08-26 09:51:48","RUNTIME": "2024-08-26 09:29:19","STATUSDESC": "1"},{"GROUPID": "0","END_TIME": "2024-08-26 12:01:42","RUNTIME": "2024-08-26 09:51:48","STATUSDESC": "1"},{"GROUPID": "0","END_TIME": "2024-08-26 14:42:49","RUNTIME": "2024-08-26 12:01:42","STATUSDESC": "1"}]