**【写在前面】**今天我们来谈谈echarts,众所周知,这个是百度开发的一款图表线类组件工具,常用于我们页面所看到的折线图,饼图,雷达图等,在大屏可视化尤为可见,那么今天我们就从最开始的echarts,到我们开发过程中遇到的需求,指标历史对比曲线,其实也就是拿当前时间段的指标数据和它前一天、前三天、前一周、甚至指定日期的曲线对比,且要在同一时间纬度上。
别的也不多说,先睹为快,效果如下所示(多用于监控历史变化,监控异常采集):
1、实现基础Echarts的搭建
首先我们创建一个基础的demo,通过引入echarts的echarts.min.js即可,效果如下:
其中核心代码在于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进行调整对应的数组形式(代码在图后贴出),具体展示效果如下所示:
单时间轴是因为xAxis只设置了一组数据,但是series里面的值却设置了两组数据,所以第二条线会以xAxis中的前几个时间点作为它的x轴映射值,后面多的会自动忽略。
双时间轴就是把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、实现多组线同一纬度的对比
首先我们针对刚才的不同时间段的进行同一坐标轴的展示(多条曲线):
从上图不难发现,其中每个历史时刻的数据都分布在一个图表上,可以鼠标滚动缩小时间跨度看更细节的东西,但是,这并不是我一开始的需求所想,我期待的是针对当前的时间段值对比他几天前的数据,对比的话肯定不能让他们分布在不同的时间区域,这个时候我们应该对时间做一个处理,将时间统一以当前时间段为基础,针对历史时间段在里面的值我们可以人为的去修改,具体修改规则(方法)如下:
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 "—";
}
};
最终呈现效果如下所示:
上面这条线可能显得乱写的,现实生产环境可能会出现如下所示的指标数据抖动。
具体option可以按照自己的方式来实现,看情况而异,主要核心在于上面的赋值操作及时间的前端篡改,
百度网盘
链接:https://pan.baidu.com/s/1GFh_m5TMe1r9ZaI4rQb4Qg
提取码:hdd6
123云盘(不限速)
https://www.123pan.com/s/ZxkUVv-mEJ4
提取码:hdd6
如果觉得这个文章对客官您有所帮助,想支持博主的可以上皇榜哟,皇榜点击此处进入
期待与君互相督促,互相交流学习,一起进步;