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

总结

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

感谢各位大佬观看

相关推荐
有梦想的刺儿3 分钟前
webWorker基本用法
前端·javascript·vue.js
cy玩具24 分钟前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
清灵xmf1 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据1 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161771 小时前
防抖函数--应用场景及示例
前端·javascript
334554322 小时前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test2 小时前
js下载excel示例demo
前端·javascript·excel
Yaml42 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事2 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶2 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json