一、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/zh-tw/n/190845.html
微信掃一掃 
支付寶掃一掃 