一、Echarts甘特图
Echarts是一个基于Javascript的开源可视化库，支持多种图表类型，其中甘特图是一个常用的图表类型。甘特图可以直观展示项目进度、时间安排等信息。
下面是一个简单的甘特图示例：
var data = [{
name: '任务一',
value: [new Date('2021/08/01'), new Date('2021/08/05')]
}, {
name: '任务二',
value: [new Date('2021/08/06'), new Date('2021/08/10')]
}]
option = {
title: {
text: '甘特图示例'
},
tooltip: {},
legend: {
data: ['任务']
},
xAxis: {
type: 'time',
splitLine: {
show: false
}
},
yAxis: {
type: 'category',
data: ['任务一', '任务二']
},
series: [{
type: 'bar',
name: '任务',
stack: '甘特图',
label: {
show: true,
position: 'insideLeft'
},
itemStyle: {
borderColor: 'white'
},
barWidth: 20,
data: data.map(function (item) {
return {
name: item.name,
value: [item.value[0], item.value[1] - item.value[0]]
}
}),
tooltip: {
formatter: function (params) {
return params.name + ': ' + params.value[0].toLocaleDateString() + '-' + params.value[1].toLocaleDateString();
}
}
}]
};
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
以上代码中，x轴表示时间轴，y轴表示任务名称，柱形图表示任务所占用的时间段。图例为任务，对应的任务分别为任务一和任务二。
二、Echarts甘特图X轴动态
Echarts甘特图默认情况下X轴刻度是固定的，不能动态改变。但是，在实际开发中，我们经常需要动态根据时间范围调整X轴刻度。
下面给出一个动态改变X轴刻度的示例：
var startTime = new Date('2021/08/01');
var endTime = new Date('2021/08/10');
var option = {
title: {
text: '动态刻度示例'
},
tooltip: {},
legend: {
data: ['任务']
},
xAxis: {
type: 'time',
min: startTime,
max: endTime,
splitLine: {
show: false
}
},
yAxis: {
type: 'category',
data: ['任务一', '任务二']
},
series: [{
type: 'bar',
name: '任务',
stack: '甘特图',
label: {
show: true,
position: 'insideLeft'
},
itemStyle: {
borderColor: 'white'
},
barWidth: 20,
data: [{
name: '任务一',
value: [new Date('2021/08/01'), new Date('2021/08/05')]
}, {
name: '任务二',
value: [new Date('2021/08/06'), new Date('2021/08/10')]
}],
tooltip: {
formatter: function (params) {
return params.name + ': ' + params.value[0].toLocaleDateString() + '-' + params.value[1].toLocaleDateString();
}
}
}]
};
var myChart = echarts.init(document.getElementById('main'));
setInterval(function () {
startTime.setDate(startTime.getDate() + 1);
endTime.setDate(endTime.getDate() + 1);
myChart.setOption({
xAxis: {
min: startTime,
max: endTime
}
});
}, 1000);
myChart.setOption(option);
以上代码中，我们通过setInterval函数模拟了每秒更新一次时间范围，并通过setOption方法动态改变X轴刻度，实现了动态变化的效果。
三、Echarts设置甘特图
Echarts甘特图支持多种设置，例如背景颜色、轴线样式、字体样式等。
下面给出一个设置甘特图的示例：
option = {
backgroundColor: '#F9FAFB',
title: {
text: 'Echarts甘特图设置',
left: 'center'
},
tooltip: {},
legend: {
data: ['任务']
},
xAxis: {
type: 'time',
splitLine: {
lineStyle: {
type: 'dotted'
}
},
axisLine: {
lineStyle: {
color: '#065279'
}
},
axisLabel: {
color: '#097054'
}
},
yAxis: {
type: 'category',
data: ['任务一', '任务二'],
axisLine: {
lineStyle: {
color: '#065279'
}
},
axisLabel: {
color: '#097054'
}
},
series: [{
type: 'bar',
name: '任务',
stack: '甘特图',
label: {
show: true,
position: 'insideLeft'
},
itemStyle: {
borderColor: 'white'
},
barWidth: 20,
data: [{
name: '任务一',
value: [new Date('2021/08/01'), new Date('2021/08/05')]
}, {
name: '任务二',
value: [new Date('2021/08/06'), new Date('2021/08/10')]
}],
tooltip: {
formatter: function (params) {
return params.name + ': ' + params.value[0].toLocaleDateString() + '-' + params.value[1].toLocaleDateString();
}
}
}]
};
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
以上代码中，我们给出了设置背景颜色、轴线样式、字体样式等内容的示例，可以根据需求自行调整。
四、Echarts图例
Echarts甘特图支持设置图例，用于表示每个数据的意义。
下面给出一个设置图例的示例：
option = {
title: {
text: 'Echarts甘特图图例',
left: 'center'
},
tooltip: {},
legend: {
data: [{
name: '任务一',
icon: 'circle'
}, {
name: '任务二',
icon: 'circle'
}],
orient: 'vertical',
left: 'right'
},
xAxis: {
type: 'time',
splitLine: {
lineStyle: {
type: 'dotted'
}
},
axisLine: {
lineStyle: {
color: '#065279'
}
},
axisLabel: {
color: '#097054'
}
},
yAxis: {
type: 'category',
data: ['任务一', '任务二'],
axisLine: {
lineStyle: {
color: '#065279'
}
},
axisLabel: {
color: '#097054'
}
},
series: [{
type: 'bar',
name: '任务一',
stack: '甘特图',
label: {
show: true,
position: 'insideLeft'
},
itemStyle: {
borderColor: 'white'
},
barWidth: 20,
data: [{
name: '任务一',
value: [new Date('2021/08/01'), new Date('2021/08/05')]
}],
tooltip: {
formatter: function (params) {
return params.name + ': ' + params.value[0].toLocaleDateString() + '-' + params.value[1].toLocaleDateString();
}
}
}, {
type: 'bar',
name: '任务二',
stack: '甘特图',
label: {
show: true,
position: 'insideLeft'
},
itemStyle: {
borderColor: 'white'
},
barWidth: 20,
data: [{
name: '任务二',
value: [new Date('2021/08/06'), new Date('2021/08/10')]
}],
tooltip: {
formatter: function (params) {
return params.name + ': ' + params.value[0].toLocaleDateString() + '-' + params.value[1].toLocaleDateString();
}
}
}]
};
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
以上代码中，我们对图例进行了自定义设置，可以根据需求进行调整。
五、Echarts折线图
Echarts甘特图除了可以用柱形图来展示任务所占用的时间段，还可以用折线图展示任务进度情况。
下面给出一个Echarts折线图的示例：
option = {
title: {
text: 'Echarts折线图示例',
left: 'center'
},
legend: {
data: ['任务一', '完成进度']
},
tooltip: {},
xAxis: {
type: 'time',
splitLine: {
lineStyle: {
type: 'dotted'
}
},
axisLine: {
lineStyle: {
color: '#065279'
}
},
axisLabel: {
color: '#097054'
}
},
yAxis: [{
type: 'category',
data: ['任务一'],
axisLine: {
lineStyle: {
color: '#065279'
}
},
axisLabel: {
color: '#097054'
}
}, {
type: 'value',
name: '完成进度',
position: 'right',
axisLine: {
lineStyle: {
color: '#065279'
}
},
axisLabel: {
color: '#097054'
}
}],
series: [{
type: 'line',
name: '任务一',
data: [{
name: '任务一',
value: [new Date('2021/08/01'), new Date('2021/08/10')]
}],
lineStyle: {
color: '#eac736'
},
itemStyle: {
color: '#eac736'
},
areaStyle: {
color: '#FFFBE6'
},
tooltip: {
formatter: function (params) {
return params.name + ': ' + params.value[0].toLocaleDateString() + '-' + params.value[1].toLocaleDateString();
}
}
}, {
type: 'line',
name: '完成进度',
data: [{
name: '完成进度',
value: [new Date('2021/08/01'), 0.2],
yAxisIndex: 1
}, {
name: '完成进度',
value: [new Date('2021/08/05'), 0.6],
yAxisIndex: 1
}, {
name: '完成进度',
value: [new Date('2021/08/10'), 1],
yAxisIndex: 1
}],
lineStyle: {
color: '#2c82c9'
},
itemStyle: {
color: '#2c82c9'
},
tooltip: {
formatter: '{b}
{a}: {c}'
}
}]
};
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
以上代码中，我们通过添加完成进度的y轴来展示折线图，同时给折线和区域添加了颜色，可以更加清晰直观地表示任务完成情况。
六、Echarts数据可视化
Echarts甘特图不仅支持展示静态图表，还支持动态展示数据的变化。
下面给出一个Echarts数据可视化的示例：
option = {
title: {
text: 'Echarts数据可视化示例',
left: 'center'
},
legend: {
data: ['任务']
},
tooltip: {},
xAxis: {
type: 'time',
splitLine: {
lineStyle: {
type: 'dotted'
}
},
axisLine: {
lineStyle: {
color: '#065279'
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/190845.html
微信扫一扫 
支付宝扫一扫 