在vue项目中使用canvas实现甘特图
前言
上周部门组织前端代码审查，同事分析了一下使用canvas来实现甘特图的业务。大体常见是在el-table里显示甘特图，最开始是通过span标签来进行渲染的，但是存在一个比较严重的问题。假设一个插槽内渲染3个span标签，一行有20列，这就是60个span标签 ；如果一次查询100条数据就会有6000个span标签。这样造成的结果就是当数据量特别大时需要渲染特别多的dom元素，最终导致页面卡死，无法进行其他操作。
同事的优化方案是，用canvas来替换span 标签，这样一个插槽内只需要一个canvas标签，这样最终只需要渲染 列数 * 查询的总条数，这样减少了大量dom元素的渲染。
感觉方案还是非常不错的，就自己抽空写了一个简单的demo
实现
用canvas实现甘特图其实最终还是转换成用canvas来画矩形。对canvas不熟悉的可以看一下我的这两篇文章
canvas基础
canvas动画
基本可以简单入门（我自己水平也就是皮毛，就是做一点简单的东西也要查一下😅）
效果图
demo代码
<template>
<div>
<el-table :data="tableData" style="width: 700px;" border>
<el-table-column prop="monday" label="星期一">
<template v-slot="scope">
<gantt-chart id="monday" :width="100" desc="星期一" descColor="#fff" :list="scope.row.monday">
</gantt-chart>
</template>
</el-table-column>
<el-table-column prop="tuesday" label="星期二">
<template v-slot="scope">
<gantt-chart id="tuesday" :width="100" desc="星期二" descColor="#fff" :list="scope.row.tuesday">
</gantt-chart>
</template>
</el-table-column>
<el-table-column prop="wednesday" label="星期三">
<template v-slot="scope">
<gantt-chart id="wednesday" :width="100" desc="星期三" descColor="#fff"
:list="scope.row.wednesday"></gantt-chart>
</template>
</el-table-column>
<el-table-column prop="thursday" label="星期四">
<template v-slot="scope">
<gantt-chart id="thursday" :width="100" desc="星期四" descColor="#fff" :list="scope.row.thursday">
</gantt-chart>
</template>
</el-table-column>
<el-table-column prop="friday" label="星期五">
<template v-slot="scope">
<gantt-chart id="friday" :width="100" desc="星期五" descColor="#fff" :list="scope.row.friday">
</gantt-chart>
</template>
</el-table-column>
<el-table-column prop="saturday" label="星期六">
<template v-slot="scope">
<gantt-chart id="saturday" :width="100" desc="星期六" descColor="#fff" :list="scope.row.saturday">
</gantt-chart>
</template>
</el-table-column>
<el-table-column prop="sunday" label="星期日">
<template v-slot="scope">
<gantt-chart id="sunday" :width="100" desc="星期日" descColor="#fff" :list="scope.row.sunday">
</gantt-chart>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import ganttChart from './gantt-chart.vue';
const tableData = ref([
{
monday: [
{
width: 30,
color: 'red'
},
{
width: 70,
color: 'blue'
}
],
tuesday: [
{
width: 30,
color: 'red'
},
{
width: 20,
color: 'blue'
},
{
width: 50,
color: 'gray'
}
],
wednesday: [
{
width: 30,
color: 'red'
},
{
width: 70,
color: 'blue'
}
],
thursday: [
{
width: 30,
color: 'red'
},
{
width: 40,
color: 'blue'
},
{
width: 30,
color: 'yellow'
}
],
friday: [
{
width: 30,
color: 'red'
},
{
width: 70,
color: 'blue'
}
],
saturday: [
{
width: 50,
color: 'blue'
},
{
width: 50,
color: 'pink'
}
],
sunday: [
{
width: 30,
color: 'red'
},
{
width: 70,
color: 'blue'
}
]
}
]);
</script>
<style scoped lang="scss">
:deep(.el-table .cell) {
padding: 0;
}
:deep(.el-table--border .el-table__cell:first-child .cell) {
padding-left: 0;
}
</style>
组件代码
本来是还要考虑界限问题的，每一个小矩形会不会超出总的容器宽度。后来觉得没必要搞的这么麻烦，本来就是根据实际业务来实现的，完全可以使用标准的数据格式。
<template>
<div>
<canvas :id="id" :width="width" :height="height"></canvas>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue';
// 每次绘制矩形时的偏移量
const residueWidth = ref(0);
interface ganttChartItem {
// 宽度
width: number,
// 颜色
color: string
}
interface Props {
// id
id:string
// 宽度
width: number,
// 高度
height?: number,
// 是否初始化
init?: boolean,
// 子项
list?: Array<ganttChartItem>,
// 是否显示描述
desc?:string
// 描述颜色
descColor?:string
}
const props = withDefaults(defineProps<Props>(), {
// 高度默认20
height: 20,
// 默认初始化
init: true,
// 子项默认为空
list: () => [],
// 是否显示描述
desc: '',
// 描述颜色
descColor: ''
});
onMounted(() => {
draw();
});
// 绘制
const draw = () => {
// 获取对象
const c = document.getElementById(props.id);
// 获取2d画布
const context = c.getContext('2d');
if (props.list.length > 0) {
// 要加上nextTick不然会先绘制文本，导致文本在矩形下面
nextTick(() => {
for (let i = 0; i < props.list.length; i++) {
// 循环绘制，这里不考虑宽度是否超出的问题，默认数据都是合理的
drawRectangle(context, props.list[i].color, residueWidth.value, props.list[i].width);
residueWidth.value += props.list[i].width;
}
drawDesc(context);
});
}
};
// 绘制矩形
const drawRectangle = (context, color: string, x: number, width: number) => {
context.fillStyle = color; // 指定填充颜色
context.fillRect(x, 0, width, props.height); // 填充
};
// 绘制描述
const drawDesc = (context) => {
if (props.desc && props.descColor) {
context.fillStyle = props.descColor;
context.font = parseInt(props.height / 2) + 'px';
// （text,x,y）文字内容、绘制的其实位置
context.fillText(props.desc, 5, props.height * 0.7);
}
};
</script>