<div id="chart" style="width:800px;height:500px;"></div>
$.ajax({
type: 'post',
url: url,
contentType: "application/x-www-form-urlencoded; ",
dataType: "json",
success: function (data, status) {
var datatemp = [];
var startTime = (new Date((new Date()).getFullYear(), (new Date()).getMonth(), (new Date()).getDate() - 2, 8, 0, 0)).getTime();
var categories = ['H-DES-AOI-01-L'];
var types = [
{ name: 'Run', color: 'green' },
{ name: 'DOWN', color: 'red' },
{ name: 'Idle', color: 'yellow' },
{ name: 'PM', color: 'blue' }
];
for (let i = 0; i < data.length; i++) {
var typeItem = types.filter(a=>a.name == data[i].STATUS)[0];
datatemp.push({
name: typeItem.name,
value: [
0,
data[i].DURSTARTTIME,
data[i].DURENDTIME
//, Number(data[i].DURENDTIME.substr(6, 13)) - Number(data[i].DURSTARTTIME.substr(6, 13))
],
itemStyle: {
normal: {
color: typeItem.color
}
}
});
}
console.log(datatemp);
datatemp.forEach(function (item) {
item.value[1] = Number(item.value[1].substr(6, 13));
item.value[2] =Number(item.value[2].substr(6, 13));
});
var options = {
tooltip: {
formatter: function (params) {//鼠标放上去自定义显示的内容(时间区间)
return (new Date(params.value[1])).getHours() + ':'+(new Date(params.value[1])).getMinutes() + '----'
+ (new Date(params.value[2])).getHours() + ':'+(new Date(params.value[2])).getMinutes();
}
},
title: {
text: '',
left: 'left'
},
grid: {
height: 100
},
xAxis: {
min: startTime,
max: (startTime + 60 * 60 * 1000 * 24),
type: 'time',
splitNumber: 0,
maxInterval: 3600 * 1000,
scale: true,
axisLabel: {
formatter: function (val) {
return (new Date(val)).getHours();
}
}
},
yAxis: {
data: categories
},
series: [{
type: 'custom',
renderItem: renderItem,
itemStyle: {
opacity: 1
},
encode: {
x: [1, 2],
y: 0
},
data: datatemp
}]
};
var myChart = echarts.init(document.getElementById('chart'));
myChart.clear();
myChart.setOption(options);
myChart.on('click', function (params) {//点击时间,可以获得数据
console.log(params);
});
},
error: function (data, status) {
console.info("AJAX请求 error");
}
});