<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ECharts</title>
<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
let fontcol = "#00000087";
let this_ = {};
this_.colmap = {
'飞行': '#00daff',
'定检': '#f9ff00',
'排故': '#ff6000',
'停飞': '#a3abad',
}
//this_.startTime = 1620576000;
this_.startTime = '2024-08-01 10:00:00';
this_.categories = ['飞机A', '飞机B','飞机C','飞机D','飞机E','飞机F','飞机G'];
this_.dataE = [
// { "name": "飞行", "value": ['djdg', '2024-08-01 10:00:00', '2024-08-01 11:00:00', '7小时'] },//毫秒数要为数字类型
// { "name": "排故", "value": ['djdg', '2024-08-01 13:00:00', '2024-08-01 14:00:00', '3小时'] },
// { "name": "飞行", "value": [1, 1620644400, 1620655200, '3小时'] },
// { "name": "停飞", "value": [1, 1620655200, 1620658300, '显示内容'] } //1:表飞机B
{
"name": "生產",
"value": [
0,
"2024-06-01 00:00",
"2024-06-01 00:10",
"10"
],
"itemStyle": {
"normal": {
"color": "#00daff"
}
}
},
{
"name": "生產",
"value": [
0,
"2024-06-01 01:05",
"2024-06-01 01:05",
"0"
],
"itemStyle": {
"normal": {
"color": "#00daff"
}
}
},
{
"name": "生產",
"value": [
2,
"2024-06-01 00:20",
"2024-06-01 00:55",
"35"
],
"itemStyle": {
"normal": {
"color": "#00daff"
}
}
},
{
"name": "生產",
"value": [
2,
"2024-06-01 01:15",
"2024-06-01 05:50",
"275"
],
"itemStyle": {
"normal": {
"color": "#00daff"
}
}
},
{
"name": "生產",
"value": [
2,
"2024-06-01 23:30",
"2024-06-01 23:30",
"0"
],
"itemStyle": {
"normal": {
"color": "#00daff"
}
}
},
{
"name": "生產",
"value": [
3,
"2024-06-01 07:00",
"2024-06-01 07:10",
"10"
],
"itemStyle": {
"normal": {
"color": "#00daff"
}
}
},
{
"name": "生產",
"value": [
4,
"2024-06-01 07:20",
"2024-06-01 07:35",
"15"
],
"itemStyle": {
"normal": {
"color": "#00daff"
}
}
}
]
for (var i = 0; i < this_.dataE.length; i++) {
this_.dataE[i].itemStyle = { "normal": { "color": this_.colmap[this_.dataE[i].name] } };
}
let renderItem = function (params, api) {
var categoryIndex = api.value(0);
var start = api.coord([api.value(1), categoryIndex]);
var end = api.coord([api.value(2), categoryIndex]);
var height = api.size([0, 1])[1] * 0.6;
var rectShape = echarts.graphic.clipRectByRect({
x: start[0],
y: start[1] - height / 2,
width: end[0] - start[0],
height: height
}, {
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
});
return rectShape && {
type: 'rect',
transition: ['shape'],
shape: rectShape,
style: api.style()
};
}
this_.renderItem = renderItem;
option = {
tooltip: {
formatter: function (params) {
//console.log(params);
if (params.value && params.value.length >= 4) {
return params.marker + this_.categories[params.value[0]] + ':' + params.name + '-' + params.value[3];
} else {
return "";
}
}
},
dataZoom: [{
type: 'slider',
filterMode: 'weakFilter',
xAxisIndex: 0,
showDetail: false,
showDataShadow: false //值也可为"-5px",解决拖动条宽度问题
}],
grid: {
//containLabel: true
},
xAxis: {
// min: Date.parse(this_.startTime),
type: 'time',
scale: true,
// axisLabel: {
// formatter: function (val) {
// var da = new Date(Number(val));
// var s = (da.getMonth() + 1) + "-" + da.getDate() + " " + da.getHours();
// return s;
// }
// },
// axisLine: {
// lineStyle: {
// color: fontcol
// }
// },
// axisPointer: {
// show: true,
// label: {
// formatter: function (params) {
// let a = parseInt(params.value);
// return new Date(a).toLocaleString();
// },
// color: 'black',
// }
// },
},
yAxis: {
data: this_.categories,
axisLine: {
lineStyle: {
color: fontcol
}
},
},
series: [{
type: 'custom',
renderItem: this_.renderItem,
itemStyle: {
opacity: 0.8
},
encode: {
x: [1, 2],
y: 0
},
data: this_.dataE
}]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
Echarts 实现甘特图
于 2024-09-10 09:55:14 首次发布