echarts 反映机器一天的运行状态图(以8点为分界点)

echarts 反映机器一天的运行状态图(以8点为分界点)_第1张图片

echarts 反映机器一天的运行状态图(以8点为分界点)_第2张图片

$.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"); } });

 

你可能感兴趣的:(echarts)