<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script type="text/javascript">
var colors = ['#5470C6', '#EE6666'];
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var option;
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#283b56'
}
}
},
dataZoom: [
{ type: 'slider', /* start: 50, end: 100 */ },
{ type: 'inside' },
],
legend: {
data:['메모리사용률', '최대메모리사용률']
},
xAxis: {
type: 'category',
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
data : (function(){
var now = new Date();
var res = [];
var len = 10;
while(len--) {
res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
now = new Date(now - 2000);
}
return res;
})()
},
yAxis: [
{
type: 'value',
scale: true,
name: '메모리사용률',
// max: 20,
// min: 0,
// boundaryGap: [0.2, 0.2],
// axisLabel: {
// formatter: '{value} %'
// },
},
// {
// type: 'value',
// scale: true,
// name: '최대메모리사용률',
// max: 1200,
// min: 0,
// boundaryGap: [0.2, 0.2]
// }
],
series: [
{
name : '메모리사용률',
type: 'bar',
itemStyle: { color: '#4F87B2'},
// data: [150, 230, 224, 218, 135, 147, 260],
data: (function (){
var res = [];
var len = 0;
while (len < 10) {
res.push((Math.random()*10 + 5).toFixed(1) - 0); //랜덤 데이터 생성
len++;
}
return res;
})(),
},
{
name : '최대메모리사용률',
type: 'line',
// symbol: 'triangle',
symbolSize: 10,
lineStyle: { color: '#C70202'},
itemStyle: { color: '#C70202'},
data: (function (){
var res = [];
var len = 0;
while (len < 10) {
res.push((Math.random()*10 + 5).toFixed(1) - 0); //랜덤 데이터 생성
len++;
}
return res;
})(),
}
]
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
// 이제 부터 불러오는 거야~!
setInterval(function(){
// x축 실시간 데이터 시간
// 메모리 사용량
// 메모리 최대 사용량
var axixData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');
var memoryUseRate = option.series[0].data;
var memoryMaxUseRate = option.series[1].data;
/* 1. 단일 데이터 추가 */
// * 데이터 추가 : 메모리 사용량 / 최대 사용량 / x축 시간데이
// option.xAxis.data.push(axixData);
// memoryUseRate.push((Math.random()*10 + 5).toFixed(1) - 0);
// memoryMaxUseRate.push((Math.random()*10 + 5).toFixed(1) - 0);
// * 기존 데이터 삭제 ( 1개씩 )
// option.xAxis.data.shift();
// memoryUseRate.shift();
// memoryMaxUseRate.shift();
/* 2. 여러 데이터 추가 */
var dateData = ['2021.09.12 21:12:00', '2021.09.12 21:12:10', '2021.09.12 21:12:20'];
var memoryUseData = [13.01, 20.58, 5.12];
var memoryMaxUseData = [13.01, 20.58, 5.12];
Array.prototype.push.apply(option.xAxis.data, dateData);
Array.prototype.push.apply(memoryUseRate, memoryUseData);
Array.prototype.push.apply(memoryMaxUseRate, memoryMaxUseData);
// 옵션 초기화
myChart.setOption(option);
},3000);
</script>
</body>
</html>https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/apply
Function.prototype.apply() - JavaScript | MDN
apply() 메서드는 주어진 this 값과 배열 (또는 유사 배열 객체) 로 제공되는 arguments 로 함수를 호출합니다.
developer.mozilla.org
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/push
Array.prototype.push() - JavaScript | MDN
push() 메서드는 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환합니다.
developer.mozilla.org
https://dullyshin.github.io/2020/03/12/Echarts-movingChart/
Echarts -실시간으로 움직이는 차트 만들기
Echarts 실시간으로 움직이는 차트 만들기지금까지 만든 차트들은 정적으로 움직임이 없는 차트들이 었지만, 실시간으로 데이터를 생성하여 차트가 움직이는 것처럼 보여질 수 있습니다. 실시간
dullyshin.github.io
'웹' 카테고리의 다른 글
| Spring Framework 이해하기 ( home.jsp 동작원리 ) (0) | 2019.10.16 |
|---|---|
| 웹 개발 프레임워크 조사 React / Angular / Vue (0) | 2019.09.26 |
| POST GET 한글 처리 (0) | 2019.06.20 |
| 어노테이션 (0) | 2019.06.20 |
| GET 과 POST의 차이 (0) | 2019.06.19 |
