grafana同比曲线

转载

charlesc 2024-07-13 08:04:22

文章标签 grafana同比曲线 echarts 前端 javascript Line 文章分类 云原生云计算

**【写在前面】**今天我们来谈谈echarts,众所周知，这个是百度开发的一款图表线类组件工具，常用于我们页面所看到的折线图，饼图，雷达图等，在大屏可视化尤为可见，那么今天我们就从最开始的echarts，到我们开发过程中遇到的需求，指标历史对比曲线，其实也就是拿当前时间段的指标数据和它前一天、前三天、前一周、甚至指定日期的曲线对比，且要在同一时间纬度上。

别的也不多说，先睹为快，效果如下所示（多用于监控历史变化，监控异常采集）：

grafana同比曲线_grafana同比曲线

1、实现基础Echarts的搭建

首先我们创建一个基础的demo，通过引入echarts的echarts.min.js即可，效果如下：

grafana同比曲线_Line_02

其中核心代码在于option的设置，其实官网上有很多实例，我先贴出我写的整套代码：

Html代码如下：

<div class="title">
        <h2>echart2基础示例图</h2>
    </div>
    <div id="lineCharts"></div>

Js代码如下（核心）：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true
        }
    ]
};
//定义节点变量
var myChart = echarts.init(document.getElementById('lineCharts'));
//针对该节点进行echarts的绘制
myChart.setOption(option);

2、实现多组线的展示

在前面的实现基础上面，我们可以通过修改option的一些属性来控制，首先，我们调整的是xAxis，采用数组的形式进行实现，然后再针对series进行调整对应的数组形式（代码在图后贴出），具体展示效果如下所示：

grafana同比曲线_Line_03

单时间轴是因为xAxis只设置了一组数据，但是series里面的值却设置了两组数据，所以第二条线会以xAxis中的前几个时间点作为它的x轴映射值，后面多的会自动忽略。

grafana同比曲线_echarts_04

双时间轴就是把xAxis里面数组的个数和series的个数都设置为两个就会出现这个现象。

核心Js代码如下所示：

option = {
    color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
    title: {
        text: '多曲线图展示（双时间轴）'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    legend: {
        data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            data: ['2022-01-12 12:30:00', '2022-01-12 13:30:00', '2022-01-12 14:30:00', '2022-01-12 15:30:00', '2022-01-12 16:30:00', '2022-01-12 17:30:00']
        },
        {
            type: 'category',
            boundaryGap: false,
            data: ['2022-01-12 12:30:00', '2022-01-12 13:30:00', '2022-01-12 14:30:00', '2022-01-12 15:30:00', '2022-01-12 16:30:00', '2022-01-12 17:30:00']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: 'Line 1',
            type: 'line',
            // stack: 'Total',
            smooth: true,
            lineStyle: {
                width: 2
            },
            itemStyle: { normal: { label: { show: true } } },
            showSymbol: true,
            emphasis: {
                focus: 'series'
            },
            data: [140, 232, 101, 264, 90, 340]
        },
        {
            name: 'Line 2',
            type: 'line',
            // stack: 'Total',
            smooth: true,
            lineStyle: {
                width: 2
            },
            itemStyle: { normal: { label: { show: true } } },
            showSymbol: true,

            emphasis: {
                focus: 'series'
            },
            data: [120, 220, 340, 310]
        }
    ]
};
var myChart = echarts.init(document.getElementById('lineCharts'));
myChart.setOption(option);

但是肯定会有人说，如果xAxis中的数组个数不统一长的话就会很丑，而且不是我想要的效果，那可咋整啊？还有就是我要是不只是两条线呢？要是5条线甚至更多呢？

这个就是我要讲的核心第三点。

3、实现多组线同一纬度的对比

首先我们针对刚才的不同时间段的进行同一坐标轴的展示（多条曲线）：

grafana同比曲线_grafana同比曲线_05

从上图不难发现，其中每个历史时刻的数据都分布在一个图表上，可以鼠标滚动缩小时间跨度看更细节的东西，但是，这并不是我一开始的需求所想，我期待的是针对当前的时间段值对比他几天前的数据，对比的话肯定不能让他们分布在不同的时间区域，这个时候我们应该对时间做一个处理，将时间统一以当前时间段为基础，针对历史时间段在里面的值我们可以人为的去修改，具体修改规则（方法）如下：

function operTimePevone(currentMinTimes, currentMaxTimes, num, data_pevone) {
    var rangData = {};
    debugger
    var rangDataArr = [];
    var data_pevone_times = null;
    var rangNums = num * 24 * 60 * 60 * 1000;
    for (var k = 0; k < data_pevone.length; k++) {
        rangData = {};
        data_pevone_times = null;
        if (data_pevone[k].recordTime != null) {
            data_pevone_times = new Date(data_pevone[k].recordTime).getTime();
        }
        //判断是否在区间内
        if ((data_pevone_times + rangNums) >= currentMinTimes && (data_pevone_times + rangNums) <= currentMaxTimes) {
            rangData.total = data_pevone[k].total;
            rangData.recordTime = formatTime(data_pevone_times + rangNums);
            rangDataArr.push(rangData);
        }
    }
    debugger;
    return rangDataArr;

}
function formatTime(times, isSimple) {
    if (typeof times !== "undefined") {
        var _date = new Date(times);
        var _y = _date.getFullYear();
        var _m = (_date.getMonth() + 1) < 10 ? "0" + (_date.getMonth() + 1) : (_date.getMonth() + 1);
        var _d = _date.getDate() < 10 ? "0" + _date.getDate() : _date.getDate();
        var _hh = _date.getHours() < 10 ? "0" + _date.getHours() : _date.getHours();
        var _mm = _date.getMinutes() < 10 ? "0" + _date.getMinutes() : _date.getMinutes();
        var _ss = _date.getSeconds() < 10 ? "0" + _date.getSeconds() : _date.getSeconds();
        if (isSimple === true) {
            return _m + "-" + _d + " " + _hh + ":" + _mm;
        } else {
            return _y + "-" + _m + "-" + _d + " " + _hh + ":" + _mm + ":" + _ss;
        }
    } else {
        return "—";
    }
};

最终呈现效果如下所示：

grafana同比曲线_javascript_06