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],
])

总结

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

感谢各位大佬观看

相关推荐
excel9 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel10 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼11 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping11 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙12 小时前
[译] Composition in CSS
前端·css
白水清风12 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix13 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780013 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端13 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧13 小时前
Promise 的使用
前端·javascript