vue dhtmlx-gantt实现甘特图(接入后台数据)
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
<div ref="gantt" style="width: 100%; height: 550px" class="gantts"></div>
关于gantt的数据格式要求
官网数据格式详细:https://docs.dhtmlx.com/gantt/desktop__loading.html
<script>
import gantt from "dhtmlx-gantt"; // 引入模块
import "dhtmlx-gantt/codebase/skins/dhtmlxgantt_terrace.css"; //皮肤
export default{
data(){
},
mounted(){
this.initGantt()
this.getData() // 获取数据
},
methods:{
initGantt(){
//自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务
gantt.config.autosize = true;
// 设置日期格式
gantt.config.date_format = "%Y-%m-%d";
// 工期计算的基本单位
gantt.config.duration_unit = "day";
//设置x轴日期
gantt.config.scale_unit = "day";
gantt.config.step = 1;
gantt.config.date_scale = "%d %M";
//只读模式
gantt.config.readonly = true;
// 水平或垂直滚动条尺寸
gantt.config.scroll_size = 10;
gantt.plugins({ // 提示信息
tooltip: true// 启用 tooltip 插件
})
// 在时间线上增加一行年份显示
// gantt.config.subscales = [
// {
// unit: "year",
// step: 1,
// date: "%Y",
// },
// ];
// 表格列宽自适应
gantt.config.autofit = true;
// 把任务或者连线拖拽到浏览器屏幕外时,自动触发滚动效果,相当于拖动滚动条
gantt.config.autoscroll = true;
// 自定义 tooltips 显示内容
gantt.attachEvent("onGanttReady", () => {
gantt.templates.tooltip_text = function (start, end, task) {
return (
"【任务名称:" + task.name + "】" +
"<br/>" +
"【负责人:" + task.relevant_person + "】"
)
}
});
// 表格列设置
gantt.config.columns = [
{
name: "type",
align: "center",
tree: true, // 展示 tree 型数据结构
resize: true, // 允许通过拖拽的方式border改变列的宽度**(pro收费版支持)**
width: 150,
label: "任务类型",
},
{
name: "start_date",
align: "center",
resize: true,
label: "预计开始时间",
width: 150,
},
{
name: "end_date",
align: "center",
resize: true,
label: "预计结束时间",
width: 150,
},
];
// 当task的长度改变时,自动调整图标坐标轴区间用于适配task的长度
gantt.config.fit_tasks = true;
// 初始化
gantt.init(this.$refs.gantt);
// 数据解析
gantt.parse(this.tasks);
}
},
reload() {
gantt.clearAll();// 从甘特图中删除所有任务和其他元素(包括标记)
gantt.parse(this.tasks); // 数据解析
gantt.render(); // 呈现整个甘特图
},
getData(){
Api().then(res => {
this.tasks.data = res.data
// 如果需要折叠父子关系(tree)
this.tasks.data = [
{id:1,text: '123'},
{id:2,text: '234'},
{id:3,text: '345',parent: 2,}
]
this.reload()
})
}
}
</script>
从后台获取数据之后,才去渲染甘特图
GitHub 加速计划 / vu / vue
207.53 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 4 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)