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

甘特图

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

文章目录


前言

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

echarts效果


效果图

组件

javascript 复制代码
<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>

使用

javascript 复制代码
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],
])

总结

简单使用,至于数据需要处理后传入

感谢各位大佬观看

相关推荐
永乐春秋32 分钟前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿34 分钟前
【前端】CSS
前端·css
ggdpzhk35 分钟前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
小曲曲2 小时前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•3 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS4 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜5 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点5 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow5 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o5 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app