echarts模拟展示磁盘利用率 

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-nightly@5.1.2-dev.20210512/dist/echarts.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    
    <script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);

    option = {
        title: {
            text: '磁盘使用率'
        },
        tooltip: {
            trigger: 'axis',
            formatter: function(params){
                var myDom = params[0].name + '<br />';
                $.each(params, function(index, item){
                    myDom += item.marker + item.seriesName + ': ' + item.value + '%<br />';
                })
                return myDom;
            }
        },
        legend: {
            data: ['本地磁盘(C:)', '本地磁盘(D:)', '本地磁盘(E:)'],
            selected: {
                '本地磁盘(C:)': true,
                '本地磁盘(D:)': true,
                '本地磁盘(E:)': true,
            },
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {},
                dataView: {
                    show: true,
                    optionToContent: function(opt){
                        var table = '<table border=1 cellspacing=0 cellpadding=5><tbody><tr>' 
                            + '<th align="center">时间</th>';
                        $.each(opt.legend[0].data, function(index, item){
                            table += '<th align="center">' + item + '</th>';
                        })
                        table += '</tr>';
                        $.each(opt.xAxis[0].data, function(index, item){
                            table += '<tr>';
                            table += '<td align="center">' + item + '</td>';
                            $.each(opt.series, function(index_series, item_series){
                                table += '<td align="center">' + item_series.data[index] + '%</td>';
                            });
                            table += '</tr>';
                        })
                        table += '</tbody></table>';
                        return table;
                    }
                }
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [
                '2021/06/01 08:00:00',
                '2021/06/01 08:00:03',
                '2021/06/01 08:00:06',
                '2021/06/01 08:00:09',
                '2021/06/01 08:00:12',
            ]
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '本地磁盘(C:)',
                type: 'line',
                data: [30, 30.33, 31, 50, 52],
            },
            {
                name: '本地磁盘(D:)',
                type: 'line',
                data: [80, 83, 70, 68, 69.35],
            },
            {
                name: '本地磁盘(E:)',
                type: 'line',
                data: [10, 10, 10.11, 10.24, 10.24],
            },
        ]
    };

    var legend_data = ['本地磁盘(C:)', '本地磁盘(D:)', '本地磁盘(E:)'];
    var xAxis_data = [];
    var series = [];
    var max = 50;
    var time_unit = 2000;
    var base = +new Date() - max * time_unit;
    $.each(legend_data, function(index, item){
        series.push({
            name: item,
            type: 'line',
            data: []
        });
    })
    for (var i = 0; i < max; i++) {
        var now = new Date(base += time_unit);
        xAxis_data.push(getTime(now, 'His'));
        $.each(legend_data, function(index, item){
            var value = Math.round(Math.random() * 100, 2);
            series[index].data.push(value);
        });
    }
    option.legend.data = legend_data;
    option.xAxis.data = xAxis_data;
    option.series = series;
    myChart.setOption(option, true); // 初始化

    var inter = setInterval(function(){
        var now = new Date(base += time_unit);

        xAxis_data.shift();
        xAxis_data.push(getTime(now, 'His'));

        $.each(legend_data, function(index, item){
            var value = Math.round(Math.random() * 100, 2);
            series[index].data.shift();
            series[index].data.push(value);
        });

        option.legend.data = legend_data;
        option.xAxis.data = xAxis_data;
        option.series = series;
        myChart.setOption(option, true);
    }, time_unit);

    // 切换图例的选中状态
    myChart.on('legendselectchanged', function(params){
        option.legend.selected = params.selected;
    });

    function getTime(date, format){
        var ymd = [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('/');
        var hour = date.getHours() < 10 ? ('0' + date.getHours()) : date.getHours();
        var minute = date.getMinutes() < 10 ? ('0' + date.getMinutes()) : date.getMinutes();
        var second = date.getSeconds() < 10 ? ('0' + date.getSeconds()) : date.getSeconds();
        var his = [hour, minute, second].join(':');
        if (format == 'Ymd') {
            return ymd;
        } else if (format == 'His') {
            return his;
        }
        return ymd + ' ' + his;
    }
    </script>
</body>
</html>

 

posted on 2021-06-13 18:05  80boy  阅读(601)  评论(0)    收藏  举报

导航