Vue使用甘特图
插件dhtmlx-
gantt的步骤如下：
1. 首先，你需要使用yarn或npm安装
dhtmlx-
gantt插件。可以通过以下命令之一来安装
插件：
```bash
yarn install
dhtmlx-
gantt
```
2. 在你的Vue组件中，引入
dhtmlx-
gantt插件。你可以使用以下代码实现引入：
```javascript
import {
gantt } from '
dhtmlx-
gantt';
```
3. 在样式中引入
dhtmlx-
gantt的CSS文件。你可以在style标签中添加以下代码：
```html
<style>
@import '
dhtmlx-
gantt/codebase/
dhtmlxgantt.css';
</style>
```
4. 对于部分组件的使用，你可以使用以下代码定义
任务、列和链接：
```javascript
const
ganttColumns = ref([
{
align: 'right',
name: 'color',
label: '',
width: '15',
template: function(task) {
if (task.color) {
return "<div class='
tttttt' style='background:" + task.color + "'></div>";
}
}
},
{
align: 'left',
name: 'text',
label: '',
tree: true,
width: "*",
min_width: 120
},
{
align: 'center',
name: 'person',
label: '负责人',
width: '100'
},
{
align: 'right',
name: 'time',
label: '时间节点',
width: '80'
},
]);
gantt.config.columns =
ganttColumns.value;
const
ganttLinks = [
{
id: 1,
source: 1,
target: 3,
type: "0"
},
{
id: 2,
source: 12323545,
target: 12345453,
type: "1"
},
{
id: 3,
source: 12345453,
target: 12345437,
type: "0"
}
];
let
ganttData = {
data: [...],
links:
ganttLinks
};
```
5. 最后，你可以使用
dhtmlx-
gantt插件的各种配置项和API来创建甘特图。可以根据需要使用不同的配置项来定义
任务列、时间轴等。详情可以参考
dhtmlx-
gantt的官方文档。
通过以上步骤，你就可以在Vue中使用甘特图
插件dhtmlx-
gantt了。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
