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

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

 

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读