Rinjae
124 lines
4.2 KiB
Plaintext
124 lines
4.2 KiB
Plaintext
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
|
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>다중 API 시간별 호출 통계</title>
|
|
<script src="<c:url value="/addon/echarts/echarts.min.js"/>"></script>
|
|
<style>
|
|
table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
}
|
|
th, td {
|
|
border: 1px solid black;
|
|
padding: 8px;
|
|
text-align: right;
|
|
}
|
|
th {
|
|
background-color: #f2f2f2;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="main" style="width: 900px;height:500px;"></div>
|
|
<h2>시간별 API 호출 통계 데이터</h2>
|
|
<div id="tableContainer"></div>
|
|
|
|
<script type="text/javascript">
|
|
window.onload = function() {
|
|
var myChart = echarts.init(document.getElementById('main'));
|
|
|
|
var times = ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'];
|
|
var authAPI = [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123];
|
|
var dataAPI = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 120, 132, 101, 134, 90, 230];
|
|
var paymentAPI = [150, 232, 201, 154, 190, 330, 410, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123];
|
|
|
|
var option = {
|
|
title: {
|
|
text: '다중 API 시간별 호출 통계'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
label: {
|
|
backgroundColor: '#6a7985'
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
data: ['사용자 인증 API', '데이터 조회 API', '결제 처리 API']
|
|
},
|
|
toolbox: {
|
|
feature: {
|
|
saveAsImage: {}
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: times
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: 'API 호출 횟수'
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '사용자 인증 API',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
areaStyle: {},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: authAPI
|
|
},
|
|
{
|
|
name: '데이터 조회 API',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
areaStyle: {},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: dataAPI
|
|
},
|
|
{
|
|
name: '결제 처리 API',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
areaStyle: {},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: paymentAPI
|
|
}
|
|
]
|
|
};
|
|
|
|
myChart.setOption(option);
|
|
|
|
// 테이블 생성
|
|
var tableHTML = '<table><tr><th>시간</th><th>사용자 인증 API</th><th>데이터 조회 API</th><th>결제 처리 API</th></tr>';
|
|
for (var i = 0; i < times.length; i++) {
|
|
tableHTML += '<tr><td>' + times[i] + '</td><td>' + authAPI[i] + '</td><td>' + dataAPI[i] + '</td><td>' + paymentAPI[i] + '</td></tr>';
|
|
}
|
|
tableHTML += '</table>';
|
|
document.getElementById('tableContainer').innerHTML = tableHTML;
|
|
};
|
|
</script>
|
|
</body>
|
|
</html> |