vue3 手动简单 24h 甘特图封装

甘特图

手动封装简版甘特图，纯展示功能，无其他操作

文章目录

甘特图
前言
效果图
组件
使用
总结

前言

开始的思路是使用echarts 瀑布图来体现，但是试验后发现，头部时间功能不满足，然未找到其他组件，于是手动封装一个，比较简陋，凑乎看。

echarts效果

效果图

请添加图片描述

组件

<template><div class="gantt_chart"><ul class="title" :style="{height}"><li  v-for="i in 24" :key="i"><p class="title_font">{{ i.toString().length == 1 ? `0${i}` : i }}</p><p class="title_node"></p></li></ul><div class="gantt_chart_columns" v-for="v,i in chartData" :key="i" :style="{height}"><p class="time_value" :style="{width:getWidth(v),left:getLeft(v)}"></p></div></div></template><script setup>import {computed,toRefs } from 'vue';let props = defineProps({chartData:{type:Object,default:() =>  {return []}},height:{type:String,default:() =>  {return ''}}
})const { chartData } = toRefs(props);const getWidth = computed(() =>{return function (val) {if (val.length == 2) {if (val[0] > val[1]) {let num = ((val[0] - val[1]) / 24 * 100).toString() + '%'return num} else {let num = ((val[1] - val[0]) / 24 * 100).toString() + '%'return num}}}})const getLeft = computed(() =>{return function (val) {if (val.length == 2) {if (val[0] > val[1]) {let num = (val[1] / 24 * 100).toString() + '%'return num} else {let num = (val[0] / 24 * 100).toString() + '%'return num}}}
})</script>
<style scoped lang="scss">.gantt_chart{width: 100%;height: 100%;border: 1px solid #2e5c80;overflow: auto;.title{width: 100%;// height: 16.6666%;overflow: hidden;display: flex;justify-content: space-evenly;overflow: hidden;border-bottom: 1px solid #2e5c80;margin: 0;padding: 0;li {width: 4%;position: relative;text-align: center;list-style:none;box-sizing: border-box;}.title_font {display: inline-block;height: 22px;margin: 0;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}.title_node {width: 1px;height: 10px;margin: 0;background: #1ea9fa;position: absolute;left: 50%;bottom: 0;transform: translateX(-50%);}}.gantt_chart_columns {width: 100%;// height: 16.6666%;overflow: hidden;border-bottom: 1px solid #2e5c80;.time_value {height: 50%;position: relative;top: 50%;transform: translateY(-50%);margin: 0;background-color: #00ccff;}}.gantt_chart_columns:last-child {border-bottom:none;}}
</style>

使用

import GanttChart from '@/components/GanttChart.vue';<GanttChart style="width:50%;height:30%; margin-top: 1.1%;" :chartData="chartData" height="16.3%"/>import { ref } from 'vue';
let chartData = ref([[1.2,16.4],[5.5,10.8],[1,6.2],[5.2,9],[8.3,10.8],
])