--- theme: smartblue --- # vue3封装一个基础甘特图 * 只支持简单展示功能 * 代码通俗易懂 ## 效果图：微信截图_20250110150408.png

## 主要计算 1. 计算出整体的日期范围 2. 根据每项开始时间和结束时间计算出每一项所占的长度微信图片_20250110151335.png

```js // 基础甘特图封装 import { ref } from 'vue' import dayjs from 'dayjs' const data = [ { order: 'AWM69963320-1', start: '2023-01-01', end: '2023-01-15', progress: 50 }, { order: 'AWM69963320-1', start: '2023-01-18', end: '2023-02-15', progress: 30 }, { order: 'AWM69963320-1', start: '2023-01-01', end: '2023-01-20', progress: 20 }, { order: 'AWM69963320-1', start: '2023-02-18', end: '2023-02-25', progress: 10 }, ] // 日期数组 const dates = ref([]) const itemWidth = 30 const init = () => { const earliestStart = data.reduce((min, item) => dayjs(item.start).isBefore(dayjs(min)) ? item.start : min, data[0].start) const latestEnd = data.reduce((max, item) => dayjs(item.end).isAfter(dayjs(max)) ? item.end : max, data[0].end) let currentDate = dayjs(earliestStart) let endDate = dayjs(latestEnd).add(1, 'day') while (currentDate.isBefore(endDate)) { dates.value.push(currentDate.format('YYYY-MM-DD')); currentDate = currentDate.add(1, 'day'); } } // 计算每个任务的起始位置和宽度 const calculatePositionAndWidth = (item: any) => { const startIndex = dates.value.findIndex((date) => date === item.start) const endIndex = dates.value.findIndex((date) => date === item.end) const position = startIndex * itemWidth const width = (endIndex - startIndex + 1) * itemWidth console.log(width, position); return { position, width } } init() ``` `代码还是非常少的，计算出日期存储到数组中用于渲染头部和每项长度的计算。` 1. itemWidth: 头部每个日期的宽度（可以根据实际需求自行调整，我这只需要展示日，所以设定的比较短。） 2. 渲染每条数据时都调用函数 calculatePositionAndWidth 计算出元素的偏移量和宽度。 3. 偏移量：`起始日期在数组中的位置 x 每个日期的宽度（itemWidth）` 4. 实际宽度：`（结束日期在数组中的位置 - 起始日期在数组中的位置 + 1）x 每个日期的宽度（itemWidth）`,宽度需要加一个单位，这很好理解吧，假设起始日期在0位置，结束日期在1位置，1 - 0 = 1，而实际占了两个位置，所以需要 + 1。 5. 有了偏移量和宽度，剩下的就是布局了，完整代码如下。 ## 完整代码 1. css中： `--labelWidth: 150px;` 2. \--labelWidth: 侧边栏的宽度，相当于 5 个日期长度，`这个长度布局会用到`。 3. "{ width: `${(dates.length + 5) * itemWidth}px` }"，给每一项都赋予宽度，这个 + 5 就是侧边栏的宽度。数据太多太长的，滚动的时候需要固定左侧栏目和顶部日期，利于阅读。如果不指定每一项宽度，可能会导致，底部的border只有一部分。 4. 至此，一个简单的甘特图封装完成。 ```js ``` ## 补充滚动条样式 * scrollBar（滚动条样式）是单独封装在sass文件中的，所以没在原文中显示，补充一下滚动条样式 ```css //滚动条 .scrollBar{ overflow-y: overlay; &::-webkit-scrollbar { width: 8px; height: 8px; } &::-webkit-scrollbar-track { background: transparent; } &::-webkit-scrollbar-thumb { background-color: #bfbfbf; border-radius: 5px; border: 1px solid #F1F1F1; box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); } &::-webkit-scrollbar-thumb:hover { background-color: #A8A8A8; } &::-webkit-scrollbar-thumb:active { background-color: #787878; } /*边角，即两个滚动条的交汇处*/ &::-webkit-scrollbar-corner { background-color: #FFFFFF; } } ```