top 1:echarts custom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>top 1</title>
<script src="js/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 100%;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var formatDateStartTime = '';
var formatDateEndTime = '';
let mGroup = ["CH8", "CH7", "CH6", "CH5", "CH4", "CH3", "CH2", "CH1"];
let dataList = [
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH8",
value: [0, 1660579200000, 1660586404000, "CH8", {
avType: undefined,
endTime: 1660586404000,
endTimeFormat: "2022-08-16 02:00:04",
ftpServerId: undefined,
logicalChannel: 8,
startTime: 1660579200000,
startTimeFormat: "2022-08-16 00:00:00",
storeType: 1,
streamType: 1
}, 8]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH8",
value:
[0,
1660586472000,
1660587706000,
"CH8",
{
avType: undefined,
endTime: 1660587706000,
endTimeFormat: "2022-08-16 02:21:41",
ftpServerId: undefined,
logicalChannel: 8,
startTime: 1660586472000,
startTimeFormat: "2022-08-16 02:01:12",
storeType: 1,
streamType: 1
},
8]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH8",
value:
[0,
1660587701000,
1660596415000,
"CH8",
{
avType: undefined,
endTime: 1660596415000,
endTimeFormat: "2022-08-16 04:{46:50",
ftpServerId: undefined,
logicalChannel: 8,
startTime: 1660587701000,
startTimeFormat: "2022-08-16 02:21:41",
storeType: 1,
streamType: 1
},
8]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH8",
value:
[0,
1660596410000,
1660605118000,
"CH8",
{
avType: undefined,
endTime: 1660605118000,
endTimeFormat: "2022-08-16 07:11:53",
ftpServerId: undefined,
logicalChannel: 8,
startTime: 1660596410000,
startTimeFormat: "2022-08-16 04:{46:50",
storeType: 1,
streamType: 1
},
8]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH8",
value:
[0,
1660605113000,
1660613817000,
"CH8",
{
avType: undefined,
endTime: 1660613817000,
endTimeFormat: "2022-08-16 09:36:52",
ftpServerId: undefined,
logicalChannel: 8,
startTime: 1660605113000,
startTimeFormat: "2022-08-16 07:11:53",
storeType: 1,
streamType: 1
},
8]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH8",
value:
[0,
1660613812000,
1660621708000,
"CH8",
{
avType: undefined,
endTime: 1660621708000,
endTimeFormat: "2022-08-16 11:48:28",
ftpServerId: undefined,
logicalChannel: 8,
startTime: 1660613812000,
startTimeFormat: "2022-08-16 09:36:52",
storeType: 1,
streamType: 1
},
8]
}
,
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH7",
value:
[1,
1660579200000,
1660586404000,
"CH7",
{
avType: undefined,
endTime: 1660586404000,
endTimeFormat: "2022-08-16 02:00:04",
ftpServerId: undefined,
logicalChannel: 7,
startTime: 1660579200000,
startTimeFormat: "2022-08-16 00:00:00",
storeType: 1,
streamType: 1
},
7]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH7",
value:
[1,
1660586472000,
1660587959000,
"CH7",
{
avType: undefined,
endTime: 1660587959000,
endTimeFormat: "2022-08-16 02:25:54",
ftpServerId: undefined,
logicalChannel: 7,
startTime: 1660586472000,
startTimeFormat: "2022-08-16 02:01:12",
storeType: 1,
streamType: 1
},
7]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH7",
value:
[1,
1660587954000,
1660596681000,
"CH7",
{
avType: undefined,
endTime: 1660596681000,
endTimeFormat: "2022-08-16 04:{51:16",
ftpServerId: undefined,
logicalChannel: 7,
startTime: 1660587954000,
startTimeFormat: "2022-08-16 02:25:54",
storeType: 1,
streamType: 1
},
7]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH7",
value:
[1,
1660596676000,
1660605383000,
"CH7",
{
avType: undefined,
endTime: 1660605383000,
endTimeFormat: "2022-08-16 07:16:18",
ftpServerId: undefined,
logicalChannel: 7,
startTime: 1660596676000,
startTimeFormat: "2022-08-16 04:{51:16",
storeType: 1,
streamType: 1
},
7]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH7",
value:
[1,
1660605378000,
1660614081000,
"CH7",
{
avType: undefined,
endTime: 1660614081000,
endTimeFormat: "2022-08-16 09:41:16",
ftpServerId: undefined,
logicalChannel: 7,
startTime: 1660605378000,
startTimeFormat: "2022-08-16 07:16:18",
storeType: 1,
streamType: 1
},
7]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH7",
value:
[1,
1660614076000,
1660621710000,
"CH7",
{
avType: undefined,
endTime: 1660621710000,
endTimeFormat: "2022-08-16 11:48:30",
ftpServerId: undefined,
logicalChannel: 7,
startTime: 1660614076000,
startTimeFormat: "2022-08-16 09:41:16",
storeType: 1,
streamType: 1
},
7]
}
,
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH6",
value:
[2,
1660579200000,
1660585208000,
"CH6",
{
avType: undefined,
endTime: 1660585208000,
endTimeFormat: "2022-08-16 01:40:03",
ftpServerId: undefined,
logicalChannel: 6,
startTime: 1660579200000,
startTimeFormat: "2022-08-16 00:00:00",
storeType: 1,
streamType: 1
},
6]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH6",
value:
[2,
1660585203000,
1660586404000,
"CH6",
{
avType: undefined,
endTime: 1660586404000,
endTimeFormat: "2022-08-16 02:00:04",
ftpServerId: undefined,
logicalChannel: 6,
startTime: 1660585203000,
startTimeFormat: "2022-08-16 01:40:03",
storeType: 1,
streamType: 1
},
6]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH6",
value:
[2,
1660586472000,
1660591589000,
"CH6",
{
avType: undefined,
endTime: 1660591589000,
endTimeFormat: "2022-08-16 03:26:24",
ftpServerId: undefined,
logicalChannel: 6,
startTime: 1660586472000,
startTimeFormat: "2022-08-16 02:01:12",
storeType: 1,
streamType: 1
},
6]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH6",
value:
[2,
1660591584000,
1660597886000,
"CH6",
{
avType: undefined,
endTime: 1660597886000,
endTimeFormat: "2022-08-16 05:11:21",
ftpServerId: undefined,
logicalChannel: 6,
startTime: 1660591584000,
startTimeFormat: "2022-08-16 03:26:24",
storeType: 1,
streamType: 1,
},
6]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH6",
value:
[2,
1660597881000,
1660604186000,
"CH6",
{
avType: undefined,
endTime: 1660604186000,
endTimeFormat: "2022-08-16 06:56:21",
ftpServerId: undefined,
logicalChannel: 6,
startTime: 1660597881000,
startTimeFormat: "2022-08-16 05:11:21",
storeType: 1,
streamType: 1
},
6]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH6",
value:
[2,
1660604181000,
1660610484000,
"CH6",
{
avType: undefined,
endTime: 1660610484000,
endTimeFormat: "2022-08-16 08:41:19",
ftpServerId: undefined,
logicalChannel: 6,
startTime: 1660604181000,
startTimeFormat: "2022-08-16 06:56:21",
storeType: 1,
streamType: 1
},
6]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH6",
value:
[2,
1660610479000,
1660616788000,
"CH6",
{
avType: undefined,
endTime: 1660616788000,
endTimeFormat: "2022-08-16 10:26:23",
ftpServerId: undefined,
logicalChannel: 6,
startTime: 1660610479000,
startTimeFormat: "2022-08-16 08:41:19",
storeType: 1,
streamType: 1
},
6]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH6",
value:
[2,
1660616783000,
1660621715000,
"CH6",
{
avType: undefined,
endTime: 1660621715000,
endTimeFormat: "2022-08-16 11:48:35",
ftpServerId: undefined,
logicalChannel: 6,
startTime: 1660616783000,
startTimeFormat: "2022-08-16 10:26:23",
storeType: 1,
streamType: 1
},
6]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH5",
value:
[3,
1660579200000,
1660586404000,
"CH5",
{
avType: undefined,
endTime: 1660586404000,
endTimeFormat: "2022-08-16 02:00:04",
ftpServerId: undefined,
logicalChannel: 5,
startTime: 1660579200000,
startTimeFormat: "2022-08-16 00:00:00",
storeType: 1,
streamType: 1
},
5]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH5",
value:
[3,
1660586472000,
1660586573000,
"CH5",
{
avType: undefined,
endTime: 1660586573000,
endTimeFormat: "2022-08-16 02:02:48",
ftpServerId: undefined,
logicalChannel: 5,
startTime: 1660586472000,
startTimeFormat: "2022-08-16 02:01:12",
storeType: 1,
streamType: 1
},
5]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH5",
value:
[3,
1660586568000,
1660595245000,
"CH5",
{
avType: undefined,
endTime: 1660595245000,
endTimeFormat: "2022-08-16 04:27:20",
ftpServerId: undefined,
logicalChannel: 5,
startTime: 1660586568000,
startTimeFormat: "2022-08-16 02:02:48",
storeType: 1,
streamType: 1
},
5]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH5",
value:
[3,
1660595240000,
1660603916000,
"CH5",
{
avType: undefined,
endTime: 1660603916000,
endTimeFormat: "2022-08-16 06:51:51",
ftpServerId: undefined,
logicalChannel: 5,
startTime: 1660595240000,
startTimeFormat: "2022-08-16 04:27:20",
storeType: 1,
streamType: 1
},
5]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH5",
value:
[3,
1660603911000,
1660612601000,
"CH5",
{
avType: undefined,
endTime: 1660612601000,
endTimeFormat: "2022-08-16 09:16:36",
ftpServerId: undefined,
logicalChannel: 5,
startTime: 1660603911000,
startTimeFormat: "2022-08-16 06:51:51",
storeType: 1,
streamType: 1
},
5]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH5",
value:
[3,
1660612596000,
1660621314000,
"CH5",
{
avType: undefined,
endTime: 1660621314000,
endTimeFormat: "2022-08-16 11:41:49",
ftpServerId: undefined,
logicalChannel: 5,
startTime: 1660612596000,
startTimeFormat: "2022-08-16 09:16:36",
storeType: 1,
streamType: 1
},
5]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH5",
value:
[3,
1660621309000,
1660621709000,
"CH5",
{
avType: undefined,
endTime: 1660621709000,
endTimeFormat: "2022-08-16 11:48:29",
ftpServerId: undefined,
logicalChannel: 5,
startTime: 1660621309000,
startTimeFormat: "2022-08-16 11:41:49",
storeType: 1,
streamType: 1,
}, 5]
}
,
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH4",
value:
[4,
1660579200000,
1660586404000,
"CH4",
{
avType: undefined,
endTime: 1660586404000,
endTimeFormat: "2022-08-16 02:00:04",
ftpServerId: undefined,
logicalChannel: 4,
startTime: 1660579200000,
startTimeFormat: "2022-08-16 00:00:00",
storeType: 1,
streamType: 1,
},
4]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH4",
value:
[4,
1660586472000,
1660586562000,
"CH4",
{
avType: undefined,
endTime: 1660586562000,
endTimeFormat: "2022-08-16 02:02:37",
ftpServerId: undefined,
logicalChannel: 4,
startTime: 1660586472000,
startTimeFormat: "2022-08-16 02:01:12",
storeType: 1,
streamType: 1
}, 4]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH4",
value:
[4,
1660586557000,
1660595224000,
"CH4",
{
avType: undefined,
endTime: 1660595224000,
endTimeFormat: "2022-08-16 04:26:59",
ftpServerId: undefined,
logicalChannel: 4,
startTime: 1660586557000,
startTimeFormat: "2022-08-16 02:02:37",
storeType: 1,
streamType: 1
},
4]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH4",
value:
[4,
1660595219000,
1660603898000,
"CH4",
{
avType: undefined,
endTime: 1660603898000,
endTimeFormat: "2022-08-16 06:51:33",
ftpServerId: undefined,
logicalChannel: 4,
startTime: 1660595219000,
startTimeFormat: "2022-08-16 04:26:59",
storeType: 1,
streamType: 1
},
4]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH4",
value:
[4,
1660603893000,
1660612566000,
"CH4",
{
avType: undefined,
endTime: 1660612566000,
endTimeFormat: "2022-08-16 09:16:01",
ftpServerId: undefined,
logicalChannel: 4,
startTime: 1660603893000,
startTimeFormat: "2022-08-16 06:51:33",
storeType: 1,
streamType: 1
},
4]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH4",
value:
[4,
1660612561000,
1660621277000,
"CH4",
{
avType: undefined,
endTime: 1660621277000,
endTimeFormat: "2022-08-16 11:41:12",
ftpServerId: undefined,
logicalChannel: 4,
startTime: 1660612561000,
startTimeFormat: "2022-08-16 09:16:01",
storeType: 1,
streamType: 1
},
4]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH4",
value:
[4,
1660621272000,
1660621712000,
"CH4",
{
avType: undefined,
endTime: 1660621712000,
endTimeFormat: "2022-08-16 11:48:32",
ftpServerId: undefined,
logicalChannel: 4,
startTime: 1660621272000,
startTimeFormat: "2022-08-16 11:41:12",
storeType: 1,
streamType: 1,
},
4]
}
,
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH3",
value:
[5,
1660579200000,
1660586404000,
"CH3",
{
avType: undefined,
endTime: 1660586404000,
endTimeFormat: "2022-08-16 02:00:04",
ftpServerId: undefined,
logicalChannel: 3,
startTime: 1660579200000,
startTimeFormat: "2022-08-16 00:00:00",
storeType: 1,
streamType: 1,
},
3]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH3",
value:
[5,
1660586472000,
1660586682000,
"CH3",
{
avType: undefined,
endTime: 1660586682000,
endTimeFormat: "2022-08-16 02:04:37",
ftpServerId: undefined,
logicalChannel: 3,
startTime: 1660586472000,
startTimeFormat: "2022-08-16 02:01:12",
storeType: 1,
streamType: 1,
},
3]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH3",
value:
[5,
1660586677000,
1660595379000,
"CH3",
{
avType: undefined,
endTime: 1660595379000,
endTimeFormat: "2022-08-16 04:29:34",
ftpServerId: undefined,
logicalChannel: 3,
startTime: 1660586677000,
startTimeFormat: "2022-08-16 02:04:37",
storeType: 1,
streamType: 1,
},
3]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH3",
value:
[5,
1660595374000,
1660604062000,
"CH3",
{
avType: undefined,
endTime: 1660604062000,
endTimeFormat: "2022-08-16 06:54:17",
ftpServerId: undefined,
logicalChannel: 3,
startTime: 1660595374000,
startTimeFormat: "2022-08-16 04:29:34",
storeType: 1,
streamType: 1,
},
3]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH3",
value:
[5,
1660604057000,
1660612735000,
"CH3",
{
avType: undefined,
endTime: 1660612735000,
endTimeFormat: "2022-08-16 09:18:50",
ftpServerId: undefined,
logicalChannel: 3,
startTime: 1660604057000,
startTimeFormat: "2022-08-16 06:54:17",
storeType: 1,
streamType: 1,
},
3]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH3",
value:
[5,
1660612730000,
1660621474000,
"CH3",
{
avType: undefined,
endTime: 1660621474000,
endTimeFormat: "2022-08-16 11:44:29",
ftpServerId: undefined,
logicalChannel: 3,
startTime: 1660612730000,
startTimeFormat: "2022-08-16 09:18:50",
storeType: 1,
streamType: 1,
},
3]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH3",
value:
[5,
1660621469000,
1660621709000,
"CH3",
{
avType: undefined,
endTime: 1660621709000,
endTimeFormat: "2022-08-16 11:48:29",
ftpServerId: undefined,
logicalChannel: 3,
startTime: 1660621469000,
startTimeFormat: "2022-08-16 11:44:29",
storeType: 1,
streamType: 1,
},
3]
}
,
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH2",
value:
[6,
1660579200000,
1660586404000,
"CH2",
{
avType: undefined,
endTime: 1660586404000,
endTimeFormat: "2022-08-16 02:00:04",
ftpServerId: undefined,
logicalChannel: 2,
startTime: 1660579200000,
startTimeFormat: "2022-08-16 00:00:00",
storeType: 1,
streamType: 1,
},
2]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH2",
value:
[6,
1660586472000,
1660586732000,
"CH2",
{
avType: undefined,
endTime: 1660586732000,
endTimeFormat: "2022-08-16 02:05:27",
ftpServerId: undefined,
logicalChannel: 2,
startTime: 1660586472000,
startTimeFormat: "2022-08-16 02:01:12",
storeType: 1,
streamType: 1,
},
2]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH2",
value:
[6,
1660586727000,
1660595417000,
"CH2",
{
avType: undefined,
endTime: 1660595417000,
endTimeFormat: "2022-08-16 04:30:12",
ftpServerId: undefined,
logicalChannel: 2,
startTime: 1660586727000,
startTimeFormat: "2022-08-16 02:05:27",
storeType: 1,
streamType: 1,
},
2]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH2",
value:
[6,
1660595412000,
1660604097000,
"CH2",
{
avType: undefined,
endTime: 1660604097000,
endTimeFormat: "2022-08-16 06:54:52",
ftpServerId: undefined,
logicalChannel: 2,
startTime: 1660595412000,
startTimeFormat: "2022-08-16 04:30:12",
storeType: 1,
streamType: 1,
},
2]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH2",
value:
[6,
1660604092000,
1660612778000,
"CH2",
{
avType: undefined,
endTime: 1660612778000,
endTimeFormat: "2022-08-16 09:19:33",
ftpServerId: undefined,
logicalChannel: 2,
startTime: 1660604092000,
startTimeFormat: "2022-08-16 06:54:52",
storeType: 1,
streamType: 1,
},
2]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH2",
value:
[6,
1660612773000,
1660621520000,
"CH2",
{
avType: undefined,
endTime: 1660621520000,
endTimeFormat: "2022-08-16 11:45:15",
ftpServerId: undefined,
logicalChannel: 2,
startTime: 1660612773000,
startTimeFormat: "2022-08-16 09:19:33",
storeType: 1,
streamType: 1,
},
2]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH2",
value:
[6,
1660621515000,
1660621710000,
"CH2",
{
avType: undefined,
endTime: 1660621710000,
endTimeFormat: "2022-08-16 11:48:30",
ftpServerId: undefined,
logicalChannel: 2,
startTime: 1660621515000,
startTimeFormat: "2022-08-16 11:45:15",
storeType: 1,
streamType: 1,
},
2]
}
,
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH1",
value:
[7,
1660579200000,
1660586404000,
"CH1",
{
avType: undefined,
endTime: 1660586404000,
endTimeFormat: "2022-08-16 02:00:04",
ftpServerId: undefined,
logicalChannel: 1,
startTime: 1660579200000,
startTimeFormat: "2022-08-16 00:00:00",
storeType: 1,
streamType: 1,
},
1]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH1",
value:
[7,
1660586472000,
1660586867000,
"CH1",
{
avType: undefined,
endTime: 1660586867000,
endTimeFormat: "2022-08-16 02:07:42",
ftpServerId: undefined,
logicalChannel: 1,
startTime: 1660586472000,
startTimeFormat: "2022-08-16 02:01:12",
storeType: 1,
streamType: 1,
},
1]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH1",
value:
[7,
1660586862000,
1660595540000,
"CH1",
{
avType: undefined,
endTime: 1660595540000,
endTimeFormat: "2022-08-16 04:{32:15",
ftpServerId: undefined,
logicalChannel: 1,
startTime: 1660586862000,
startTimeFormat: "2022-08-16 02:07:42",
storeType: 1,
streamType: 1,
},
1]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH1",
value:
[7,
1660595535000,
1660604222000,
"CH1",
{
avType: undefined,
endTime: 1660604222000,
endTimeFormat: "2022-08-16 06:56:57",
ftpServerId: undefined,
logicalChannel: 1,
startTime: 1660595535000,
startTimeFormat: "2022-08-16 04:32:15",
storeType: 1,
streamType: 1,
},
1]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH1",
value:
[7,
1660604217000,
1660612898000,
"CH1",
{
avType: undefined,
endTime: 1660612898000,
endTimeFormat: "2022-08-16 09:21:33",
ftpServerId: undefined,
logicalChannel: 1,
startTime: 1660604217000,
startTimeFormat: "2022-08-16 06:56:57",
storeType: 1,
streamType: 1,
},
1]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH1",
value:
[7,
1660612893000,
1660621641000,
"CH1",
{
avType: undefined,
endTime: 1660621641000,
endTimeFormat: "2022-08-16 11:47:16",
ftpServerId: undefined,
logicalChannel: 1,
startTime: 1660612893000,
startTimeFormat: "2022-08-16 09:21:33",
storeType: 1,
streamType: 1,
},
1]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH1",
value:
[7,
1660621636000,
1660621709000,
"CH1",
{
avType: undefined,
endTime: 1660621709000,
endTimeFormat: "2022-08-16 11:48:29",
ftpServerId: undefined,
logicalChannel: 1,
startTime: 1660621636000,
startTimeFormat: "2022-08-16 11:47:16",
storeType: 1,
streamType: 1,
},
1]
}
]
let title = '2022-08-16';
let option = {
tooltip: {
show: true,
trigger: 'item',
position: function (p) {
return [p[0] + 10, p[1] - 10];
},
formatter: function (params) {
if (params.name != null) {
return params.name + ":" + formatDateStartTime;
} else {
return "";
}
},
},
dataZoom: [{
zoomLock: true,
type: 'inside',
xAxisIndex: 0,
filterMode: 'weakFilter'
}],
grid: {
height: 150,
show: true,
borderColor: '#cdc1c1',
borderWidth: 0.5,
left: '3%',
bottom: '2%',
top: '2%',
right: '1%'
},
xAxis: {
type: 'time',
//interval: xIntervalNum * 3600 * 1000,
//min: startTime,
min: new Date(title + " 00:00:00").getTime(),
max: new Date(title + " 23:59:59").getTime(),
scale: true,
axisLabel: {
formatter: function (value) {
return dateFtt("hh:mm:ss", new Date(value))
},
},
show: true,
splitLine: {
show: true,
lineStyle: {
color: '#cdc1c1',
width: 0.5,
type: 'dashed',
},
},
axisPointer: {
type: 'line',
axis: 'x',
show: true,
triggerTooltip: true,
lineStyle: {
type: 'solid',
color: '#cdc1c1',
width: 0.5
},
label: {
show: true,
formatter: function (params) {
//console.log(dateFtt("hh:mm:ss", new Date(params.value)))
formatDateStartTime = title + ' ' + dateFtt("hh:mm:ss", new Date(params.value))
formatDateEndTime = title + ' ' + dateFtt("hh:mm:ss", new Date('23:59:59'))
let val = parseInt(params.value)
if (val > 0) {
return dateFtt("hh:mm:ss", new Date(val))
}
},
backgroundColor: '#991028',
color: '#fff',
},
z: 5
},
},
yAxis: {
data: mGroup,
show: true,
splitLine: {
show: true,
lineStyle: {
color: '#A0A0A0',
width: 2,
},
},
},
series: [
{
type: 'custom',
renderItem: renderItem,
//itemStyle: {
// opacity: 0.8
// },
encode: {
/*x: [1, 2],*/
y: 0
},
data: dataList
}
]
};
myChart.setOption(option);
function dateFtt(fmt, date) { //author: meizz
var o = {
"M+": date.getMonth() + 1, //月份
"d+": date.getDate(), //日
"h+": date.getHours(), //小时
"m+": date.getMinutes(), //分
"s+": date.getSeconds(), //秒
"q+": Math.floor((date.getMonth() + 3) / 3), //季度
"S": date.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt))
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
function renderItem(params, api) {
var categoryIndex = api.value(0);
var start = api.coord([api.value(1), categoryIndex]);
var end = api.coord([api.value(2), categoryIndex]);
var height = api.size([0, 1])[1] - 2.2;
var rectShape = echarts.graphic.clipRectByRect(
{
x: start[0],
y: start[1] - height / 2,
width: end[0] - start[0] + 1,
height: height
},
{
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
}
);
return (
rectShape && {
type: 'rect',
transition: ['shape'],
shape: rectShape,
style: api.style()
}
);
}
</script>
</html>top 2:echarts line
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>top 2</title>
<script src="js/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 100%;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
myChart.on('click', function (params) {
console.log('click')
});
var colors = ['#5793f3', '#d14a61', '#675bba'];
let title = '2022-08-16';
let acc = [
0,
0,
0,
0,
0,
0,
1,
1,
1,
1,
1,
1,
1,
1,
1,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
];
var Time = [
"09:03:44",
"09:05:44",
"09:07:44",
"09:09:44",
"09:11:44",
"09:13:44",
"09:15:44",
"09:17:44",
"09:19:44",
"09:21:44",
"09:23:44",
"09:25:45",
"09:27:45",
"09:29:45",
"09:31:45",
"09:33:45",
"09:35:45",
"09:37:45",
"09:39:45",
"09:41:45",
"09:43:45",
"09:45:45",
"09:47:45",
"09:49:45",
"09:51:45",
"09:53:45",
"09:55:45",
"09:57:45",
"09:59:45",
"10:01:45",
"10:03:45",
"10:05:45",
"10:07:45",
"10:09:45",
"10:11:45",
"10:13:45",
"10:15:45",
"10:17:45",
"10:19:45",
"10:21:45",
"10:23:45",
"10:25:45",
"10:27:45",
"10:29:45",
"10:31:45",
"10:33:45",
"10:35:45",
"10:37:45",
"10:39:45",
"10:41:45",
"10:43:45",
"10:45:45",
"10:47:45",
"10:49:45",
"10:51:45",
"10:53:45",
"10:55:45",
"10:57:45",
"10:59:45",
"11:01:45",
"11:03:45",
"11:05:45",
"11:07:45",
"11:09:45",
"11:11:45",
"11:13:45",
"11:15:45",
"11:17:45",
"11:19:45",
"11:21:45",
"11:23:45",
"11:25:45",
"11:27:45",
"11:29:45",
"11:31:45",
"11:33:45",
"11:35:45",
"11:37:45",
"11:39:45",
"11:41:45",
"11:43:45",
"11:45:45",
"11:47:45",
"11:49:45",
"11:51:45",
"11:53:45",
"11:55:45",
"11:57:45",
"11:59:45",
"12:01:45",
"12:03:45",
"12:05:45",
"12:07:45",
"12:09:45",
"12:11:45",
"12:13:45",
"12:15:45",
"12:17:45",
"12:19:45",
"12:21:45",
"12:23:45",
"12:25:45",
"12:27:45",
"12:29:45",
"12:31:45",
"12:33:45",
"12:35:45",
"12:37:45",
"12:39:45",
"12:41:45",
"12:43:45",
"12:45:45",
"12:47:45",
"12:49:45",
"12:51:45",
"12:53:45",
"12:55:45",
"12:57:45",
"12:59:45",
"13:01:45",
"13:03:45",
"13:05:45",
"13:07:45",
"13:09:45",
"13:11:45",
"13:13:45",
"13:15:45",
"13:17:45",
"13:19:45",
"13:21:45",
"13:23:45",
"13:25:45",
"13:27:45",
"13:29:45",
"13:31:45",
"13:33:45",
"13:35:45",
"13:37:45",
"13:39:45",
"13:41:45",
"13:43:45",
"13:45:45",
"13:47:45",
"13:49:45",
"13:51:45",
"13:53:45",
"13:55:45",
"13:57:45",
"13:59:45",
"14:01:45",
"14:03:45",
"14:05:45",
"14:07:45",
"14:09:45",
"14:11:45",
"14:13:45",
"14:15:45",
"14:17:45",
"14:19:45",
"14:21:45",
"14:23:45",
"14:25:45",
"14:27:45",
"14:29:45",
"14:31:45",
"14:33:45",
"14:35:45",
"14:37:45",
"14:39:45",
"14:41:45",
"14:43:45",
"14:45:45",
"14:47:45",
"14:49:45",
"14:51:45",
"14:53:45",
"14:55:45",
"14:57:45",
"14:59:45",
"15:01:45",
"15:03:45",
"15:05:45",
"15:07:45",
"15:09:45",
"15:11:45",
"15:13:45",
"15:15:45",
"15:17:45",
"15:19:45",
"15:21:45",
"15:23:45",
"15:25:45",
"15:27:45",
"15:29:45",
"15:31:45",
"15:33:45",
"15:35:45",
"15:37:45",
"15:39:45",
"15:41:45",
"15:43:45",
"15:45:45",
"15:47:45",
"15:49:45",
"15:51:45",
"15:53:45",
"15:55:45",
"15:57:45",
"15:59:45",
"16:01:45",
"16:03:45",
"16:05:45",
"16:07:45",
"16:09:45",
"16:11:45",
"16:13:45",
"16:15:45",
"16:17:45",
"16:19:45",
"16:21:45",
"16:23:45",
"16:25:45",
"16:27:45",
"16:29:45",
"16:31:45",
"16:33:45",
"16:35:45",
"16:37:45",
"16:39:45",
"16:41:45",
"16:43:45",
"16:45:45",
"16:47:45",
"16:49:45",
"16:51:45",
"16:53:45",
"16:55:45",
"16:57:45",
"16:59:45",
"17:01:45",
"17:03:45",
"17:05:45",
"17:07:45",
"17:09:45",
"17:11:45",
"17:13:45",
"17:15:45",
"17:17:45",
"17:19:45",
"17:21:45",
"17:23:45",
"17:25:45",
"17:27:45",
"17:29:45",
"17:31:45",
"17:33:45",
"17:35:45",
"17:37:45",
"17:39:45",
"17:41:45",
"17:43:45",
"17:45:45",
"17:47:45",
"17:49:45",
"17:51:45",
"17:53:45",
"17:55:45",
"17:57:45",
"17:59:45",
"18:01:45",
];
let option = {
color: colors,
tooltip: {
trigger: 'axis'
, formatter: function (params) {
return params[0].name;
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {
show: false
}
}
},
xAxis: {
type: 'category',
data: Time
},
yAxis: {
type: 'value',
axisLabel: {
formatter: ''
}
},
series: [
{
type: 'line',
step: 'start',
data: acc
}
]
};
myChart.setOption(option);
</script>
</html>top 3: 参考后的改变
参考文章：echarts时间轴应用_越来越好。的博客-CSDN博客_echarts 时间轴
经过更改，以下模样
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 100%;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
myChart.on('click', function (params) {
console.log('click')
});
let title = '2022-05-01';
let listData = [
[myDate(1651372200, 1), 20],
[myDate(1651373400, 1), 40],
[myDate(1651377000, 1), 35]
];
console.log(listData)
let option = {
xAxis: {
type: 'time',
min: new Date(title + " 00:00:00").getTime(),
max: new Date(title + " 23:59:59").getTime(),
scale: true,
axisLabel: {
formatter: function (value) {
return dateFtt("hh:mm:ss", new Date(value))
},
},
show: true,
splitLine: {
show: true,
lineStyle: {
color: '#cdc1c1',
width: 0.5,
type: 'dashed',
},
},
axisPointer: {
type: 'line',
axis: 'x',
show: true,
triggerTooltip: true,
lineStyle: {
type: 'solid',
color: '#cdc1c1',
width: 0.5
},
label: {
show: true,
formatter: function (params) {
formatDateStartTime = title + ' ' + dateFtt("hh:mm:ss", new Date(params.value))
formatDateEndTime = title + ' ' + dateFtt("hh:mm:ss", new Date('23:59:59'))
let val = parseInt(params.value)
if (val > 0) {
return dateFtt("hh:mm:ss", new Date(val))
}
},
backgroundColor: '#991028',
color: '#fff',
},
z: 5
},
},
yAxis: {
type: 'value',
min: 0,
max: 80
},
series: [
{
data: listData,
type: 'line',
}
]
};
function timestampToTime(timestamp) {
var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
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 h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
return M + D + h + m + s;
}
myChart.setOption(option);
function myDate(value, type = 0) {
var time = new Date(value * 1000);
var year = time.getFullYear();
var month = time.getMonth() + 1;
var date = time.getDate();
var hour = time.getHours();
var minute = time.getMinutes();
var second = time.getSeconds();
month = month < 10 ? "0" + month : month;
date = date < 10 ? "0" + date : date;
hour = hour < 10 ? "0" + hour : hour;
minute = minute < 10 ? "0" + minute : minute;
second = second < 10 ? "0" + second : second;
var arr = [
year + "-" + month + "-" + date,
year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second,
year + "年" + month + "月" + date,
year + "年" + month + "月" + date + " " + hour + ":" + minute + ":" + second,
hour + ":" + minute + ":" + second
]
return arr[type];
}
function dateFtt(fmt, date) { //author: meizz
var o = {
"M+": date.getMonth() + 1, //月份
"d+": date.getDate(), //日
"h+": date.getHours(), //小时
"m+": date.getMinutes(), //分
"s+": date.getSeconds(), //秒
"q+": Math.floor((date.getMonth() + 3) / 3), //季度
"S": date.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt))
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 100%;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
myChart.on('click', function (params) {
console.log('click')
});
let title = '2022-08-16';
let listData = [
["2022-08-16 08:00:36", 1],
["2022-08-16 08:30:46", 0],
["2022-08-16 09:20:46", 1],
["2022-08-16 10:22:46", 0]
];
console.log(listData)
let option = {
xAxis: {
type: 'time',
min: new Date(title + " 00:00:00").getTime(),
max: new Date(title + " 23:59:59").getTime(),
scale: true,
axisLabel: {
formatter: function (value) {
return dateFtt("hh:mm:ss", new Date(value))
},
},
show: true,
splitLine: {
show: true,
lineStyle: {
color: '#cdc1c1',
width: 0.5,
type: 'dashed',
},
},
axisPointer: {
type: 'line',
axis: 'x',
show: true,
triggerTooltip: true,
lineStyle: {
type: 'solid',
color: '#cdc1c1',
width: 0.5
},
label: {
show: true,
formatter: function (params) {
formatDateStartTime = title + ' ' + dateFtt("hh:mm:ss", new Date(params.value))
formatDateEndTime = title + ' ' + dateFtt("hh:mm:ss", new Date('23:59:59'))
let val = parseInt(params.value)
if (val > 0) {
return dateFtt("hh:mm:ss", new Date(val))
}
},
backgroundColor: '#991028',
color: '#fff',
},
z: 5
},
},
yAxis: {
type: 'value',
},
series: [
{
data: listData,
type: 'line'
}
]
};
myChart.setOption(option);
function dateFtt(fmt, date) { //author: meizz
var o = {
"M+": date.getMonth() + 1, //月份
"d+": date.getDate(), //日
"h+": date.getHours(), //小时
"m+": date.getMinutes(), //分
"s+": date.getSeconds(), //秒
"q+": Math.floor((date.getMonth() + 3) / 3), //季度
"S": date.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt))
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
</script>
</html>top 4:随机组合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 100%;height:400px; margin-top: 20px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var formatDateStartTime = '';
var formatDateEndTime = '';
let mGroup = [ "CH8", "CH7", "CH6", "CH5", "CH4", "CH3", "CH2", "CH1", '关机', '开机'];
let dataList = [
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH8",
value: [0, 1660579200000, 1660586404000, "CH8", {
avType: undefined,
endTime: 1660586404000,
endTimeFormat: "2022-08-16 02:00:04",
ftpServerId: undefined,
logicalChannel: 8,
startTime: 1660579200000,
startTimeFormat: "2022-08-16 00:00:00",
storeType: 1,
streamType: 1
}, 8]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH8",
value:
[0,
1660586472000,
1660587706000,
"CH8",
{
avType: undefined,
endTime: 1660587706000,
endTimeFormat: "2022-08-16 02:21:41",
ftpServerId: undefined,
logicalChannel: 8,
startTime: 1660586472000,
startTimeFormat: "2022-08-16 02:01:12",
storeType: 1,
streamType: 1
},
8]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH8",
value:
[0,
1660587701000,
1660596415000,
"CH8",
{
avType: undefined,
endTime: 1660596415000,
endTimeFormat: "2022-08-16 04:{46:50",
ftpServerId: undefined,
logicalChannel: 8,
startTime: 1660587701000,
startTimeFormat: "2022-08-16 02:21:41",
storeType: 1,
streamType: 1
},
8]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH8",
value:
[0,
1660596410000,
1660605118000,
"CH8",
{
avType: undefined,
endTime: 1660605118000,
endTimeFormat: "2022-08-16 07:11:53",
ftpServerId: undefined,
logicalChannel: 8,
startTime: 1660596410000,
startTimeFormat: "2022-08-16 04:{46:50",
storeType: 1,
streamType: 1
},
8]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH8",
value:
[0,
1660605113000,
1660613817000,
"CH8",
{
avType: undefined,
endTime: 1660613817000,
endTimeFormat: "2022-08-16 09:36:52",
ftpServerId: undefined,
logicalChannel: 8,
startTime: 1660605113000,
startTimeFormat: "2022-08-16 07:11:53",
storeType: 1,
streamType: 1
},
8]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH8",
value:
[0,
1660613812000,
1660621708000,
"CH8",
{
avType: undefined,
endTime: 1660621708000,
endTimeFormat: "2022-08-16 11:48:28",
ftpServerId: undefined,
logicalChannel: 8,
startTime: 1660613812000,
startTimeFormat: "2022-08-16 09:36:52",
storeType: 1,
streamType: 1
},
8]
}
,
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH7",
value:
[1,
1660579200000,
1660586404000,
"CH7",
{
avType: undefined,
endTime: 1660586404000,
endTimeFormat: "2022-08-16 02:00:04",
ftpServerId: undefined,
logicalChannel: 7,
startTime: 1660579200000,
startTimeFormat: "2022-08-16 00:00:00",
storeType: 1,
streamType: 1
},
7]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH7",
value:
[1,
1660586472000,
1660587959000,
"CH7",
{
avType: undefined,
endTime: 1660587959000,
endTimeFormat: "2022-08-16 02:25:54",
ftpServerId: undefined,
logicalChannel: 7,
startTime: 1660586472000,
startTimeFormat: "2022-08-16 02:01:12",
storeType: 1,
streamType: 1
},
7]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH7",
value:
[1,
1660587954000,
1660596681000,
"CH7",
{
avType: undefined,
endTime: 1660596681000,
endTimeFormat: "2022-08-16 04:{51:16",
ftpServerId: undefined,
logicalChannel: 7,
startTime: 1660587954000,
startTimeFormat: "2022-08-16 02:25:54",
storeType: 1,
streamType: 1
},
7]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH7",
value:
[1,
1660596676000,
1660605383000,
"CH7",
{
avType: undefined,
endTime: 1660605383000,
endTimeFormat: "2022-08-16 07:16:18",
ftpServerId: undefined,
logicalChannel: 7,
startTime: 1660596676000,
startTimeFormat: "2022-08-16 04:{51:16",
storeType: 1,
streamType: 1
},
7]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH7",
value:
[1,
1660605378000,
1660614081000,
"CH7",
{
avType: undefined,
endTime: 1660614081000,
endTimeFormat: "2022-08-16 09:41:16",
ftpServerId: undefined,
logicalChannel: 7,
startTime: 1660605378000,
startTimeFormat: "2022-08-16 07:16:18",
storeType: 1,
streamType: 1
},
7]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH7",
value:
[1,
1660614076000,
1660621710000,
"CH7",
{
avType: undefined,
endTime: 1660621710000,
endTimeFormat: "2022-08-16 11:48:30",
ftpServerId: undefined,
logicalChannel: 7,
startTime: 1660614076000,
startTimeFormat: "2022-08-16 09:41:16",
storeType: 1,
streamType: 1
},
7]
}
,
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH6",
value:
[2,
1660579200000,
1660585208000,
"CH6",
{
avType: undefined,
endTime: 1660585208000,
endTimeFormat: "2022-08-16 01:40:03",
ftpServerId: undefined,
logicalChannel: 6,
startTime: 1660579200000,
startTimeFormat: "2022-08-16 00:00:00",
storeType: 1,
streamType: 1
},
6]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH6",
value:
[2,
1660585203000,
1660586404000,
"CH6",
{
avType: undefined,
endTime: 1660586404000,
endTimeFormat: "2022-08-16 02:00:04",
ftpServerId: undefined,
logicalChannel: 6,
startTime: 1660585203000,
startTimeFormat: "2022-08-16 01:40:03",
storeType: 1,
streamType: 1
},
6]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH6",
value:
[2,
1660586472000,
1660591589000,
"CH6",
{
avType: undefined,
endTime: 1660591589000,
endTimeFormat: "2022-08-16 03:26:24",
ftpServerId: undefined,
logicalChannel: 6,
startTime: 1660586472000,
startTimeFormat: "2022-08-16 02:01:12",
storeType: 1,
streamType: 1
},
6]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH6",
value:
[2,
1660591584000,
1660597886000,
"CH6",
{
avType: undefined,
endTime: 1660597886000,
endTimeFormat: "2022-08-16 05:11:21",
ftpServerId: undefined,
logicalChannel: 6,
startTime: 1660591584000,
startTimeFormat: "2022-08-16 03:26:24",
storeType: 1,
streamType: 1,
},
6]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH6",
value:
[2,
1660597881000,
1660604186000,
"CH6",
{
avType: undefined,
endTime: 1660604186000,
endTimeFormat: "2022-08-16 06:56:21",
ftpServerId: undefined,
logicalChannel: 6,
startTime: 1660597881000,
startTimeFormat: "2022-08-16 05:11:21",
storeType: 1,
streamType: 1
},
6]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH6",
value:
[2,
1660604181000,
1660610484000,
"CH6",
{
avType: undefined,
endTime: 1660610484000,
endTimeFormat: "2022-08-16 08:41:19",
ftpServerId: undefined,
logicalChannel: 6,
startTime: 1660604181000,
startTimeFormat: "2022-08-16 06:56:21",
storeType: 1,
streamType: 1
},
6]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH6",
value:
[2,
1660610479000,
1660616788000,
"CH6",
{
avType: undefined,
endTime: 1660616788000,
endTimeFormat: "2022-08-16 10:26:23",
ftpServerId: undefined,
logicalChannel: 6,
startTime: 1660610479000,
startTimeFormat: "2022-08-16 08:41:19",
storeType: 1,
streamType: 1
},
6]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH6",
value:
[2,
1660616783000,
1660621715000,
"CH6",
{
avType: undefined,
endTime: 1660621715000,
endTimeFormat: "2022-08-16 11:48:35",
ftpServerId: undefined,
logicalChannel: 6,
startTime: 1660616783000,
startTimeFormat: "2022-08-16 10:26:23",
storeType: 1,
streamType: 1
},
6]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH5",
value:
[3,
1660579200000,
1660586404000,
"CH5",
{
avType: undefined,
endTime: 1660586404000,
endTimeFormat: "2022-08-16 02:00:04",
ftpServerId: undefined,
logicalChannel: 5,
startTime: 1660579200000,
startTimeFormat: "2022-08-16 00:00:00",
storeType: 1,
streamType: 1
},
5]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH5",
value:
[3,
1660586472000,
1660586573000,
"CH5",
{
avType: undefined,
endTime: 1660586573000,
endTimeFormat: "2022-08-16 02:02:48",
ftpServerId: undefined,
logicalChannel: 5,
startTime: 1660586472000,
startTimeFormat: "2022-08-16 02:01:12",
storeType: 1,
streamType: 1
},
5]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH5",
value:
[3,
1660586568000,
1660595245000,
"CH5",
{
avType: undefined,
endTime: 1660595245000,
endTimeFormat: "2022-08-16 04:27:20",
ftpServerId: undefined,
logicalChannel: 5,
startTime: 1660586568000,
startTimeFormat: "2022-08-16 02:02:48",
storeType: 1,
streamType: 1
},
5]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH5",
value:
[3,
1660595240000,
1660603916000,
"CH5",
{
avType: undefined,
endTime: 1660603916000,
endTimeFormat: "2022-08-16 06:51:51",
ftpServerId: undefined,
logicalChannel: 5,
startTime: 1660595240000,
startTimeFormat: "2022-08-16 04:27:20",
storeType: 1,
streamType: 1
},
5]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH5",
value:
[3,
1660603911000,
1660612601000,
"CH5",
{
avType: undefined,
endTime: 1660612601000,
endTimeFormat: "2022-08-16 09:16:36",
ftpServerId: undefined,
logicalChannel: 5,
startTime: 1660603911000,
startTimeFormat: "2022-08-16 06:51:51",
storeType: 1,
streamType: 1
},
5]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH5",
value:
[3,
1660612596000,
1660621314000,
"CH5",
{
avType: undefined,
endTime: 1660621314000,
endTimeFormat: "2022-08-16 11:41:49",
ftpServerId: undefined,
logicalChannel: 5,
startTime: 1660612596000,
startTimeFormat: "2022-08-16 09:16:36",
storeType: 1,
streamType: 1
},
5]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH5",
value:
[3,
1660621309000,
1660621709000,
"CH5",
{
avType: undefined,
endTime: 1660621709000,
endTimeFormat: "2022-08-16 11:48:29",
ftpServerId: undefined,
logicalChannel: 5,
startTime: 1660621309000,
startTimeFormat: "2022-08-16 11:41:49",
storeType: 1,
streamType: 1,
}, 5]
}
,
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH4",
value:
[4,
1660579200000,
1660586404000,
"CH4",
{
avType: undefined,
endTime: 1660586404000,
endTimeFormat: "2022-08-16 02:00:04",
ftpServerId: undefined,
logicalChannel: 4,
startTime: 1660579200000,
startTimeFormat: "2022-08-16 00:00:00",
storeType: 1,
streamType: 1,
},
4]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH4",
value:
[4,
1660586472000,
1660586562000,
"CH4",
{
avType: undefined,
endTime: 1660586562000,
endTimeFormat: "2022-08-16 02:02:37",
ftpServerId: undefined,
logicalChannel: 4,
startTime: 1660586472000,
startTimeFormat: "2022-08-16 02:01:12",
storeType: 1,
streamType: 1
}, 4]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH4",
value:
[4,
1660586557000,
1660595224000,
"CH4",
{
avType: undefined,
endTime: 1660595224000,
endTimeFormat: "2022-08-16 04:26:59",
ftpServerId: undefined,
logicalChannel: 4,
startTime: 1660586557000,
startTimeFormat: "2022-08-16 02:02:37",
storeType: 1,
streamType: 1
},
4]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH4",
value:
[4,
1660595219000,
1660603898000,
"CH4",
{
avType: undefined,
endTime: 1660603898000,
endTimeFormat: "2022-08-16 06:51:33",
ftpServerId: undefined,
logicalChannel: 4,
startTime: 1660595219000,
startTimeFormat: "2022-08-16 04:26:59",
storeType: 1,
streamType: 1
},
4]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH4",
value:
[4,
1660603893000,
1660612566000,
"CH4",
{
avType: undefined,
endTime: 1660612566000,
endTimeFormat: "2022-08-16 09:16:01",
ftpServerId: undefined,
logicalChannel: 4,
startTime: 1660603893000,
startTimeFormat: "2022-08-16 06:51:33",
storeType: 1,
streamType: 1
},
4]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH4",
value:
[4,
1660612561000,
1660621277000,
"CH4",
{
avType: undefined,
endTime: 1660621277000,
endTimeFormat: "2022-08-16 11:41:12",
ftpServerId: undefined,
logicalChannel: 4,
startTime: 1660612561000,
startTimeFormat: "2022-08-16 09:16:01",
storeType: 1,
streamType: 1
},
4]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH4",
value:
[4,
1660621272000,
1660621712000,
"CH4",
{
avType: undefined,
endTime: 1660621712000,
endTimeFormat: "2022-08-16 11:48:32",
ftpServerId: undefined,
logicalChannel: 4,
startTime: 1660621272000,
startTimeFormat: "2022-08-16 11:41:12",
storeType: 1,
streamType: 1,
},
4]
}
,
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH3",
value:
[5,
1660579200000,
1660586404000,
"CH3",
{
avType: undefined,
endTime: 1660586404000,
endTimeFormat: "2022-08-16 02:00:04",
ftpServerId: undefined,
logicalChannel: 3,
startTime: 1660579200000,
startTimeFormat: "2022-08-16 00:00:00",
storeType: 1,
streamType: 1,
},
3]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH3",
value:
[5,
1660586472000,
1660586682000,
"CH3",
{
avType: undefined,
endTime: 1660586682000,
endTimeFormat: "2022-08-16 02:04:37",
ftpServerId: undefined,
logicalChannel: 3,
startTime: 1660586472000,
startTimeFormat: "2022-08-16 02:01:12",
storeType: 1,
streamType: 1,
},
3]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH3",
value:
[5,
1660586677000,
1660595379000,
"CH3",
{
avType: undefined,
endTime: 1660595379000,
endTimeFormat: "2022-08-16 04:29:34",
ftpServerId: undefined,
logicalChannel: 3,
startTime: 1660586677000,
startTimeFormat: "2022-08-16 02:04:37",
storeType: 1,
streamType: 1,
},
3]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH3",
value:
[5,
1660595374000,
1660604062000,
"CH3",
{
avType: undefined,
endTime: 1660604062000,
endTimeFormat: "2022-08-16 06:54:17",
ftpServerId: undefined,
logicalChannel: 3,
startTime: 1660595374000,
startTimeFormat: "2022-08-16 04:29:34",
storeType: 1,
streamType: 1,
},
3]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH3",
value:
[5,
1660604057000,
1660612735000,
"CH3",
{
avType: undefined,
endTime: 1660612735000,
endTimeFormat: "2022-08-16 09:18:50",
ftpServerId: undefined,
logicalChannel: 3,
startTime: 1660604057000,
startTimeFormat: "2022-08-16 06:54:17",
storeType: 1,
streamType: 1,
},
3]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH3",
value:
[5,
1660612730000,
1660621474000,
"CH3",
{
avType: undefined,
endTime: 1660621474000,
endTimeFormat: "2022-08-16 11:44:29",
ftpServerId: undefined,
logicalChannel: 3,
startTime: 1660612730000,
startTimeFormat: "2022-08-16 09:18:50",
storeType: 1,
streamType: 1,
},
3]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH3",
value:
[5,
1660621469000,
1660621709000,
"CH3",
{
avType: undefined,
endTime: 1660621709000,
endTimeFormat: "2022-08-16 11:48:29",
ftpServerId: undefined,
logicalChannel: 3,
startTime: 1660621469000,
startTimeFormat: "2022-08-16 11:44:29",
storeType: 1,
streamType: 1,
},
3]
}
,
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH2",
value:
[6,
1660579200000,
1660586404000,
"CH2",
{
avType: undefined,
endTime: 1660586404000,
endTimeFormat: "2022-08-16 02:00:04",
ftpServerId: undefined,
logicalChannel: 2,
startTime: 1660579200000,
startTimeFormat: "2022-08-16 00:00:00",
storeType: 1,
streamType: 1,
},
2]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH2",
value:
[6,
1660586472000,
1660586732000,
"CH2",
{
avType: undefined,
endTime: 1660586732000,
endTimeFormat: "2022-08-16 02:05:27",
ftpServerId: undefined,
logicalChannel: 2,
startTime: 1660586472000,
startTimeFormat: "2022-08-16 02:01:12",
storeType: 1,
streamType: 1,
},
2]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH2",
value:
[6,
1660586727000,
1660595417000,
"CH2",
{
avType: undefined,
endTime: 1660595417000,
endTimeFormat: "2022-08-16 04:30:12",
ftpServerId: undefined,
logicalChannel: 2,
startTime: 1660586727000,
startTimeFormat: "2022-08-16 02:05:27",
storeType: 1,
streamType: 1,
},
2]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH2",
value:
[6,
1660595412000,
1660604097000,
"CH2",
{
avType: undefined,
endTime: 1660604097000,
endTimeFormat: "2022-08-16 06:54:52",
ftpServerId: undefined,
logicalChannel: 2,
startTime: 1660595412000,
startTimeFormat: "2022-08-16 04:30:12",
storeType: 1,
streamType: 1,
},
2]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH2",
value:
[6,
1660604092000,
1660612778000,
"CH2",
{
avType: undefined,
endTime: 1660612778000,
endTimeFormat: "2022-08-16 09:19:33",
ftpServerId: undefined,
logicalChannel: 2,
startTime: 1660604092000,
startTimeFormat: "2022-08-16 06:54:52",
storeType: 1,
streamType: 1,
},
2]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH2",
value:
[6,
1660612773000,
1660621520000,
"CH2",
{
avType: undefined,
endTime: 1660621520000,
endTimeFormat: "2022-08-16 11:45:15",
ftpServerId: undefined,
logicalChannel: 2,
startTime: 1660612773000,
startTimeFormat: "2022-08-16 09:19:33",
storeType: 1,
streamType: 1,
},
2]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH2",
value:
[6,
1660621515000,
1660621710000,
"CH2",
{
avType: undefined,
endTime: 1660621710000,
endTimeFormat: "2022-08-16 11:48:30",
ftpServerId: undefined,
logicalChannel: 2,
startTime: 1660621515000,
startTimeFormat: "2022-08-16 11:45:15",
storeType: 1,
streamType: 1,
},
2]
}
,
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH1",
value:
[7,
1660579200000,
1660586404000,
"CH1",
{
avType: undefined,
endTime: 1660586404000,
endTimeFormat: "2022-08-16 02:00:04",
ftpServerId: undefined,
logicalChannel: 1,
startTime: 1660579200000,
startTimeFormat: "2022-08-16 00:00:00",
storeType: 1,
streamType: 1,
},
1]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH1",
value:
[7,
1660586472000,
1660586867000,
"CH1",
{
avType: undefined,
endTime: 1660586867000,
endTimeFormat: "2022-08-16 02:07:42",
ftpServerId: undefined,
logicalChannel: 1,
startTime: 1660586472000,
startTimeFormat: "2022-08-16 02:01:12",
storeType: 1,
streamType: 1,
},
1]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH1",
value:
[7,
1660586862000,
1660595540000,
"CH1",
{
avType: undefined,
endTime: 1660595540000,
endTimeFormat: "2022-08-16 04:{32:15",
ftpServerId: undefined,
logicalChannel: 1,
startTime: 1660586862000,
startTimeFormat: "2022-08-16 02:07:42",
storeType: 1,
streamType: 1,
},
1]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH1",
value:
[7,
1660595535000,
1660604222000,
"CH1",
{
avType: undefined,
endTime: 1660604222000,
endTimeFormat: "2022-08-16 06:56:57",
ftpServerId: undefined,
logicalChannel: 1,
startTime: 1660595535000,
startTimeFormat: "2022-08-16 04:32:15",
storeType: 1,
streamType: 1,
},
1]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH1",
value:
[7,
1660604217000,
1660612898000,
"CH1",
{
avType: undefined,
endTime: 1660612898000,
endTimeFormat: "2022-08-16 09:21:33",
ftpServerId: undefined,
logicalChannel: 1,
startTime: 1660604217000,
startTimeFormat: "2022-08-16 06:56:57",
storeType: 1,
streamType: 1,
},
1]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH1",
value:
[7,
1660612893000,
1660621641000,
"CH1",
{
avType: undefined,
endTime: 1660621641000,
endTimeFormat: "2022-08-16 11:47:16",
ftpServerId: undefined,
logicalChannel: 1,
startTime: 1660612893000,
startTimeFormat: "2022-08-16 09:21:33",
storeType: 1,
streamType: 1,
},
1]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH1",
value:
[7,
1660621636000,
1660621709000,
"CH1",
{
avType: undefined,
endTime: 1660621709000,
endTimeFormat: "2022-08-16 11:48:29",
ftpServerId: undefined,
logicalChannel: 1,
startTime: 1660621636000,
startTimeFormat: "2022-08-16 11:47:16",
storeType: 1,
streamType: 1,
},
1]
}
]
let listData = [
['2022-08-16 10:30:00', 8],
['2022-08-16 10:50:00', 9],
['2022-08-16 11:30:00', 8],
['2022-08-16 11:50:00', 9],
['2022-08-16 12:30:00', 8],
];
let title = '2022-08-16';
let option = {
tooltip: {
show: true,
trigger: 'item',
position: function (p) {
return [p[0] + 10, p[1] - 10];
},
formatter: function (params) {
if (params.name != null) {
return params.name + ":" + formatDateStartTime;
} else {
return "";
}
},
},
dataZoom: [{
zoomLock: true,
type: 'inside',
xAxisIndex: 0,
filterMode: 'weakFilter'
}],
grid: {
height: 150,
show: true,
borderColor: '#cdc1c1',
borderWidth: 0.5,
left: '3%',
bottom: '2%',
top: '2%',
right: '1%'
},
xAxis: {
type: 'time',
min: new Date(title + " 00:00:00").getTime(),
max: new Date(title + " 23:59:59").getTime(),
scale: true,
axisLabel: {
formatter: function (value) {
return dateFtt("hh:mm:ss", new Date(value))
},
},
show: true,
splitLine: {
show: true,
lineStyle: {
color: '#cdc1c1',
width: 0.5,
type: 'dashed',
},
},
axisPointer: {
type: 'line',
axis: 'x',
show: true,
triggerTooltip: true,
lineStyle: {
type: 'solid',
color: '#cdc1c1',
width: 0.5
},
label: {
show: true,
formatter: function (params) {
//console.log(dateFtt("hh:mm:ss", new Date(params.value)))
formatDateStartTime = title + ' ' + dateFtt("hh:mm:ss", new Date(params.value))
formatDateEndTime = title + ' ' + dateFtt("hh:mm:ss", new Date('23:59:59'))
let val = parseInt(params.value)
if (val > 0) {
return dateFtt("hh:mm:ss", new Date(val))
}
},
backgroundColor: '#991028',
color: '#fff',
},
z: 5
},
},
yAxis: {
data: mGroup,
show: true,
splitLine: {
show: true,
lineStyle: {
color: '#A0A0A0',
width: 2,
},
},
},
series: [
{
type: 'custom',
renderItem: renderItem,
encode: {
y: 0
},
data: dataList
},
{
data: listData,
type: 'line',
step: 'end',
// step: 'start',
itemStyle: {
normal: {
color: 'rgb(211, 202, 202)', //改变折线点的颜色
lineStyle: {
color: 'rgb(158, 153, 153)' //改变折线颜色
}
}
}
}
]
};
myChart.setOption(option);
function dateFtt(fmt, date) { //author: meizz
var o = {
"M+": date.getMonth() + 1, //月份
"d+": date.getDate(), //日
"h+": date.getHours(), //小时
"m+": date.getMinutes(), //分
"s+": date.getSeconds(), //秒
"q+": Math.floor((date.getMonth() + 3) / 3), //季度
"S": date.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt))
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
function renderItem(params, api) {
var categoryIndex = api.value(0);
var start = api.coord([api.value(1), categoryIndex]);
var end = api.coord([api.value(2), categoryIndex]);
var height = api.size([0, 1])[1] - 2.2;
var rectShape = echarts.graphic.clipRectByRect(
{
x: start[0],
y: start[1] - height / 2,
width: end[0] - start[0] + 1,
height: height
},
{
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
}
);
return (
rectShape && {
type: 'rect',
transition: ['shape'],
shape: rectShape,
style: api.style()
}
);
}
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/echarts.min.js"></script>
</head>
<body>
<div id="main2" style="width: 100%;height:200px;"></div>
<div id="main" style="width: 100%;height:400px; margin-top: 20px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var myChart2 = echarts.init(document.getElementById('main2'));
var formatDateStartTime = '';
var formatDateEndTime = '';
let mGroup = [ "CH8", "CH7", "CH6", "CH5", "CH4", "CH3", "CH2", "CH1"];
let dataList = [
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH8",
value: [0, 1660579200000, 1660586404000, "CH8", {
avType: undefined,
endTime: 1660586404000,
endTimeFormat: "2022-08-16 02:00:04",
ftpServerId: undefined,
logicalChannel: 8,
startTime: 1660579200000,
startTimeFormat: "2022-08-16 00:00:00",
storeType: 1,
streamType: 1
}, 8]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH8",
value:
[0,
1660586472000,
1660587706000,
"CH8",
{
avType: undefined,
endTime: 1660587706000,
endTimeFormat: "2022-08-16 02:21:41",
ftpServerId: undefined,
logicalChannel: 8,
startTime: 1660586472000,
startTimeFormat: "2022-08-16 02:01:12",
storeType: 1,
streamType: 1
},
8]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH8",
value:
[0,
1660587701000,
1660596415000,
"CH8",
{
avType: undefined,
endTime: 1660596415000,
endTimeFormat: "2022-08-16 04:{46:50",
ftpServerId: undefined,
logicalChannel: 8,
startTime: 1660587701000,
startTimeFormat: "2022-08-16 02:21:41",
storeType: 1,
streamType: 1
},
8]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH8",
value:
[0,
1660596410000,
1660605118000,
"CH8",
{
avType: undefined,
endTime: 1660605118000,
endTimeFormat: "2022-08-16 07:11:53",
ftpServerId: undefined,
logicalChannel: 8,
startTime: 1660596410000,
startTimeFormat: "2022-08-16 04:{46:50",
storeType: 1,
streamType: 1
},
8]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH8",
value:
[0,
1660605113000,
1660613817000,
"CH8",
{
avType: undefined,
endTime: 1660613817000,
endTimeFormat: "2022-08-16 09:36:52",
ftpServerId: undefined,
logicalChannel: 8,
startTime: 1660605113000,
startTimeFormat: "2022-08-16 07:11:53",
storeType: 1,
streamType: 1
},
8]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH8",
value:
[0,
1660613812000,
1660621708000,
"CH8",
{
avType: undefined,
endTime: 1660621708000,
endTimeFormat: "2022-08-16 11:48:28",
ftpServerId: undefined,
logicalChannel: 8,
startTime: 1660613812000,
startTimeFormat: "2022-08-16 09:36:52",
storeType: 1,
streamType: 1
},
8]
}
,
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH7",
value:
[1,
1660579200000,
1660586404000,
"CH7",
{
avType: undefined,
endTime: 1660586404000,
endTimeFormat: "2022-08-16 02:00:04",
ftpServerId: undefined,
logicalChannel: 7,
startTime: 1660579200000,
startTimeFormat: "2022-08-16 00:00:00",
storeType: 1,
streamType: 1
},
7]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH7",
value:
[1,
1660586472000,
1660587959000,
"CH7",
{
avType: undefined,
endTime: 1660587959000,
endTimeFormat: "2022-08-16 02:25:54",
ftpServerId: undefined,
logicalChannel: 7,
startTime: 1660586472000,
startTimeFormat: "2022-08-16 02:01:12",
storeType: 1,
streamType: 1
},
7]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH7",
value:
[1,
1660587954000,
1660596681000,
"CH7",
{
avType: undefined,
endTime: 1660596681000,
endTimeFormat: "2022-08-16 04:{51:16",
ftpServerId: undefined,
logicalChannel: 7,
startTime: 1660587954000,
startTimeFormat: "2022-08-16 02:25:54",
storeType: 1,
streamType: 1
},
7]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH7",
value:
[1,
1660596676000,
1660605383000,
"CH7",
{
avType: undefined,
endTime: 1660605383000,
endTimeFormat: "2022-08-16 07:16:18",
ftpServerId: undefined,
logicalChannel: 7,
startTime: 1660596676000,
startTimeFormat: "2022-08-16 04:{51:16",
storeType: 1,
streamType: 1
},
7]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH7",
value:
[1,
1660605378000,
1660614081000,
"CH7",
{
avType: undefined,
endTime: 1660614081000,
endTimeFormat: "2022-08-16 09:41:16",
ftpServerId: undefined,
logicalChannel: 7,
startTime: 1660605378000,
startTimeFormat: "2022-08-16 07:16:18",
storeType: 1,
streamType: 1
},
7]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH7",
value:
[1,
1660614076000,
1660621710000,
"CH7",
{
avType: undefined,
endTime: 1660621710000,
endTimeFormat: "2022-08-16 11:48:30",
ftpServerId: undefined,
logicalChannel: 7,
startTime: 1660614076000,
startTimeFormat: "2022-08-16 09:41:16",
storeType: 1,
streamType: 1
},
7]
}
,
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH6",
value:
[2,
1660579200000,
1660585208000,
"CH6",
{
avType: undefined,
endTime: 1660585208000,
endTimeFormat: "2022-08-16 01:40:03",
ftpServerId: undefined,
logicalChannel: 6,
startTime: 1660579200000,
startTimeFormat: "2022-08-16 00:00:00",
storeType: 1,
streamType: 1
},
6]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH6",
value:
[2,
1660585203000,
1660586404000,
"CH6",
{
avType: undefined,
endTime: 1660586404000,
endTimeFormat: "2022-08-16 02:00:04",
ftpServerId: undefined,
logicalChannel: 6,
startTime: 1660585203000,
startTimeFormat: "2022-08-16 01:40:03",
storeType: 1,
streamType: 1
},
6]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH6",
value:
[2,
1660586472000,
1660591589000,
"CH6",
{
avType: undefined,
endTime: 1660591589000,
endTimeFormat: "2022-08-16 03:26:24",
ftpServerId: undefined,
logicalChannel: 6,
startTime: 1660586472000,
startTimeFormat: "2022-08-16 02:01:12",
storeType: 1,
streamType: 1
},
6]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH6",
value:
[2,
1660591584000,
1660597886000,
"CH6",
{
avType: undefined,
endTime: 1660597886000,
endTimeFormat: "2022-08-16 05:11:21",
ftpServerId: undefined,
logicalChannel: 6,
startTime: 1660591584000,
startTimeFormat: "2022-08-16 03:26:24",
storeType: 1,
streamType: 1,
},
6]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH6",
value:
[2,
1660597881000,
1660604186000,
"CH6",
{
avType: undefined,
endTime: 1660604186000,
endTimeFormat: "2022-08-16 06:56:21",
ftpServerId: undefined,
logicalChannel: 6,
startTime: 1660597881000,
startTimeFormat: "2022-08-16 05:11:21",
storeType: 1,
streamType: 1
},
6]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH6",
value:
[2,
1660604181000,
1660610484000,
"CH6",
{
avType: undefined,
endTime: 1660610484000,
endTimeFormat: "2022-08-16 08:41:19",
ftpServerId: undefined,
logicalChannel: 6,
startTime: 1660604181000,
startTimeFormat: "2022-08-16 06:56:21",
storeType: 1,
streamType: 1
},
6]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH6",
value:
[2,
1660610479000,
1660616788000,
"CH6",
{
avType: undefined,
endTime: 1660616788000,
endTimeFormat: "2022-08-16 10:26:23",
ftpServerId: undefined,
logicalChannel: 6,
startTime: 1660610479000,
startTimeFormat: "2022-08-16 08:41:19",
storeType: 1,
streamType: 1
},
6]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH6",
value:
[2,
1660616783000,
1660621715000,
"CH6",
{
avType: undefined,
endTime: 1660621715000,
endTimeFormat: "2022-08-16 11:48:35",
ftpServerId: undefined,
logicalChannel: 6,
startTime: 1660616783000,
startTimeFormat: "2022-08-16 10:26:23",
storeType: 1,
streamType: 1
},
6]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH5",
value:
[3,
1660579200000,
1660586404000,
"CH5",
{
avType: undefined,
endTime: 1660586404000,
endTimeFormat: "2022-08-16 02:00:04",
ftpServerId: undefined,
logicalChannel: 5,
startTime: 1660579200000,
startTimeFormat: "2022-08-16 00:00:00",
storeType: 1,
streamType: 1
},
5]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH5",
value:
[3,
1660586472000,
1660586573000,
"CH5",
{
avType: undefined,
endTime: 1660586573000,
endTimeFormat: "2022-08-16 02:02:48",
ftpServerId: undefined,
logicalChannel: 5,
startTime: 1660586472000,
startTimeFormat: "2022-08-16 02:01:12",
storeType: 1,
streamType: 1
},
5]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH5",
value:
[3,
1660586568000,
1660595245000,
"CH5",
{
avType: undefined,
endTime: 1660595245000,
endTimeFormat: "2022-08-16 04:27:20",
ftpServerId: undefined,
logicalChannel: 5,
startTime: 1660586568000,
startTimeFormat: "2022-08-16 02:02:48",
storeType: 1,
streamType: 1
},
5]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH5",
value:
[3,
1660595240000,
1660603916000,
"CH5",
{
avType: undefined,
endTime: 1660603916000,
endTimeFormat: "2022-08-16 06:51:51",
ftpServerId: undefined,
logicalChannel: 5,
startTime: 1660595240000,
startTimeFormat: "2022-08-16 04:27:20",
storeType: 1,
streamType: 1
},
5]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH5",
value:
[3,
1660603911000,
1660612601000,
"CH5",
{
avType: undefined,
endTime: 1660612601000,
endTimeFormat: "2022-08-16 09:16:36",
ftpServerId: undefined,
logicalChannel: 5,
startTime: 1660603911000,
startTimeFormat: "2022-08-16 06:51:51",
storeType: 1,
streamType: 1
},
5]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH5",
value:
[3,
1660612596000,
1660621314000,
"CH5",
{
avType: undefined,
endTime: 1660621314000,
endTimeFormat: "2022-08-16 11:41:49",
ftpServerId: undefined,
logicalChannel: 5,
startTime: 1660612596000,
startTimeFormat: "2022-08-16 09:16:36",
storeType: 1,
streamType: 1
},
5]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH5",
value:
[3,
1660621309000,
1660621709000,
"CH5",
{
avType: undefined,
endTime: 1660621709000,
endTimeFormat: "2022-08-16 11:48:29",
ftpServerId: undefined,
logicalChannel: 5,
startTime: 1660621309000,
startTimeFormat: "2022-08-16 11:41:49",
storeType: 1,
streamType: 1,
}, 5]
}
,
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH4",
value:
[4,
1660579200000,
1660586404000,
"CH4",
{
avType: undefined,
endTime: 1660586404000,
endTimeFormat: "2022-08-16 02:00:04",
ftpServerId: undefined,
logicalChannel: 4,
startTime: 1660579200000,
startTimeFormat: "2022-08-16 00:00:00",
storeType: 1,
streamType: 1,
},
4]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH4",
value:
[4,
1660586472000,
1660586562000,
"CH4",
{
avType: undefined,
endTime: 1660586562000,
endTimeFormat: "2022-08-16 02:02:37",
ftpServerId: undefined,
logicalChannel: 4,
startTime: 1660586472000,
startTimeFormat: "2022-08-16 02:01:12",
storeType: 1,
streamType: 1
}, 4]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH4",
value:
[4,
1660586557000,
1660595224000,
"CH4",
{
avType: undefined,
endTime: 1660595224000,
endTimeFormat: "2022-08-16 04:26:59",
ftpServerId: undefined,
logicalChannel: 4,
startTime: 1660586557000,
startTimeFormat: "2022-08-16 02:02:37",
storeType: 1,
streamType: 1
},
4]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH4",
value:
[4,
1660595219000,
1660603898000,
"CH4",
{
avType: undefined,
endTime: 1660603898000,
endTimeFormat: "2022-08-16 06:51:33",
ftpServerId: undefined,
logicalChannel: 4,
startTime: 1660595219000,
startTimeFormat: "2022-08-16 04:26:59",
storeType: 1,
streamType: 1
},
4]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH4",
value:
[4,
1660603893000,
1660612566000,
"CH4",
{
avType: undefined,
endTime: 1660612566000,
endTimeFormat: "2022-08-16 09:16:01",
ftpServerId: undefined,
logicalChannel: 4,
startTime: 1660603893000,
startTimeFormat: "2022-08-16 06:51:33",
storeType: 1,
streamType: 1
},
4]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH4",
value:
[4,
1660612561000,
1660621277000,
"CH4",
{
avType: undefined,
endTime: 1660621277000,
endTimeFormat: "2022-08-16 11:41:12",
ftpServerId: undefined,
logicalChannel: 4,
startTime: 1660612561000,
startTimeFormat: "2022-08-16 09:16:01",
storeType: 1,
streamType: 1
},
4]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH4",
value:
[4,
1660621272000,
1660621712000,
"CH4",
{
avType: undefined,
endTime: 1660621712000,
endTimeFormat: "2022-08-16 11:48:32",
ftpServerId: undefined,
logicalChannel: 4,
startTime: 1660621272000,
startTimeFormat: "2022-08-16 11:41:12",
storeType: 1,
streamType: 1,
},
4]
}
,
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH3",
value:
[5,
1660579200000,
1660586404000,
"CH3",
{
avType: undefined,
endTime: 1660586404000,
endTimeFormat: "2022-08-16 02:00:04",
ftpServerId: undefined,
logicalChannel: 3,
startTime: 1660579200000,
startTimeFormat: "2022-08-16 00:00:00",
storeType: 1,
streamType: 1,
},
3]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH3",
value:
[5,
1660586472000,
1660586682000,
"CH3",
{
avType: undefined,
endTime: 1660586682000,
endTimeFormat: "2022-08-16 02:04:37",
ftpServerId: undefined,
logicalChannel: 3,
startTime: 1660586472000,
startTimeFormat: "2022-08-16 02:01:12",
storeType: 1,
streamType: 1,
},
3]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH3",
value:
[5,
1660586677000,
1660595379000,
"CH3",
{
avType: undefined,
endTime: 1660595379000,
endTimeFormat: "2022-08-16 04:29:34",
ftpServerId: undefined,
logicalChannel: 3,
startTime: 1660586677000,
startTimeFormat: "2022-08-16 02:04:37",
storeType: 1,
streamType: 1,
},
3]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH3",
value:
[5,
1660595374000,
1660604062000,
"CH3",
{
avType: undefined,
endTime: 1660604062000,
endTimeFormat: "2022-08-16 06:54:17",
ftpServerId: undefined,
logicalChannel: 3,
startTime: 1660595374000,
startTimeFormat: "2022-08-16 04:29:34",
storeType: 1,
streamType: 1,
},
3]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH3",
value:
[5,
1660604057000,
1660612735000,
"CH3",
{
avType: undefined,
endTime: 1660612735000,
endTimeFormat: "2022-08-16 09:18:50",
ftpServerId: undefined,
logicalChannel: 3,
startTime: 1660604057000,
startTimeFormat: "2022-08-16 06:54:17",
storeType: 1,
streamType: 1,
},
3]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH3",
value:
[5,
1660612730000,
1660621474000,
"CH3",
{
avType: undefined,
endTime: 1660621474000,
endTimeFormat: "2022-08-16 11:44:29",
ftpServerId: undefined,
logicalChannel: 3,
startTime: 1660612730000,
startTimeFormat: "2022-08-16 09:18:50",
storeType: 1,
streamType: 1,
},
3]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH3",
value:
[5,
1660621469000,
1660621709000,
"CH3",
{
avType: undefined,
endTime: 1660621709000,
endTimeFormat: "2022-08-16 11:48:29",
ftpServerId: undefined,
logicalChannel: 3,
startTime: 1660621469000,
startTimeFormat: "2022-08-16 11:44:29",
storeType: 1,
streamType: 1,
},
3]
}
,
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH2",
value:
[6,
1660579200000,
1660586404000,
"CH2",
{
avType: undefined,
endTime: 1660586404000,
endTimeFormat: "2022-08-16 02:00:04",
ftpServerId: undefined,
logicalChannel: 2,
startTime: 1660579200000,
startTimeFormat: "2022-08-16 00:00:00",
storeType: 1,
streamType: 1,
},
2]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH2",
value:
[6,
1660586472000,
1660586732000,
"CH2",
{
avType: undefined,
endTime: 1660586732000,
endTimeFormat: "2022-08-16 02:05:27",
ftpServerId: undefined,
logicalChannel: 2,
startTime: 1660586472000,
startTimeFormat: "2022-08-16 02:01:12",
storeType: 1,
streamType: 1,
},
2]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH2",
value:
[6,
1660586727000,
1660595417000,
"CH2",
{
avType: undefined,
endTime: 1660595417000,
endTimeFormat: "2022-08-16 04:30:12",
ftpServerId: undefined,
logicalChannel: 2,
startTime: 1660586727000,
startTimeFormat: "2022-08-16 02:05:27",
storeType: 1,
streamType: 1,
},
2]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH2",
value:
[6,
1660595412000,
1660604097000,
"CH2",
{
avType: undefined,
endTime: 1660604097000,
endTimeFormat: "2022-08-16 06:54:52",
ftpServerId: undefined,
logicalChannel: 2,
startTime: 1660595412000,
startTimeFormat: "2022-08-16 04:30:12",
storeType: 1,
streamType: 1,
},
2]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH2",
value:
[6,
1660604092000,
1660612778000,
"CH2",
{
avType: undefined,
endTime: 1660612778000,
endTimeFormat: "2022-08-16 09:19:33",
ftpServerId: undefined,
logicalChannel: 2,
startTime: 1660604092000,
startTimeFormat: "2022-08-16 06:54:52",
storeType: 1,
streamType: 1,
},
2]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH2",
value:
[6,
1660612773000,
1660621520000,
"CH2",
{
avType: undefined,
endTime: 1660621520000,
endTimeFormat: "2022-08-16 11:45:15",
ftpServerId: undefined,
logicalChannel: 2,
startTime: 1660612773000,
startTimeFormat: "2022-08-16 09:19:33",
storeType: 1,
streamType: 1,
},
2]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH2",
value:
[6,
1660621515000,
1660621710000,
"CH2",
{
avType: undefined,
endTime: 1660621710000,
endTimeFormat: "2022-08-16 11:48:30",
ftpServerId: undefined,
logicalChannel: 2,
startTime: 1660621515000,
startTimeFormat: "2022-08-16 11:45:15",
storeType: 1,
streamType: 1,
},
2]
}
,
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH1",
value:
[7,
1660579200000,
1660586404000,
"CH1",
{
avType: undefined,
endTime: 1660586404000,
endTimeFormat: "2022-08-16 02:00:04",
ftpServerId: undefined,
logicalChannel: 1,
startTime: 1660579200000,
startTimeFormat: "2022-08-16 00:00:00",
storeType: 1,
streamType: 1,
},
1]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH1",
value:
[7,
1660586472000,
1660586867000,
"CH1",
{
avType: undefined,
endTime: 1660586867000,
endTimeFormat: "2022-08-16 02:07:42",
ftpServerId: undefined,
logicalChannel: 1,
startTime: 1660586472000,
startTimeFormat: "2022-08-16 02:01:12",
storeType: 1,
streamType: 1,
},
1]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH1",
value:
[7,
1660586862000,
1660595540000,
"CH1",
{
avType: undefined,
endTime: 1660595540000,
endTimeFormat: "2022-08-16 04:{32:15",
ftpServerId: undefined,
logicalChannel: 1,
startTime: 1660586862000,
startTimeFormat: "2022-08-16 02:07:42",
storeType: 1,
streamType: 1,
},
1]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH1",
value:
[7,
1660595535000,
1660604222000,
"CH1",
{
avType: undefined,
endTime: 1660604222000,
endTimeFormat: "2022-08-16 06:56:57",
ftpServerId: undefined,
logicalChannel: 1,
startTime: 1660595535000,
startTimeFormat: "2022-08-16 04:32:15",
storeType: 1,
streamType: 1,
},
1]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH1",
value:
[7,
1660604217000,
1660612898000,
"CH1",
{
avType: undefined,
endTime: 1660612898000,
endTimeFormat: "2022-08-16 09:21:33",
ftpServerId: undefined,
logicalChannel: 1,
startTime: 1660604217000,
startTimeFormat: "2022-08-16 06:56:57",
storeType: 1,
streamType: 1,
},
1]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH1",
value:
[7,
1660612893000,
1660621641000,
"CH1",
{
avType: undefined,
endTime: 1660621641000,
endTimeFormat: "2022-08-16 11:47:16",
ftpServerId: undefined,
logicalChannel: 1,
startTime: 1660612893000,
startTimeFormat: "2022-08-16 09:21:33",
storeType: 1,
streamType: 1,
},
1]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH1",
value:
[7,
1660621636000,
1660621709000,
"CH1",
{
avType: undefined,
endTime: 1660621709000,
endTimeFormat: "2022-08-16 11:48:29",
ftpServerId: undefined,
logicalChannel: 1,
startTime: 1660621636000,
startTimeFormat: "2022-08-16 11:47:16",
storeType: 1,
streamType: 1,
},
1]
}
]
let listData = [
['2022-08-16 10:30:00', 0],
['2022-08-16 10:50:00', 1],
['2022-08-16 11:30:00', 0],
['2022-08-16 11:50:00', 1],
['2022-08-16 12:30:00', 0],
];
let title = '2022-08-16';
let option = {
tooltip: {
show: true,
trigger: 'item',
position: function (p) {
return [p[0] + 10, p[1] - 10];
},
formatter: function (params) {
if (params.name != null) {
return params.name + ":" + formatDateStartTime;
} else {
return "";
}
},
},
dataZoom: [{
zoomLock: true,
type: 'inside',
xAxisIndex: 0,
filterMode: 'weakFilter'
}],
grid: {
height: 150,
show: true,
borderColor: '#cdc1c1',
borderWidth: 0.5,
left: '3%',
bottom: '2%',
top: '2%',
right: '1%'
},
xAxis: {
type: 'time',
min: new Date(title + " 00:00:00").getTime(),
max: new Date(title + " 23:59:59").getTime(),
scale: true,
axisLabel: {
formatter: function (value) {
return dateFtt("hh:mm:ss", new Date(value))
},
},
show: true,
splitLine: {
show: true,
lineStyle: {
color: '#cdc1c1',
width: 0.5,
type: 'dashed',
},
},
axisPointer: {
type: 'line',
axis: 'x',
show: true,
triggerTooltip: true,
lineStyle: {
type: 'solid',
color: '#cdc1c1',
width: 0.5
},
label: {
show: true,
formatter: function (params) {
//console.log(dateFtt("hh:mm:ss", new Date(params.value)))
formatDateStartTime = title + ' ' + dateFtt("hh:mm:ss", new Date(params.value))
formatDateEndTime = title + ' ' + dateFtt("hh:mm:ss", new Date('23:59:59'))
let val = parseInt(params.value)
if (val > 0) {
return dateFtt("hh:mm:ss", new Date(val))
}
},
backgroundColor: '#991028',
color: '#fff',
},
z: 5
},
},
yAxis: {
data: mGroup,
show: true,
splitLine: {
show: true,
lineStyle: {
color: '#A0A0A0',
width: 2,
},
},
},
series: [
{
type: 'custom',
renderItem: renderItem,
//itemStyle: {
// opacity: 0.8
// },
encode: {
/*x: [1, 2],*/
y: 0
},
data: dataList
},
]
};
let option2 = {
tooltip: {
show: true,
trigger: 'item',
position: function (p) {
return [p[0] + 10, p[1] - 10];
},
formatter: function (params) {
if (params.name != null) {
return params.name + ":" + formatDateStartTime;
} else {
return "";
}
},
},
dataZoom: [{
zoomLock: true,
type: 'inside',
xAxisIndex: 0,
filterMode: 'weakFilter'
}],
grid: {
height: 150,
show: true,
borderColor: '#cdc1c1',
borderWidth: 0.5,
left: '3%',
bottom: '2%',
top: '2%',
right: '1%'
},
xAxis: {
type: 'time',
min: new Date(title + " 00:00:00").getTime(),
max: new Date(title + " 23:59:59").getTime(),
scale: true,
axisLabel: {
formatter: function (value) {
return dateFtt("hh:mm:ss", new Date(value))
},
},
show: true,
splitLine: {
show: true,
lineStyle: {
color: '#cdc1c1',
width: 0.5,
type: 'dashed',
},
},
axisPointer: {
type: 'line',
axis: 'x',
show: true,
triggerTooltip: true,
lineStyle: {
type: 'solid',
color: '#cdc1c1',
width: 0.5
},
label: {
show: true,
formatter: function (params) {
//console.log(dateFtt("hh:mm:ss", new Date(params.value)))
formatDateStartTime = title + ' ' + dateFtt("hh:mm:ss", new Date(params.value))
formatDateEndTime = title + ' ' + dateFtt("hh:mm:ss", new Date('23:59:59'))
let val = parseInt(params.value)
if (val > 0) {
return dateFtt("hh:mm:ss", new Date(val))
}
},
backgroundColor: '#991028',
color: '#fff',
},
z: 5
},
},
yAxis: {
type: 'value',
axisLabel: {
formatter: ''
}
},
series: [
{
data: listData,
type: 'line',
step: 'start',
itemStyle: {
normal: {
color: '#8cd5c2', //改变折线点的颜色
lineStyle: {
color: '#f00' //改变折线颜色
}
}
}
}
]
};
myChart.setOption(option);
myChart2.setOption(option2);
function dateFtt(fmt, date) { //author: meizz
var o = {
"M+": date.getMonth() + 1, //月份
"d+": date.getDate(), //日
"h+": date.getHours(), //小时
"m+": date.getMinutes(), //分
"s+": date.getSeconds(), //秒
"q+": Math.floor((date.getMonth() + 3) / 3), //季度
"S": date.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt))
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
function renderItem(params, api) {
var categoryIndex = api.value(0);
var start = api.coord([api.value(1), categoryIndex]);
var end = api.coord([api.value(2), categoryIndex]);
var height = api.size([0, 1])[1] - 2.2;
var rectShape = echarts.graphic.clipRectByRect(
{
x: start[0],
y: start[1] - height / 2,
width: end[0] - start[0] + 1,
height: height
},
{
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
}
);
return (
rectShape && {
type: 'rect',
transition: ['shape'],
shape: rectShape,
style: api.style()
}
);
}
</script>
</html>top 5:完结版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>完结版</title>
<script src="js/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 100%;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var formatDateStartTime = '';
var formatDateEndTime = '';
let mGroup = ["CH8", "CH7", "CH6", "CH5", "CH4", "CH3", "CH2", "CH1", ''];
let dataList = [
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH8",
value: [0, 1660579200000, 1660586404000, "CH8", {
avType: undefined,
endTime: 1660586404000,
endTimeFormat: "2022-08-16 02:00:04",
ftpServerId: undefined,
logicalChannel: 8,
startTime: 1660579200000,
startTimeFormat: "2022-08-16 00:00:00",
storeType: 1,
streamType: 1
}, 8]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH8",
value:
[0,
1660586472000,
1660587706000,
"CH8",
{
avType: undefined,
endTime: 1660587706000,
endTimeFormat: "2022-08-16 02:21:41",
ftpServerId: undefined,
logicalChannel: 8,
startTime: 1660586472000,
startTimeFormat: "2022-08-16 02:01:12",
storeType: 1,
streamType: 1
},
8]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH8",
value:
[0,
1660587701000,
1660596415000,
"CH8",
{
avType: undefined,
endTime: 1660596415000,
endTimeFormat: "2022-08-16 04:{46:50",
ftpServerId: undefined,
logicalChannel: 8,
startTime: 1660587701000,
startTimeFormat: "2022-08-16 02:21:41",
storeType: 1,
streamType: 1
},
8]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH8",
value:
[0,
1660596410000,
1660605118000,
"CH8",
{
avType: undefined,
endTime: 1660605118000,
endTimeFormat: "2022-08-16 07:11:53",
ftpServerId: undefined,
logicalChannel: 8,
startTime: 1660596410000,
startTimeFormat: "2022-08-16 04:{46:50",
storeType: 1,
streamType: 1
},
8]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH8",
value:
[0,
1660605113000,
1660613817000,
"CH8",
{
avType: undefined,
endTime: 1660613817000,
endTimeFormat: "2022-08-16 09:36:52",
ftpServerId: undefined,
logicalChannel: 8,
startTime: 1660605113000,
startTimeFormat: "2022-08-16 07:11:53",
storeType: 1,
streamType: 1
},
8]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH8",
value:
[0,
1660613812000,
1660621708000,
"CH8",
{
avType: undefined,
endTime: 1660621708000,
endTimeFormat: "2022-08-16 11:48:28",
ftpServerId: undefined,
logicalChannel: 8,
startTime: 1660613812000,
startTimeFormat: "2022-08-16 09:36:52",
storeType: 1,
streamType: 1
},
8]
}
,
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH7",
value:
[1,
1660579200000,
1660586404000,
"CH7",
{
avType: undefined,
endTime: 1660586404000,
endTimeFormat: "2022-08-16 02:00:04",
ftpServerId: undefined,
logicalChannel: 7,
startTime: 1660579200000,
startTimeFormat: "2022-08-16 00:00:00",
storeType: 1,
streamType: 1
},
7]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH7",
value:
[1,
1660586472000,
1660587959000,
"CH7",
{
avType: undefined,
endTime: 1660587959000,
endTimeFormat: "2022-08-16 02:25:54",
ftpServerId: undefined,
logicalChannel: 7,
startTime: 1660586472000,
startTimeFormat: "2022-08-16 02:01:12",
storeType: 1,
streamType: 1
},
7]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH7",
value:
[1,
1660587954000,
1660596681000,
"CH7",
{
avType: undefined,
endTime: 1660596681000,
endTimeFormat: "2022-08-16 04:{51:16",
ftpServerId: undefined,
logicalChannel: 7,
startTime: 1660587954000,
startTimeFormat: "2022-08-16 02:25:54",
storeType: 1,
streamType: 1
},
7]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH7",
value:
[1,
1660596676000,
1660605383000,
"CH7",
{
avType: undefined,
endTime: 1660605383000,
endTimeFormat: "2022-08-16 07:16:18",
ftpServerId: undefined,
logicalChannel: 7,
startTime: 1660596676000,
startTimeFormat: "2022-08-16 04:{51:16",
storeType: 1,
streamType: 1
},
7]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH7",
value:
[1,
1660605378000,
1660614081000,
"CH7",
{
avType: undefined,
endTime: 1660614081000,
endTimeFormat: "2022-08-16 09:41:16",
ftpServerId: undefined,
logicalChannel: 7,
startTime: 1660605378000,
startTimeFormat: "2022-08-16 07:16:18",
storeType: 1,
streamType: 1
},
7]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH7",
value:
[1,
1660614076000,
1660621710000,
"CH7",
{
avType: undefined,
endTime: 1660621710000,
endTimeFormat: "2022-08-16 11:48:30",
ftpServerId: undefined,
logicalChannel: 7,
startTime: 1660614076000,
startTimeFormat: "2022-08-16 09:41:16",
storeType: 1,
streamType: 1
},
7]
}
,
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH6",
value:
[2,
1660579200000,
1660585208000,
"CH6",
{
avType: undefined,
endTime: 1660585208000,
endTimeFormat: "2022-08-16 01:40:03",
ftpServerId: undefined,
logicalChannel: 6,
startTime: 1660579200000,
startTimeFormat: "2022-08-16 00:00:00",
storeType: 1,
streamType: 1
},
6]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH6",
value:
[2,
1660585203000,
1660586404000,
"CH6",
{
avType: undefined,
endTime: 1660586404000,
endTimeFormat: "2022-08-16 02:00:04",
ftpServerId: undefined,
logicalChannel: 6,
startTime: 1660585203000,
startTimeFormat: "2022-08-16 01:40:03",
storeType: 1,
streamType: 1
},
6]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH6",
value:
[2,
1660586472000,
1660591589000,
"CH6",
{
avType: undefined,
endTime: 1660591589000,
endTimeFormat: "2022-08-16 03:26:24",
ftpServerId: undefined,
logicalChannel: 6,
startTime: 1660586472000,
startTimeFormat: "2022-08-16 02:01:12",
storeType: 1,
streamType: 1
},
6]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH6",
value:
[2,
1660591584000,
1660597886000,
"CH6",
{
avType: undefined,
endTime: 1660597886000,
endTimeFormat: "2022-08-16 05:11:21",
ftpServerId: undefined,
logicalChannel: 6,
startTime: 1660591584000,
startTimeFormat: "2022-08-16 03:26:24",
storeType: 1,
streamType: 1,
},
6]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH6",
value:
[2,
1660597881000,
1660604186000,
"CH6",
{
avType: undefined,
endTime: 1660604186000,
endTimeFormat: "2022-08-16 06:56:21",
ftpServerId: undefined,
logicalChannel: 6,
startTime: 1660597881000,
startTimeFormat: "2022-08-16 05:11:21",
storeType: 1,
streamType: 1
},
6]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH6",
value:
[2,
1660604181000,
1660610484000,
"CH6",
{
avType: undefined,
endTime: 1660610484000,
endTimeFormat: "2022-08-16 08:41:19",
ftpServerId: undefined,
logicalChannel: 6,
startTime: 1660604181000,
startTimeFormat: "2022-08-16 06:56:21",
storeType: 1,
streamType: 1
},
6]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH6",
value:
[2,
1660610479000,
1660616788000,
"CH6",
{
avType: undefined,
endTime: 1660616788000,
endTimeFormat: "2022-08-16 10:26:23",
ftpServerId: undefined,
logicalChannel: 6,
startTime: 1660610479000,
startTimeFormat: "2022-08-16 08:41:19",
storeType: 1,
streamType: 1
},
6]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH6",
value:
[2,
1660616783000,
1660621715000,
"CH6",
{
avType: undefined,
endTime: 1660621715000,
endTimeFormat: "2022-08-16 11:48:35",
ftpServerId: undefined,
logicalChannel: 6,
startTime: 1660616783000,
startTimeFormat: "2022-08-16 10:26:23",
storeType: 1,
streamType: 1
},
6]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH5",
value:
[3,
1660579200000,
1660586404000,
"CH5",
{
avType: undefined,
endTime: 1660586404000,
endTimeFormat: "2022-08-16 02:00:04",
ftpServerId: undefined,
logicalChannel: 5,
startTime: 1660579200000,
startTimeFormat: "2022-08-16 00:00:00",
storeType: 1,
streamType: 1
},
5]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH5",
value:
[3,
1660586472000,
1660586573000,
"CH5",
{
avType: undefined,
endTime: 1660586573000,
endTimeFormat: "2022-08-16 02:02:48",
ftpServerId: undefined,
logicalChannel: 5,
startTime: 1660586472000,
startTimeFormat: "2022-08-16 02:01:12",
storeType: 1,
streamType: 1
},
5]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH5",
value:
[3,
1660586568000,
1660595245000,
"CH5",
{
avType: undefined,
endTime: 1660595245000,
endTimeFormat: "2022-08-16 04:27:20",
ftpServerId: undefined,
logicalChannel: 5,
startTime: 1660586568000,
startTimeFormat: "2022-08-16 02:02:48",
storeType: 1,
streamType: 1
},
5]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH5",
value:
[3,
1660595240000,
1660603916000,
"CH5",
{
avType: undefined,
endTime: 1660603916000,
endTimeFormat: "2022-08-16 06:51:51",
ftpServerId: undefined,
logicalChannel: 5,
startTime: 1660595240000,
startTimeFormat: "2022-08-16 04:27:20",
storeType: 1,
streamType: 1
},
5]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH5",
value:
[3,
1660603911000,
1660612601000,
"CH5",
{
avType: undefined,
endTime: 1660612601000,
endTimeFormat: "2022-08-16 09:16:36",
ftpServerId: undefined,
logicalChannel: 5,
startTime: 1660603911000,
startTimeFormat: "2022-08-16 06:51:51",
storeType: 1,
streamType: 1
},
5]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH5",
value:
[3,
1660612596000,
1660621314000,
"CH5",
{
avType: undefined,
endTime: 1660621314000,
endTimeFormat: "2022-08-16 11:41:49",
ftpServerId: undefined,
logicalChannel: 5,
startTime: 1660612596000,
startTimeFormat: "2022-08-16 09:16:36",
storeType: 1,
streamType: 1
},
5]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH5",
value:
[3,
1660621309000,
1660621709000,
"CH5",
{
avType: undefined,
endTime: 1660621709000,
endTimeFormat: "2022-08-16 11:48:29",
ftpServerId: undefined,
logicalChannel: 5,
startTime: 1660621309000,
startTimeFormat: "2022-08-16 11:41:49",
storeType: 1,
streamType: 1,
}, 5]
}
,
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH4",
value:
[4,
1660579200000,
1660586404000,
"CH4",
{
avType: undefined,
endTime: 1660586404000,
endTimeFormat: "2022-08-16 02:00:04",
ftpServerId: undefined,
logicalChannel: 4,
startTime: 1660579200000,
startTimeFormat: "2022-08-16 00:00:00",
storeType: 1,
streamType: 1,
},
4]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH4",
value:
[4,
1660586472000,
1660586562000,
"CH4",
{
avType: undefined,
endTime: 1660586562000,
endTimeFormat: "2022-08-16 02:02:37",
ftpServerId: undefined,
logicalChannel: 4,
startTime: 1660586472000,
startTimeFormat: "2022-08-16 02:01:12",
storeType: 1,
streamType: 1
}, 4]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH4",
value:
[4,
1660586557000,
1660595224000,
"CH4",
{
avType: undefined,
endTime: 1660595224000,
endTimeFormat: "2022-08-16 04:26:59",
ftpServerId: undefined,
logicalChannel: 4,
startTime: 1660586557000,
startTimeFormat: "2022-08-16 02:02:37",
storeType: 1,
streamType: 1
},
4]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH4",
value:
[4,
1660595219000,
1660603898000,
"CH4",
{
avType: undefined,
endTime: 1660603898000,
endTimeFormat: "2022-08-16 06:51:33",
ftpServerId: undefined,
logicalChannel: 4,
startTime: 1660595219000,
startTimeFormat: "2022-08-16 04:26:59",
storeType: 1,
streamType: 1
},
4]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH4",
value:
[4,
1660603893000,
1660612566000,
"CH4",
{
avType: undefined,
endTime: 1660612566000,
endTimeFormat: "2022-08-16 09:16:01",
ftpServerId: undefined,
logicalChannel: 4,
startTime: 1660603893000,
startTimeFormat: "2022-08-16 06:51:33",
storeType: 1,
streamType: 1
},
4]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH4",
value:
[4,
1660612561000,
1660621277000,
"CH4",
{
avType: undefined,
endTime: 1660621277000,
endTimeFormat: "2022-08-16 11:41:12",
ftpServerId: undefined,
logicalChannel: 4,
startTime: 1660612561000,
startTimeFormat: "2022-08-16 09:16:01",
storeType: 1,
streamType: 1
},
4]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH4",
value:
[4,
1660621272000,
1660621712000,
"CH4",
{
avType: undefined,
endTime: 1660621712000,
endTimeFormat: "2022-08-16 11:48:32",
ftpServerId: undefined,
logicalChannel: 4,
startTime: 1660621272000,
startTimeFormat: "2022-08-16 11:41:12",
storeType: 1,
streamType: 1,
},
4]
}
,
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH3",
value:
[5,
1660579200000,
1660586404000,
"CH3",
{
avType: undefined,
endTime: 1660586404000,
endTimeFormat: "2022-08-16 02:00:04",
ftpServerId: undefined,
logicalChannel: 3,
startTime: 1660579200000,
startTimeFormat: "2022-08-16 00:00:00",
storeType: 1,
streamType: 1,
},
3]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH3",
value:
[5,
1660586472000,
1660586682000,
"CH3",
{
avType: undefined,
endTime: 1660586682000,
endTimeFormat: "2022-08-16 02:04:37",
ftpServerId: undefined,
logicalChannel: 3,
startTime: 1660586472000,
startTimeFormat: "2022-08-16 02:01:12",
storeType: 1,
streamType: 1,
},
3]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH3",
value:
[5,
1660586677000,
1660595379000,
"CH3",
{
avType: undefined,
endTime: 1660595379000,
endTimeFormat: "2022-08-16 04:29:34",
ftpServerId: undefined,
logicalChannel: 3,
startTime: 1660586677000,
startTimeFormat: "2022-08-16 02:04:37",
storeType: 1,
streamType: 1,
},
3]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH3",
value:
[5,
1660595374000,
1660604062000,
"CH3",
{
avType: undefined,
endTime: 1660604062000,
endTimeFormat: "2022-08-16 06:54:17",
ftpServerId: undefined,
logicalChannel: 3,
startTime: 1660595374000,
startTimeFormat: "2022-08-16 04:29:34",
storeType: 1,
streamType: 1,
},
3]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH3",
value:
[5,
1660604057000,
1660612735000,
"CH3",
{
avType: undefined,
endTime: 1660612735000,
endTimeFormat: "2022-08-16 09:18:50",
ftpServerId: undefined,
logicalChannel: 3,
startTime: 1660604057000,
startTimeFormat: "2022-08-16 06:54:17",
storeType: 1,
streamType: 1,
},
3]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH3",
value:
[5,
1660612730000,
1660621474000,
"CH3",
{
avType: undefined,
endTime: 1660621474000,
endTimeFormat: "2022-08-16 11:44:29",
ftpServerId: undefined,
logicalChannel: 3,
startTime: 1660612730000,
startTimeFormat: "2022-08-16 09:18:50",
storeType: 1,
streamType: 1,
},
3]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH3",
value:
[5,
1660621469000,
1660621709000,
"CH3",
{
avType: undefined,
endTime: 1660621709000,
endTimeFormat: "2022-08-16 11:48:29",
ftpServerId: undefined,
logicalChannel: 3,
startTime: 1660621469000,
startTimeFormat: "2022-08-16 11:44:29",
storeType: 1,
streamType: 1,
},
3]
}
,
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH2",
value:
[6,
1660579200000,
1660586404000,
"CH2",
{
avType: undefined,
endTime: 1660586404000,
endTimeFormat: "2022-08-16 02:00:04",
ftpServerId: undefined,
logicalChannel: 2,
startTime: 1660579200000,
startTimeFormat: "2022-08-16 00:00:00",
storeType: 1,
streamType: 1,
},
2]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH2",
value:
[6,
1660586472000,
1660586732000,
"CH2",
{
avType: undefined,
endTime: 1660586732000,
endTimeFormat: "2022-08-16 02:05:27",
ftpServerId: undefined,
logicalChannel: 2,
startTime: 1660586472000,
startTimeFormat: "2022-08-16 02:01:12",
storeType: 1,
streamType: 1,
},
2]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH2",
value:
[6,
1660586727000,
1660595417000,
"CH2",
{
avType: undefined,
endTime: 1660595417000,
endTimeFormat: "2022-08-16 04:30:12",
ftpServerId: undefined,
logicalChannel: 2,
startTime: 1660586727000,
startTimeFormat: "2022-08-16 02:05:27",
storeType: 1,
streamType: 1,
},
2]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH2",
value:
[6,
1660595412000,
1660604097000,
"CH2",
{
avType: undefined,
endTime: 1660604097000,
endTimeFormat: "2022-08-16 06:54:52",
ftpServerId: undefined,
logicalChannel: 2,
startTime: 1660595412000,
startTimeFormat: "2022-08-16 04:30:12",
storeType: 1,
streamType: 1,
},
2]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH2",
value:
[6,
1660604092000,
1660612778000,
"CH2",
{
avType: undefined,
endTime: 1660612778000,
endTimeFormat: "2022-08-16 09:19:33",
ftpServerId: undefined,
logicalChannel: 2,
startTime: 1660604092000,
startTimeFormat: "2022-08-16 06:54:52",
storeType: 1,
streamType: 1,
},
2]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH2",
value:
[6,
1660612773000,
1660621520000,
"CH2",
{
avType: undefined,
endTime: 1660621520000,
endTimeFormat: "2022-08-16 11:45:15",
ftpServerId: undefined,
logicalChannel: 2,
startTime: 1660612773000,
startTimeFormat: "2022-08-16 09:19:33",
storeType: 1,
streamType: 1,
},
2]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH2",
value:
[6,
1660621515000,
1660621710000,
"CH2",
{
avType: undefined,
endTime: 1660621710000,
endTimeFormat: "2022-08-16 11:48:30",
ftpServerId: undefined,
logicalChannel: 2,
startTime: 1660621515000,
startTimeFormat: "2022-08-16 11:45:15",
storeType: 1,
streamType: 1,
},
2]
}
,
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH1",
value:
[7,
1660579200000,
1660586404000,
"CH1",
{
avType: undefined,
endTime: 1660586404000,
endTimeFormat: "2022-08-16 02:00:04",
ftpServerId: undefined,
logicalChannel: 1,
startTime: 1660579200000,
startTimeFormat: "2022-08-16 00:00:00",
storeType: 1,
streamType: 1,
},
1]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH1",
value:
[7,
1660586472000,
1660586867000,
"CH1",
{
avType: undefined,
endTime: 1660586867000,
endTimeFormat: "2022-08-16 02:07:42",
ftpServerId: undefined,
logicalChannel: 1,
startTime: 1660586472000,
startTimeFormat: "2022-08-16 02:01:12",
storeType: 1,
streamType: 1,
},
1]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH1",
value:
[7,
1660586862000,
1660595540000,
"CH1",
{
avType: undefined,
endTime: 1660595540000,
endTimeFormat: "2022-08-16 04:{32:15",
ftpServerId: undefined,
logicalChannel: 1,
startTime: 1660586862000,
startTimeFormat: "2022-08-16 02:07:42",
storeType: 1,
streamType: 1,
},
1]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH1",
value:
[7,
1660595535000,
1660604222000,
"CH1",
{
avType: undefined,
endTime: 1660604222000,
endTimeFormat: "2022-08-16 06:56:57",
ftpServerId: undefined,
logicalChannel: 1,
startTime: 1660595535000,
startTimeFormat: "2022-08-16 04:32:15",
storeType: 1,
streamType: 1,
},
1]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH1",
value:
[7,
1660604217000,
1660612898000,
"CH1",
{
avType: undefined,
endTime: 1660612898000,
endTimeFormat: "2022-08-16 09:21:33",
ftpServerId: undefined,
logicalChannel: 1,
startTime: 1660604217000,
startTimeFormat: "2022-08-16 06:56:57",
storeType: 1,
streamType: 1,
},
1]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH1",
value:
[7,
1660612893000,
1660621641000,
"CH1",
{
avType: undefined,
endTime: 1660621641000,
endTimeFormat: "2022-08-16 11:47:16",
ftpServerId: undefined,
logicalChannel: 1,
startTime: 1660612893000,
startTimeFormat: "2022-08-16 09:21:33",
storeType: 1,
streamType: 1,
},
1]
},
{
itemStyle: {
normal: {
color: "#2c77d9"
}
},
name: "CH1",
value:
[7,
1660621636000,
1660621709000,
"CH1",
{
avType: undefined,
endTime: 1660621709000,
endTimeFormat: "2022-08-16 11:48:29",
ftpServerId: undefined,
logicalChannel: 1,
startTime: 1660621636000,
startTimeFormat: "2022-08-16 11:47:16",
storeType: 1,
streamType: 1,
},
1]
}
]
let title = '2022-08-16';
let PowerOnData = [
{
deviceId: "41040074826",
deviceName: "粤L58163",
deviceUploadTime: "2022-08-16 16:07:49",
eventTime: "2022-08-16 16:07:27",
flashLogType: 0
},
{
deviceId: "41040074826",
deviceName: "粤L58163",
deviceUploadTime: "2022-08-16 16:07:49",
eventTime: "2022-08-16 16:06:27",
flashLogType: 2
}
];
let arrData = [];
PowerOnData.map(item => {
arrData.push({
time: item.eventTime,
type: isOnOrDown(item.flashLogType)
});
});
let arrData2 = sortKey(arrData, "time");
console.log(arrData2);
let arrData3 = [];
for (let i = 0; i < arrData2.length; i++) {
let a = arrData2[i];
if (a !== arrData2[arrData2.length - 1]) {
let b = arrData2[i + 1];
if (a.type == '开机' && b.type == '关机') {
arrData3.push({
startTime: b.time,
endTime: a.time
});
}
}
}
console.log(arrData3);
let arrData4 = [];
arrData3.map(item => {
// for (let i = 0; i < 8; i++) {
arrData4.push({
itemStyle: {
normal: {
color: "#f00"
}
},
value:
[
8,
new Date(item.startTime).valueOf(),
new Date(item.endTime).valueOf(),
''
]
});
// }
});
console.log(arrData4)
let option = {
tooltip: {
show: true,
trigger: 'item',
position: function (p) {
return [p[0] + 10, p[1] - 10];
},
formatter: function (params) {
if (params.name != null) {
return params.name + ":" + formatDateStartTime;
} else {
return "";
}
},
},
dataZoom: [{
zoomLock: true,
type: 'inside',
xAxisIndex: 0,
filterMode: 'weakFilter'
}],
grid: {
height: 150,
show: true,
borderColor: '#cdc1c1',
borderWidth: 0.5,
left: '3%',
bottom: '2%',
top: '2%',
right: '1%'
},
xAxis: {
type: 'time',
min: new Date(title + " 00:00:00").getTime(),
max: new Date(title + " 23:59:59").getTime(),
scale: true,
axisLabel: {
formatter: function (value) {
return dateFtt("hh:mm:ss", new Date(value))
},
},
show: true,
splitLine: {
show: true,
lineStyle: {
color: '#cdc1c1',
width: 0.5,
type: 'dashed',
},
},
axisPointer: {
type: 'line',
axis: 'x',
show: true,
triggerTooltip: true,
lineStyle: {
type: 'solid',
color: '#cdc1c1',
width: 0.5
},
label: {
show: true,
formatter: function (params) {
formatDateStartTime = title + ' ' + dateFtt("hh:mm:ss", new Date(params.value))
formatDateEndTime = title + ' ' + dateFtt("hh:mm:ss", new Date('23:59:59'))
let val = parseInt(params.value)
if (val > 0) {
return dateFtt("hh:mm:ss", new Date(val))
}
},
backgroundColor: '#991028',
color: '#fff',
},
z: 5
},
},
yAxis: {
data: mGroup,
show: true,
splitLine: {
show: true,
lineStyle: {
color: '#A0A0A0',
width: 2,
},
},
},
series: [
{
type: 'custom',
renderItem: renderItem,
encode: {
y: 0
},
data: dataList
},
{
type: 'custom',
renderItem: renderItem,
encode: {
y: 0
},
data: arrData4
}
]
};
myChart.setOption(option);
// 判断开关机
function isOnOrDown(num) {
if (num == 0 || num == 49 || num == 50 || num == 125) {
return '开机';
} else if (num == 2 || num == 4 || num == 5 || num == 45 || num == 46 || num == 47 || num == 48 || num == 71 || num == 126) {
return '关机';
}
}
// 数组对象中比较日期大小---反序
function sortKey(array, key) {
return array.sort(function (a, b) {
var x = a[key];
var y = b[key];
return x > y ? -1 : x < y ? 1 : 0;
});
}
function dateFtt(fmt, date) {
var o = {
"M+": date.getMonth() + 1, //月份
"d+": date.getDate(), //日
"h+": date.getHours(), //小时
"m+": date.getMinutes(), //分
"s+": date.getSeconds(), //秒
"q+": Math.floor((date.getMonth() + 3) / 3), //季度
"S": date.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt))
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
function renderItem(params, api) {
var categoryIndex = api.value(0);
var start = api.coord([api.value(1), categoryIndex]);
var end = api.coord([api.value(2), categoryIndex]);
var height = api.size([0, 1])[1] - 2.2;
var rectShape = echarts.graphic.clipRectByRect(
{
x: start[0],
y: start[1] - height / 2,
width: end[0] - start[0] + 1,
height: height
},
{
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
}
);
return (
rectShape && {
type: 'rect',
transition: ['shape'],
shape: rectShape,
style: api.style()
}
);
}
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="js/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var option;
option = {
title: {
text: 'Step Line'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Step Start', 'Step Middle', 'Step End']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
name: 'Step Start',
type: 'line',
step: 'start',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Step Middle',
type: 'line',
step: 'middle',
data: [220, 282, 201, 234, 290, 430, 410]
},
{
name: 'Step End',
type: 'line',
step: 'end',
data: [450, 432, 401, 454, 590, 530, 510]
}
]
};
myChart.setOption(option);
</script>
</body>
</html>