funListT07: [ { id: 1, name: "零部件01", start: "2022-01-01", end: "2022-01-05", }, { id: 2, name: "零部件02", start: "2022-01-03", end: "2022-01-08", }, { id: 3, name: "零部件03", start: "2022-01-06", end: "2022-01-10", }, { id: 4, name: "零部件04", start: "2022-01-02", end: "2022-01-09", }, { id: 5, name: "零部件05", start: "2022-01-05", end: "2022-01-10", }, { id: 6, name: "零部件06", start: "2022-01-06", end: "2022-01-12", }, { id: 7, name: "零部件07", start: "2022-01-03", end: "2022-01-10", }, ],如何实现甘特图,echarts
时间: 2023-07-19 21:15:04 浏览: 72
要实现甘特图,需要使用Echarts的Gantt模块。首先,需要引入Echarts和Gantt模块的JS文件,在HTML中建立一个容器用于渲染图表。然后,需要定义一个包含任务信息的JSON数据,例如funListT07。最后,使用Echarts的API绘制甘特图,可以参考以下代码:
```
// 引入Echarts和Gantt模块
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/gantt.min.js"></script>
// 在HTML中建立容器
<div id="container" style="height:600px;"></div>
// 定义任务信息的JSON数据
var data = [
{ id: 1, name: "零部件01", start: "2022-01-01", end: "2022-01-05", },
{ id: 2, name: "零部件02", start: "2022-01-03", end: "2022-01-08", },
{ id: 3, name: "零部件03", start: "2022-01-06", end: "2022-01-10", },
{ id: 4, name: "零部件04", start: "2022-01-02", end: "2022-01-09", },
{ id: 5, name: "零部件05", start: "2022-01-05", end: "2022-01-10", },
{ id: 6, name: "零部件06", start: "2022-01-06", end: "2022-01-12", },
{ id: 7, name: "零部件07", start: "2022-01-03", end: "2022-01-10", },
];
// 绘制甘特图
var chart = echarts.init(document.getElementById('container'));
var option = {
tooltip: {},
legend: {
data: ['任务'],
textStyle: {
fontSize: 14,
},
},
grid: {
top: '10%',
bottom: '10%',
},
xAxis: {
type: 'time',
splitLine: {
show: false,
},
},
yAxis: {
type: 'category',
data: data.map(function (item) {
return item.name;
}),
splitLine: {
show: false,
},
},
series: [
{
name: '任务',
type: 'gantt',
data: data.map(function (item) {
return {
name: item.name,
value: [
item.start,
item.end,
item.id,
],
};
}),
label: {
position: 'inside',
formatter: function (params) {
return params.name;
},
},
},
],
};
chart.setOption(option);
```
以上代码就可以绘制出funListT07的甘特图了。需要注意的是,数据中的日期格式必须为"yyyy-MM-dd",并且时间轴的类型必须为"time"。同时,还可以根据需要进行其他的样式和配置调整。
阅读全文