//data3.js
let RobotData = {
"RobotIndex": {
"data": [
[
"10001",
],
[
"10003",
],
]
},
"robotWorkData": {
"data": [[
1,
1496840400000,
1496873400000,
"10001",
1496850400000,
1496860400000,
],
[0,
1496917800000,
1496925000000,
'10003',
1496918800000,
1496923000000
],
[1, 1496917800000,
1496935000000,
'10001',
1496927800000,
1496934000000,
]
]
}
}
//demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./echarts.js"></script>
<script src="data3.js"></script>
</head>
<body>
<div id="div1" style="width: 1000px;height:800px;"></div>
<script type="text/javascript">
let Index = 0;
let boot_time = 1;
let shutdown_time = 2;
let work_start_time = 4;
let work_end_time = 5;
let AllData;
let myChart = echarts.init(document.getElementById('div1'))
setTimeout(() => {
AllData = RobotData;
myChart.setOption((option = makeOption()));
}, 200)
function makeOption() {
return {
animation: false,
dataZoom: [
{
type: 'inside',
}
],
grid: {
show: true,
bottom: 20,
left: 100,
right: 20,
backgroundColor: '#fff',
borderWidth: 0
},
xAxis: {
type: 'time',
position: 'top',
splitLine: {
lineStyle: {
color: ['#E9EDFF']
}
},
axisLine: {
show: false
},
axisTick: {
lineStyle: {
color: '#929ABA'
}
},
axisLabel: {
color: '#929ABA',
inside: false,
align: 'center'
}
},
tooltip: {
trigger: "axis",
backgroundColor: "#F1F1F7",
borderColor: "#F1F1F7",
formatter: function (params) {
return `<div style="padding: 2px">${params[0].data[3]}</div>
<div style="padding: 2px">开机时间:${new Date(parseInt(params[0].data[1])).toLocaleString()}, 关机时间:${new Date(parseInt(params[0].data[2])).toLocaleString()}</div>
<div style="padding: 2px">任务开始时间:${new Date(parseInt(params[0].data[4])).toLocaleString()}, 任务结束时间:${new Date(parseInt(params[0].data[2])).toLocaleString()}</div>`;
},
},
yAxis: {
axisLabel: {show: false},
min: 0,
max: AllData.RobotIndex.data.length
},
series: [
{
type: 'custom',
renderItem: renderGanttItem,
encode: {
x: [boot_time, shutdown_time, work_start_time, work_end_time],
y: Index,
},
data: AllData.robotWorkData.data
},
{
type: 'custom',
renderItem: renderAxisLabelItem,
encode: {
x: -1,
y: 0
},
data: AllData.RobotIndex.data.map(function (item, index) {
return [index].concat(item);
})
}
]
};
}
function renderGanttItem(params, api) {
let text = api.value(3);
let categoryIndex = api.value(Index);
let timeArrival = api.coord([api.value(boot_time), categoryIndex]);
let timeDeparture = api.coord([api.value(shutdown_time), categoryIndex]);
let startTime = api.coord([api.value(work_start_time), categoryIndex]);
let endTime = api.coord([api.value(work_end_time), categoryIndex]);
let barLength = timeDeparture[0] - timeArrival[0];
let workLength = endTime[0] - startTime[0]
let barHeight = api.size([0, 1])[1] * 0.1;
let x = timeArrival[0];
let y = timeArrival[1] - barHeight;
let workX = startTime[0]
let workY = endTime[1] - barHeight
let rectNormal = clipRectByRect(params, {
x: x,
y: y,
width: barLength,
height: barHeight
});
let workTime = clipRectByRect(params, {
x: workX,
y: workY,
width: workLength,
height: barHeight
});
let rectText = clipRectByRect(params, {
x: x,
y: y,
width: barLength,
height: barHeight
});
return {
type: 'group',
children: [
{
type: 'rect',
ignore: !rectNormal,
shape: rectNormal,
style: api.style({fill: '#ADB6FF'})
},
{
type: 'rect',
ignore: !workTime && !api.value(4),
shape: workTime,
style: api.style({fill: '#7484FF'})
},
{
type: 'rect',
ignore: !rectText,
shape: rectText,
style: api.style({
fill: 'transparent',
stroke: 'transparent',
text: text,
textFill: '#fff'
})
}
]
};
}
function renderAxisLabelItem(params, api) {
let y = api.coord([0, api.value(0)])[1];
return {
type: 'group',
position: [10, y],
children: [
{
type: 'text',
style: {
x: 24,
y: -18,
text: api.value(1),
textVerticalAlign: 'center',
textAlign: 'center',
textFill: '#000'
}
}
]
};
}
function clipRectByRect(params, rect) {
return echarts.graphic.clipRectByRect(rect, {
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
});
}
</script>
</body>
</html>