echarts绘制甘特图

说在前面

项目上有需求,需要在大屏上展示进度甘特图,调研了DHTMLX普加甘特图,效果都不是特别符合需求现状,查询了一些博客,决定使用echarts来绘制甘特图。

实现效果展示

在这里插入图片描述

实现思路分析

1、应该采用柱状图,且柱子横向分布

将data赋值给yAxis即可;

2、纵坐标应为进度图中的进度节点

正常赋值即可,注意顺序,可添加inverse: true,改变顺序,axisTick: { show: false } 去除刻度

3、甘特图数据量化

这里需要注意的是,对于进度计划中提出的开始、结束日期是不好量化的,所以这里要转换一下思路;
使用结束日期减去开始日期来计算天数,来表达某条任务持续的时间。

4、横坐标应展示日期

上面说了使用差值天数来标识任务持续时间,所以这里单纯设置日期的横坐标是无法对应的。
设置两个x轴,一个x轴是日期(x1),另外一个x轴type为value类型(x2),可以理解为x2是真实的x轴,x1是虚假的x轴,但是我们要将x2进行隐藏,来达到模拟的效果;
当然,这两个轴的数据需要对应,下面会展开说。

5、对于一些前期未开工的数据处理

柱状图的数据是连续的,如果需要实现前面“镂空”的效果,则需要再次使用双x轴的视觉欺骗,使用纯透明的柱状图来填充前面缺失的部分;

部分技术实现代码

计算天数差值:

subDate(startDate, endDate) {
    let result = (endDate.getTime() - startDate.getTime()) / 3600000 / 24;
    return result
},

x轴的设置:
加入我们想展示甘特图从’2023-04-01’ - '2024-06-30’之间的数据,则x轴应为:

        let xAxisData = ['2023.04','2023.05','2023.06','2023.07','2023.08','2023.09','2023.10','2023.11','2023.12','2024.01','2024.02','2024.03','2024.04','2024.05','2024.06'];

 xAxis: [
    { // 真实的x轴,但是隐藏了
        min: 0,
        max: this.subDate(new Date('2023-04-01'), new Date('2024-06-30')) + 1,
        type: "value",
        axisLabel: { show: false },
        splitLine: { show: false },
    },{ // 虚假的x轴,展示出来
        type: "category",
        boundaryGap: true,
        data: xAxisData,
        axisTick: { show: false }, //刻度
        axisLine: { show: false },
        splitLine: {
        show: true,
    },
]

数据从0开始,到天数总数为止,比如2023年4月有30天,横轴总长就代表了30天,也代表了2023-04这个刻度。以此类推,表示日期的x轴对应的天数就 等于数值的天数了,完成了数据的对应。

透明柱状图数据计算

let minDate = new Date("2023-04-01");
touming.push(this.subDate(minDate, new Date(item.planBeginDate)))

开始日期为4.1号,比如任务a计划开始时间为4.15号,则距离y轴的距离就应该为 14,这部分就置为透明即可。
带颜色柱状图数据计算

notSelectedData.push(
    this.subDate(
        new Date(item.planBeginDate),
        new Date(item.planEndDate)
    ) + 1
);

柱状图绘制:

let yanse = {
    normal: { barBorderColor: "rgba(0,0,0,0)", color: "rgba(0,0,0,0)" },
    emphasis: { barBorderColor: "rgba(0,0,0,0)", color: "rgba(0,0,0,0)" },
};
series: [
    {
        type: "bar",
        barWidth: 15,
        stack: "stackNotSelected", //叠加效果
        barGap: "-100%", //重叠效果
        itemStyle: transparentStyle,
        data: touming,
    },
    {
        type: "bar",
        barWidth: 15,
        stack: "stackNotSelected", //叠加效果
        barGap: "-100%", //重叠效果
        itemStyle: {
        normal: {
            color: "#49A7FF",
        },
        },
        data: yanse,
        label: {
            show: false,
        },
    }
],

说到最后

本文介绍了使用echarts实现甘特图效果的实现思路分析以及部分技术方案,有兴趣的各位可以动手实践。

### 如何使用 ECharts 创建甘特图 要通过 ECharts 创建甘特图,可以按照以下方法操作。ECharts 提供了丰富的 API 和配置选项来支持复杂的数据可视化需求。 #### 配置项说明 ECharts甘特图主要依赖于 `series` 中的 `type: 'gantt'` 类型[^1]。以下是常见的配置项: - **data**: 数据数组,定义任务的时间范围和其他属性。 - **itemStyle**: 设置图形样式,如颜色、边框等。 - **label**: 控制标签显示的内容和位置。 - **markPoint** / **markLine**: 添加标记点或线用于突出特定时间点或区间。 - **tooltip**: 自定义提示框内容,在鼠标悬停时展示更多信息。 #### 示例代码 下面是一个完整的示例代码片段,展示了如何利用 ECharts 构建基本的甘特图: ```javascript // 初始化图表实例 var chartDom = document.getElementById('ganttChart'); var myChart = echarts.init(chartDom); // 图表配置 var option = { tooltip: { trigger: 'axis', axisPointer: { type: 'line' } }, legend: {}, xAxis: { type: 'time', // 时间轴 splitLine: { show: false } }, yAxis: { type: 'category', data: ['Task A', 'Task B', 'Task C'] // 任务名称列表 }, series: [{ type: 'gantt', itemStyle: { color: '#009cff' }, data: [ { name: 'Task A', start: '2023-01-01', end: '2023-01-07' }, // 起始时间和结束时间 { name: 'Task B', start: '2023-01-08', end: '2023-01-15' }, { name: 'Task C', start: '2023-01-16', end: '2023-01-22' } ] }] }; myChart.setOption(option); ``` 此代码初始化了一个 DOM 容器并加载了基础的甘特图结构,其中包含了三个任务及其对应的时间段。 #### Vue3 环境下的集成 如果是在 Vue3 项目中,则可以通过安装相关插件完成更便捷的操作。具体步骤如下: 1. 使用 NPM 命令安装必要的库文件: ```bash npm install echarts vue-echarts ``` 2. 在组件内部引入 ECharts 并绑定至模板中的指定区域: ```vue <template> <div ref="chartRef" style="width: 100%; height: 400px;"></div> </template> <script setup> import * as echarts from 'echarts'; import { onMounted, ref } from 'vue'; const chartRef = ref(null); onMounted(() => { const initGanttChart = () => { var myChart = echarts.init(chartRef.value); var option = { tooltip: { ... }, xAxis: { ... }, yAxis: { ... }, series: [{...}] }; myChart.setOption(option); }; initGanttChart(); }); </script> ``` 以上实现了基于 Vue3 的动态渲染功能[^2]。 --- #### 结合其他工具扩展应用 除了单独使用外,还可以借助 SpreadJS 这样的表格控件进一步增强交互体验。例如采用其内置的日程管理模块配合 ECharts 展现更加直观的效果[^3]。 ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值