You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
111 lines
84 KiB
111 lines
84 KiB
8 months ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh-CN">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>Stacked Line Chart - Apache ECharts Demo</title>
|
||
|
|
<style>
|
||
|
|
* {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
#chart-container {
|
||
|
|
position: relative;
|
||
|
|
height: 100vh;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div id="chart-container"></div>
|
||
|
|
<script src="../echarts/echarts.min.js"></script>
|
||
|
|
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
|
||
|
|
var _arr = [{"date":"2024-11-27 00:00:00","cpu":"8.49","mem":"42.92"},{"date":"2024-11-27 00:01:00","cpu":"8.37","mem":"42.95"},{"date":"2024-11-27 00:02:00","cpu":"3.77","mem":"42.94"},{"date":"2024-11-27 00:03:00","cpu":"2.9","mem":"42.94"},{"date":"2024-11-27 00:04:00","cpu":"2.89","mem":"42.94"},{"date":"2024-11-27 00:05:00","cpu":"3.12","mem":"42.95"},{"date":"2024-11-27 00:06:00","cpu":"3.03","mem":"42.94"},{"date":"2024-11-27 00:07:00","cpu":"6.73","mem":"42.94"},{"date":"2024-11-27 00:08:00","cpu":"8.3","mem":"42.95"},{"date":"2024-11-27 00:09:00","cpu":"8.11","mem":"42.94"},{"date":"2024-11-27 00:10:00","cpu":"13.19","mem":"42.96"},{"date":"2024-11-27 00:11:00","cpu":"8.34","mem":"42.98"},{"date":"2024-11-27 00:12:00","cpu":"8.21","mem":"42.97"},{"date":"2024-11-27 00:13:00","cpu":"8.07","mem":"42.97"},{"date":"2024-11-27 00:14:00","cpu":"8.2","mem":"42.96"},{"date":"2024-11-27 00:15:00","cpu":"8.3","mem":"42.96"},{"date":"2024-11-27 00:16:00","cpu":"7.88","mem":"42.96"},{"date":"2024-11-27 00:17:00","cpu":"7.82","mem":"42.96"},{"date":"2024-11-27 00:18:00","cpu":"7.82","mem":"42.96"},{"date":"2024-11-27 00:19:00","cpu":"8.05","mem":"42.96"},{"date":"2024-11-27 00:20:00","cpu":"13.09","mem":"42.97"},{"date":"2024-11-27 00:21:00","cpu":"8.19","mem":"42.98"},{"date":"2024-11-27 00:22:00","cpu":"8.11","mem":"42.98"},{"date":"2024-11-27 00:23:00","cpu":"8.54","mem":"42.97"},{"date":"2024-11-27 00:24:00","cpu":"8.11","mem":"42.97"},{"date":"2024-11-27 00:25:00","cpu":"7.6","mem":"42.97"},{"date":"2024-11-27 00:26:00","cpu":"7.69","mem":"42.97"},{"date":"2024-11-27 00:27:00","cpu":"7.78","mem":"42.97"},{"date":"2024-11-27 00:28:00","cpu":"7.38","mem":"42.95"},{"date":"2024-11-27 00:29:00","cpu":"7.25","mem":"42.95"},{"date":"2024-11-27 00:30:00","cpu":"28.25","mem":"42.97"},{"date":"2024-11-27 00:31:00","cpu":"8.64","mem":"42.97"},{"date":"2024-11-27 00:32:00","cpu":"8.64","mem":"42.97"},{"date":"2024-11-27 00:33:00","cpu":"8.88","mem":"42.96"},{"date":"2024-11-27 00:34:00","cpu":"8.83","mem":"42.96"},{"date":"2024-11-27 00:35:00","cpu":"8.82","mem":"42.97"},{"date":"2024-11-27 00:36:00","cpu":"8.72","mem":"42.97"},{"date":"2024-11-27 00:37:00","cpu":"8.58","mem":"42.95"},{"date":"2024-11-27 00:38:00","cpu":"8.64","mem":"42.96"},{"date":"2024-11-27 00:39:00","cpu":"8.6","mem":"42.97"},{"date":"2024-11-27 00:40:00","cpu":"11.41","mem":"42.96"},{"date":"2024-11-27 00:41:00","cpu":"10.52","mem":"42.97"},{"date":"2024-11-27 00:42:00","cpu":"8.37","mem":"42.95"},{"date":"2024-11-27 00:43:00","cpu":"8.33","mem":"42.95"},{"date":"2024-11-27 00:44:00","cpu":"9.74","mem":"42.98"},{"date":"2024-11-27 00:45:00","cpu":"8.36","mem":"42.96"},{"date":"2024-11-27 00:46:00","cpu":"8.53","mem":"42.97"},{"date":"2024-11-27 00:47:00","cpu":"8.23","mem":"42.96"},{"date":"2024-11-27 00:48:00","cpu":"8.22","mem":"42.96"},{"date":"2024-11-27 00:49:00","cpu":"8.34","mem":"42.95"},{"date":"2024-11-27 00:50:00","cpu":"8.2","mem":"42.95"},{"date":"2024-11-27 00:51:00","cpu":"11.77","mem":"42.97"},{"date":"2024-11-27 00:52:00","cpu":"6.75","mem":"42.96"},{"date":"2024-11-27 00:53:00","cpu":"6.64","mem":"42.95"},{"date":"2024-11-27 00:54:00","cpu":"6.95","mem":"42.97"},{"date":"2024-11-27 00:55:00","cpu":"6.49","mem":"42.96"},{"date":"2024-11-27 00:56:00","cpu":"6.54","mem":"42.96"},{"date":"2024-11-27 00:57:00","cpu":"6.68","mem":"42.96"},{"date":"2024-11-27 00:58:00","cpu":"6.67","mem":"42.97"},{"date":"2024-11-27 00:59:00","cpu":"6.59","mem":"42.96"},{"date":"2024-11-27 01:00:00","cpu":"6.7","mem":"42.96"},{"date":"2024-11-27 01:01:00","cpu":"11.3","mem":"42.96"},{"date":"2024-11-27 01:02:00","cpu":"6.87","mem":"42.96"},{"date":"2024-11-27 01:03:00","cpu":"6.35","mem":"42.95"},{"date":"2024-11-27 01:04:00","cpu":"6.53","mem":"42.95"},{"date":"2024-11-27 01:05:00","cpu":"6.53","mem":"42.96"},{"date":"2024-11-27 01:06:00","cpu":"6.54","mem":"42.95"},{"date":"2024-11-27 01:07:00","cpu":"6.44","mem":"42.94"},{"date":"2024-11-27 01:08:00","cpu":"6.48","mem":"42.94"},{"date":"2024-11-27 01:09:00","cpu":"6.39","mem":"42.94"},{"date":"2024-11-
|
||
|
|
|
||
|
|
|
||
|
|
var dates = [];
|
||
|
|
var cpu_values = [];
|
||
|
|
var mem_values = [];
|
||
|
|
|
||
|
|
_arr.forEach(item => {
|
||
|
|
dates.push(item.date);
|
||
|
|
cpu_values.push(item.cpu);
|
||
|
|
mem_values.push(item.mem);
|
||
|
|
});
|
||
|
|
|
||
|
|
console.log(dates);
|
||
|
|
console.log(cpu_values);
|
||
|
|
console.log(mem_values);
|
||
|
|
|
||
|
|
var dom = document.getElementById('chart-container');
|
||
|
|
var myChart = echarts.init(dom, null, {
|
||
|
|
renderer: 'canvas',
|
||
|
|
useDirtyRect: false
|
||
|
|
});
|
||
|
|
var app = {};
|
||
|
|
|
||
|
|
var option;
|
||
|
|
|
||
|
|
option = {
|
||
|
|
title: {
|
||
|
|
text: 'Stacked Line'
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis'
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
data: ['CPU', '内存']
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
left: '3%',
|
||
|
|
right: '4%',
|
||
|
|
bottom: '3%',
|
||
|
|
containLabel: true
|
||
|
|
},
|
||
|
|
toolbox: {
|
||
|
|
feature: {
|
||
|
|
saveAsImage: {}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
type: 'category',
|
||
|
|
boundaryGap: false,
|
||
|
|
data: dates
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
type: 'value'
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: 'CPU',
|
||
|
|
type: 'line',
|
||
|
|
smooth: true,
|
||
|
|
data: cpu_values
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '内存',
|
||
|
|
type: 'line',
|
||
|
|
smooth: true,
|
||
|
|
data: mem_values
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
if (option && typeof option === 'object') {
|
||
|
|
myChart.setOption(option);
|
||
|
|
}
|
||
|
|
|
||
|
|
window.addEventListener('resize', myChart.resize);
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|