2735 lines
81 KiB
HTML
2735 lines
81 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<title>Title</title>
|
|||
|
|
<script src="http://192.168.44.54/assets/echarts.min.js"></script>
|
|||
|
|
<style>
|
|||
|
|
* {
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
body {
|
|||
|
|
width: 1200px;
|
|||
|
|
margin: auto;
|
|||
|
|
padding-bottom: 50px;
|
|||
|
|
}
|
|||
|
|
.indent-3 {
|
|||
|
|
padding-left: 50px;
|
|||
|
|
padding-right: 50px;
|
|||
|
|
}
|
|||
|
|
.header1, .header2, .header3, .header4 {
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
.header1 {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
height: 100px;
|
|||
|
|
color: white;
|
|||
|
|
background-color: rgb(0,116,159);
|
|||
|
|
font-size: 34px;
|
|||
|
|
}
|
|||
|
|
.header1 .header1__time {
|
|||
|
|
padding-top: 6px;
|
|||
|
|
padding-left: 30px;
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: normal;
|
|||
|
|
font-style: italic;
|
|||
|
|
}
|
|||
|
|
.header2 {
|
|||
|
|
margin: 30px 0 20px;
|
|||
|
|
padding: 0 30px;
|
|||
|
|
color: rgb(51,51,51);
|
|||
|
|
font-size: 20px;
|
|||
|
|
}
|
|||
|
|
.header3 {
|
|||
|
|
margin: 20px 0;
|
|||
|
|
padding: 0 43px;
|
|||
|
|
color: rgb(0,116,159);
|
|||
|
|
font-size: 18px;
|
|||
|
|
}
|
|||
|
|
.header4 {
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
padding-left: 10px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: rgba(0,0,0,0.85);;
|
|||
|
|
}
|
|||
|
|
.text {
|
|||
|
|
color: rgb(74,74,74);
|
|||
|
|
font-size: 16px;
|
|||
|
|
line-height: 24px;
|
|||
|
|
text-indent: 32px;
|
|||
|
|
}
|
|||
|
|
.text .fill {
|
|||
|
|
color: black;
|
|||
|
|
padding: 0 3px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.table-box {
|
|||
|
|
padding-top: 10px;
|
|||
|
|
padding-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
.table__title {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: rgba(0,0,0,0.85);
|
|||
|
|
padding-bottom: 10px;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
.table {
|
|||
|
|
width: 100%;
|
|||
|
|
text-align: center;
|
|||
|
|
border: 1px solid rgb(222,222,222);
|
|||
|
|
border-radius: 4px;
|
|||
|
|
border-collapse: collapse;
|
|||
|
|
}
|
|||
|
|
.table__td {
|
|||
|
|
border: 1px solid rgb(222,222,222);
|
|||
|
|
color: rgb(38,38,38);
|
|||
|
|
font-size: 16px;
|
|||
|
|
padding: 8px 0;
|
|||
|
|
}
|
|||
|
|
.font-size-14 .table__td {
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
.td__quantile-group {
|
|||
|
|
padding: 8px 0;
|
|||
|
|
display: table;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
.td__quantile-group .td__quantile {
|
|||
|
|
/*display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
flex: 0 0 200px;*/
|
|||
|
|
display: table-row;
|
|||
|
|
}
|
|||
|
|
.td__quantile-group .td__quantile:last-of-type {
|
|||
|
|
border-bottom: none;
|
|||
|
|
}
|
|||
|
|
.quantile__label {
|
|||
|
|
display: table-cell;
|
|||
|
|
color: rgb(122,122,122);
|
|||
|
|
font-size: 14px;
|
|||
|
|
width: 50%;
|
|||
|
|
}
|
|||
|
|
.quantile__value {
|
|||
|
|
display: table-cell;
|
|||
|
|
width: 50%;
|
|||
|
|
font-size: 14px;
|
|||
|
|
text-align: left;
|
|||
|
|
vertical-align: middle;
|
|||
|
|
}
|
|||
|
|
.quantile__label .quantile__point {
|
|||
|
|
margin-right: 10px;
|
|||
|
|
width: 6px;
|
|||
|
|
height: 6px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
}
|
|||
|
|
.label-box {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: right;
|
|||
|
|
align-items: center;
|
|||
|
|
padding-right: 15px;
|
|||
|
|
}
|
|||
|
|
.quantile__point.quantile__point--p50 {
|
|||
|
|
background-color: rgb(35,191,154);
|
|||
|
|
}
|
|||
|
|
.quantile__point.quantile__point--p90 {
|
|||
|
|
background-color: rgb(255,162,0);
|
|||
|
|
}
|
|||
|
|
.quantile__point.quantile__point--p99 {
|
|||
|
|
background-color: rgb(236,127,106);
|
|||
|
|
}
|
|||
|
|
.table__th {
|
|||
|
|
height: 47px;
|
|||
|
|
border: 1px solid rgb(222,222,222);
|
|||
|
|
background-color: rgb(250,250,250);
|
|||
|
|
color: rgb(102,102,102);
|
|||
|
|
font-weight: normal;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
.table__footer {
|
|||
|
|
display: flex;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: rgb(102,102,102);
|
|||
|
|
}
|
|||
|
|
.table__footer .footer__label {
|
|||
|
|
color: rgb(51,51,51);
|
|||
|
|
}
|
|||
|
|
.table.table-contain-echarts {
|
|||
|
|
margin-top: 20px;
|
|||
|
|
margin-bottom: 4px;
|
|||
|
|
}
|
|||
|
|
.table.table-contain-echarts .echarts-box {
|
|||
|
|
height: 200px;
|
|||
|
|
}
|
|||
|
|
.table.table-contain-echarts .echarts__canvas {
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.echarts-box {
|
|||
|
|
display: flex;
|
|||
|
|
}
|
|||
|
|
.echarts {
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
.echarts__legends {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
margin-bottom: 5px;
|
|||
|
|
}
|
|||
|
|
.echarts__legend {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.echarts__legend:first-of-type {
|
|||
|
|
margin-right: 10px;
|
|||
|
|
}
|
|||
|
|
.color-block {
|
|||
|
|
width: 16px;
|
|||
|
|
height: 8px;
|
|||
|
|
border-radius: 2px;
|
|||
|
|
margin-right: 4px;
|
|||
|
|
}
|
|||
|
|
.color-block.blue {
|
|||
|
|
background-color: rgb(88,176,209);
|
|||
|
|
}
|
|||
|
|
.color-block.green {
|
|||
|
|
background-color: rgb(140,206,213);
|
|||
|
|
}
|
|||
|
|
.legend-text {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: rgb(102,102,102);
|
|||
|
|
}
|
|||
|
|
.echarts__title {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: rgba(0,0,0,0.85);
|
|||
|
|
padding-bottom: 10px;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="header1">网络服务质量监测报告 (精简版)<span class="header1__time" id="currentRange0"></span></div>
|
|||
|
|
<div class="header2">一.整体流量概况</div>
|
|||
|
|
<div class="header3">1.流量规模</div>
|
|||
|
|
<div class="table-box indent-3">
|
|||
|
|
<div class="table__title">表1 整体流量概况</div>
|
|||
|
|
<table class="table">
|
|||
|
|
<thead class="table__header">
|
|||
|
|
<tr class="table__tr">
|
|||
|
|
<th class="table__th">速率均值</th>
|
|||
|
|
<th class="table__th">速率谷值</th>
|
|||
|
|
<th class="table__th">速率分位值</th>
|
|||
|
|
<th class="table__th">速率峰值</th>
|
|||
|
|
<th class="table__th">速率均值环比</th>
|
|||
|
|
<th class="table__th">总流量</th>
|
|||
|
|
<th class="table__th">总流量环比</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tr class="table__tr">
|
|||
|
|
<td class="table__td">451.24 Gbps</td>
|
|||
|
|
<td class="table__td">83.98 Gbps</td>
|
|||
|
|
<td class="table__td">
|
|||
|
|
<div class="td__quantile-group">
|
|||
|
|
<div class="td__quantile">
|
|||
|
|
<div class="quantile__label">
|
|||
|
|
<div class="label-box">
|
|||
|
|
<div class="quantile__point quantile__point--p50"></div>
|
|||
|
|
<div>P50</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="quantile__value">9.31 Gbps</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="td__quantile">
|
|||
|
|
<div class="quantile__label">
|
|||
|
|
<div class="label-box">
|
|||
|
|
<div class="quantile__point quantile__point--p90"></div>
|
|||
|
|
<div>P90</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="quantile__value">7856.09 Gbps</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="td__quantile">
|
|||
|
|
<div class="quantile__label">
|
|||
|
|
<div class="label-box">
|
|||
|
|
<div class="quantile__point quantile__point--p99"></div>
|
|||
|
|
<div>P99</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="quantile__value">902.70 Gbps</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</td>
|
|||
|
|
<td class="table__td">1.02 Tbps</td>
|
|||
|
|
<td class="table__td">0.05%</td>
|
|||
|
|
<td class="table__td">1.02 Tbps</td>
|
|||
|
|
<td class="table__td">0.05%</td>
|
|||
|
|
</tr>
|
|||
|
|
</table>
|
|||
|
|
<div class="table__footer" style="margin-top: 20px;">
|
|||
|
|
<div class="footer__label">* 流量速率分位值计算方式：</div>以5分钟为时间粒度计算平均流量速率vi，取观测时间范围内的{v1, v2, v3……vn}的分位值，下同。
|
|||
|
|
</div>
|
|||
|
|
<div class="table__footer">
|
|||
|
|
<div class="footer__label">* 环比计算方式：</div>计算当前统计值与上一个统计周期（一天前）的统计值相比的变化率，下同。
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="echarts-box indent-3">
|
|||
|
|
<div class="echarts">
|
|||
|
|
<div class="echarts__canvas" id="canvas1" style="width: 1100px; height: 400px; display: none;"></div>
|
|||
|
|
<img height="400" width="1100" id="imgCanvas1"/>
|
|||
|
|
<div class="echarts__title">图1 当日流量变化曲线</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="header3">2.域内地市流量构成</div>
|
|||
|
|
<div class="table-box indent-3">
|
|||
|
|
<div class="table__title">表2 域内用户访问域外服务TOP10客户端地区流量分布</div>
|
|||
|
|
<table class="table">
|
|||
|
|
<thead class="table__header">
|
|||
|
|
<tr class="table__tr">
|
|||
|
|
<th class="table__th">客户端所在域内地区</th>
|
|||
|
|
<th class="table__th">速率峰值</th>
|
|||
|
|
<th class="table__th">速率均值</th>
|
|||
|
|
<th class="table__th">速率分位值</th>
|
|||
|
|
<th class="table__th">总流量</th>
|
|||
|
|
<th class="table__th">总流量占比</th>
|
|||
|
|
<th class="table__th">总流量环比</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tr class="table__tr">
|
|||
|
|
<td class="table__td">HTTP</td>
|
|||
|
|
<td class="table__td">1.57 PB</td>
|
|||
|
|
<td class="table__td">36.30</td>
|
|||
|
|
<td class="table__td">
|
|||
|
|
<div class="td__quantile-group">
|
|||
|
|
<div class="td__quantile">
|
|||
|
|
<div class="quantile__label">
|
|||
|
|
<div class="label-box">
|
|||
|
|
<div class="quantile__point quantile__point--p50"></div>
|
|||
|
|
<div>P50</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="quantile__value">499.31 Gbps</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="td__quantile">
|
|||
|
|
<div class="quantile__label">
|
|||
|
|
<div class="label-box">
|
|||
|
|
<div class="quantile__point quantile__point--p90"></div>
|
|||
|
|
<div>P90</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="quantile__value">786.09 Gbps</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="td__quantile">
|
|||
|
|
<div class="quantile__label">
|
|||
|
|
<div class="label-box">
|
|||
|
|
<div class="quantile__point quantile__point--p99"></div>
|
|||
|
|
<div>P99</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="quantile__value">902.70 Gbps</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<td class="table__td">902.42 PB</td>
|
|||
|
|
<td class="table__td">36.30%</td>
|
|||
|
|
<td class="table__td">8.14%</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr class="table__tr">
|
|||
|
|
<td class="table__td">HTTP</td>
|
|||
|
|
<td class="table__td">1.57 PB</td>
|
|||
|
|
<td class="table__td">36.30</td>
|
|||
|
|
<td class="table__td">
|
|||
|
|
<div class="td__quantile-group">
|
|||
|
|
<div class="td__quantile">
|
|||
|
|
<div class="quantile__label">
|
|||
|
|
<div class="label-box">
|
|||
|
|
<div class="quantile__point quantile__point--p50"></div>
|
|||
|
|
<div>P50</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="quantile__value">499.31 Gbps</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="td__quantile">
|
|||
|
|
<div class="quantile__label">
|
|||
|
|
<div class="label-box">
|
|||
|
|
<div class="quantile__point quantile__point--p90"></div>
|
|||
|
|
<div>P90</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="quantile__value">786.09 Gbps</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="td__quantile">
|
|||
|
|
<div class="quantile__label">
|
|||
|
|
<div class="label-box">
|
|||
|
|
<div class="quantile__point quantile__point--p99"></div>
|
|||
|
|
<div>P99</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="quantile__value">902.70 Gbps</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</td>
|
|||
|
|
<td class="table__td">902.42 PB</td>
|
|||
|
|
<td class="table__td">36.30%</td>
|
|||
|
|
<td class="table__td">8.14%</td>
|
|||
|
|
</tr>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="header3">3.服务质量概况</div>
|
|||
|
|
<div class="table-box indent-3">
|
|||
|
|
<div class="table__title">表3 域内访问域外流量的服务质量</div>
|
|||
|
|
<table class="table">
|
|||
|
|
<thead class="table__header">
|
|||
|
|
<tr class="table__tr">
|
|||
|
|
<th class="table__th">服务质量指标</th>
|
|||
|
|
<th class="table__th">分位值</th>
|
|||
|
|
<th class="table__th">峰值</th>
|
|||
|
|
<th class="table__th">均值</th>
|
|||
|
|
<th class="table__th">均值环比</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tr class="table__tr">
|
|||
|
|
<td class="table__td">TCP会话创建延迟(ms)</td>
|
|||
|
|
<td class="table__td">
|
|||
|
|
<div class="td__quantile-group">
|
|||
|
|
<div class="td__quantile">
|
|||
|
|
<div class="quantile__label">
|
|||
|
|
<div class="label-box">
|
|||
|
|
<div class="quantile__point quantile__point--p50"></div>
|
|||
|
|
<div>P50</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="quantile__value">499.31 Gbps</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="td__quantile">
|
|||
|
|
<div class="quantile__label">
|
|||
|
|
<div class="label-box">
|
|||
|
|
<div class="quantile__point quantile__point--p90"></div>
|
|||
|
|
<div>P90</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="quantile__value">786.09 Gbps</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="td__quantile">
|
|||
|
|
<div class="quantile__label">
|
|||
|
|
<div class="label-box">
|
|||
|
|
<div class="quantile__point quantile__point--p99"></div>
|
|||
|
|
<div>P99</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="quantile__value">902.70 Gbps</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</td>
|
|||
|
|
<td class="table__td">902.42 PB</td>
|
|||
|
|
<td class="table__td">36.30 PB</td>
|
|||
|
|
<td class="table__td">8.14%</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr class="table__tr">
|
|||
|
|
<td class="table__td">缺包率</td>
|
|||
|
|
<td class="table__td">
|
|||
|
|
<div class="td__quantile-group">
|
|||
|
|
<div class="td__quantile">
|
|||
|
|
<div class="quantile__label">
|
|||
|
|
<div class="label-box">
|
|||
|
|
<div class="quantile__point quantile__point--p50"></div>
|
|||
|
|
<div>P50</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="quantile__value">499.31 Gbps</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="td__quantile">
|
|||
|
|
<div class="quantile__label">
|
|||
|
|
<div class="label-box">
|
|||
|
|
<div class="quantile__point quantile__point--p90"></div>
|
|||
|
|
<div>P90</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="quantile__value">786.09 Gbps</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="td__quantile">
|
|||
|
|
<div class="quantile__label">
|
|||
|
|
<div class="label-box">
|
|||
|
|
<div class="quantile__point quantile__point--p99"></div>
|
|||
|
|
<div>P99</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="quantile__value">902.70 Gbps</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</td>
|
|||
|
|
<td class="table__td">902.42 PB</td>
|
|||
|
|
<td class="table__td">36.30 PB</td>
|
|||
|
|
<td class="table__td">8.14%</td>
|
|||
|
|
</tr>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
<div class="table-box indent-3">
|
|||
|
|
<div class="table__title">表4 域外访问域内流量的服务质量</div>
|
|||
|
|
<table class="table">
|
|||
|
|
<thead class="table__header">
|
|||
|
|
<tr class="table__tr">
|
|||
|
|
<th class="table__th">服务质量指标</th>
|
|||
|
|
<th class="table__th">分位值</th>
|
|||
|
|
<th class="table__th">峰值</th>
|
|||
|
|
<th class="table__th">均值</th>
|
|||
|
|
<th class="table__th">均值环比</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tr class="table__tr">
|
|||
|
|
<td class="table__td">TCP会话创建延迟(ms)</td>
|
|||
|
|
<td class="table__td">
|
|||
|
|
<div class="td__quantile-group">
|
|||
|
|
<div class="td__quantile">
|
|||
|
|
<div class="quantile__label">
|
|||
|
|
<div class="label-box">
|
|||
|
|
<div class="quantile__point quantile__point--p50"></div>
|
|||
|
|
<div>P50</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="quantile__value">499.31 Gbps</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="td__quantile">
|
|||
|
|
<div class="quantile__label">
|
|||
|
|
<div class="label-box">
|
|||
|
|
<div class="quantile__point quantile__point--p90"></div>
|
|||
|
|
<div>P90</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="quantile__value">786.09 Gbps</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="td__quantile">
|
|||
|
|
<div class="quantile__label">
|
|||
|
|
<div class="label-box">
|
|||
|
|
<div class="quantile__point quantile__point--p99"></div>
|
|||
|
|
<div>P99</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="quantile__value">902.70 Gbps</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</td>
|
|||
|
|
<td class="table__td">902.42 PB</td>
|
|||
|
|
<td class="table__td">36.30 PB</td>
|
|||
|
|
<td class="table__td">8.14%</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr class="table__tr">
|
|||
|
|
<td class="table__td">缺包率</td>
|
|||
|
|
<td class="table__td">
|
|||
|
|
<div class="td__quantile-group">
|
|||
|
|
<div class="td__quantile">
|
|||
|
|
<div class="quantile__label">
|
|||
|
|
<div class="label-box">
|
|||
|
|
<div class="quantile__point quantile__point--p50"></div>
|
|||
|
|
<div>P50</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="quantile__value">499.31 Gbps</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="td__quantile">
|
|||
|
|
<div class="quantile__label">
|
|||
|
|
<div class="label-box">
|
|||
|
|
<div class="quantile__point quantile__point--p90"></div>
|
|||
|
|
<div>P90</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="quantile__value">786.09 Gbps</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="td__quantile">
|
|||
|
|
<div class="quantile__label">
|
|||
|
|
<div class="label-box">
|
|||
|
|
<div class="quantile__point quantile__point--p99"></div>
|
|||
|
|
<div>P99</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="quantile__value">902.70 Gbps</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</td>
|
|||
|
|
<td class="table__td">902.42 PB</td>
|
|||
|
|
<td class="table__td">36.30 PB</td>
|
|||
|
|
<td class="table__td">8.14%</td>
|
|||
|
|
</tr>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="header2">二.业务排名表</div>
|
|||
|
|
<div class="header3">1.整体业务排名</div>
|
|||
|
|
|
|||
|
|
<div class="echarts-box indent-3">
|
|||
|
|
<div class="echarts">
|
|||
|
|
<div class="echarts__canvas" id="canvas17" style="width: 1100px; height: 400px;"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="table-box indent-3">
|
|||
|
|
<table class="table">
|
|||
|
|
<thead class="table__header">
|
|||
|
|
<tr class="table__tr">
|
|||
|
|
<th class="table__th">APP流量速率</th>
|
|||
|
|
<th class="table__th">douyin</th>
|
|||
|
|
<th class="table__th">wechart</th>
|
|||
|
|
<th class="table__th">aerawerae</th>
|
|||
|
|
<th class="table__th">ccc</th>
|
|||
|
|
<th class="table__th">douyin2</th>
|
|||
|
|
<th class="table__th">douyin3</th>
|
|||
|
|
<th class="table__th">douyin4</th>
|
|||
|
|
<th class="table__th">douyin5</th>
|
|||
|
|
<th class="table__th">douyin6</th>
|
|||
|
|
<th class="table__th">douyin7</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tr class="table__tr font-size-14">
|
|||
|
|
<td class="table__td">P50</td>
|
|||
|
|
<td class="table__td">55.63 Gbps</td>
|
|||
|
|
<td class="table__td">27.60 Gbps</td>
|
|||
|
|
<td class="table__td">27.60 Gbps</td>
|
|||
|
|
<td class="table__td">55.63 Gbps</td>
|
|||
|
|
<td class="table__td">27.60 Gbps</td>
|
|||
|
|
<td class="table__td">55.63 Gbps</td>
|
|||
|
|
<td class="table__td">27.60 Gbps</td>
|
|||
|
|
<td class="table__td">55.63 Gbps</td>
|
|||
|
|
<td class="table__td">27.60 Gbps</td>
|
|||
|
|
<td class="table__td">55.63 Gbps</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr class="table__tr font-size-14">
|
|||
|
|
<td class="table__td">P90</td>
|
|||
|
|
<td class="table__td">55.63 Gbps</td>
|
|||
|
|
<td class="table__td">27.60 Gbps</td>
|
|||
|
|
<td class="table__td">55.63 Gbps</td>
|
|||
|
|
<td class="table__td">27.60 Gbps</td>
|
|||
|
|
<td class="table__td">55.63 Gbps</td>
|
|||
|
|
<td class="table__td">27.60 Gbps</td>
|
|||
|
|
<td class="table__td">27.60 Gbps</td>
|
|||
|
|
<td class="table__td">55.63 Gbps</td>
|
|||
|
|
<td class="table__td">27.60 Gbps</td>
|
|||
|
|
<td class="table__td">55.63 Gbps</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr class="table__tr font-size-14">
|
|||
|
|
<td class="table__td">P99</td>
|
|||
|
|
<td class="table__td">55.63 Gbps</td>
|
|||
|
|
<td class="table__td">27.60 Gbps</td>
|
|||
|
|
<td class="table__td">55.63 Gbps</td>
|
|||
|
|
<td class="table__td">27.60 Gbps</td>
|
|||
|
|
<td class="table__td">55.63 Gbps</td>
|
|||
|
|
<td class="table__td">27.60 Gbps</td>
|
|||
|
|
<td class="table__td">55.63 Gbps</td>
|
|||
|
|
<td class="table__td">27.60 Gbps</td>
|
|||
|
|
<td class="table__td">27.60 Gbps</td>
|
|||
|
|
<td class="table__td">55.63 Gbps</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr class="table__tr font-size-14">
|
|||
|
|
<td class="table__td">峰值</td>
|
|||
|
|
<td class="table__td">55.63 Gbps</td>
|
|||
|
|
<td class="table__td">27.60 Gbps</td>
|
|||
|
|
<td class="table__td">55.63 Gbps</td>
|
|||
|
|
<td class="table__td">27.60 Gbps</td>
|
|||
|
|
<td class="table__td">55.63 Gbps</td>
|
|||
|
|
<td class="table__td">55.63 Gbps</td>
|
|||
|
|
<td class="table__td">27.60 Gbps</td>
|
|||
|
|
<td class="table__td">55.63 Gbps</td>
|
|||
|
|
<td class="table__td">27.60 Gbps</td>
|
|||
|
|
<td class="table__td">55.63 Gbps</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr class="table__tr font-size-14">
|
|||
|
|
<td class="table__td">均值</td>
|
|||
|
|
<td class="table__td">55.63 Gbps</td>
|
|||
|
|
<td class="table__td">27.60 Gbps</td>
|
|||
|
|
<td class="table__td">55.63 Gbps</td>
|
|||
|
|
<td class="table__td">27.60 Gbps</td>
|
|||
|
|
<td class="table__td">27.60 Gbps</td>
|
|||
|
|
<td class="table__td">55.63 Gbps</td>
|
|||
|
|
<td class="table__td">27.60 Gbps</td>
|
|||
|
|
<td class="table__td">55.63 Gbps</td>
|
|||
|
|
<td class="table__td">27.60 Gbps</td>
|
|||
|
|
<td class="table__td">55.63 Gbps</td>
|
|||
|
|
</tr>
|
|||
|
|
</table>
|
|||
|
|
<div class="echarts__title" style="padding-top: 10px;">图2 活跃APP流量情况</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="header3">2.省内外业务排名</div>
|
|||
|
|
<div class="echarts-box indent-3">
|
|||
|
|
<div class="echarts">
|
|||
|
|
<div class="echarts__canvas" id="canvas2" style="width: 550px; height: 280px;"></div>
|
|||
|
|
<div class="echarts__title">图3 域内用户访问域外服务的APP流量占比</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="echarts">
|
|||
|
|
<div class="echarts__canvas" id="canvas3" style="width: 550px; height: 280px;"></div>
|
|||
|
|
<div class="echarts__title">图4 域外用户访问域内服端的APP流量占比</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="header2">三.业务质量排名表</div>
|
|||
|
|
<div class="table-box indent-3">
|
|||
|
|
<div class="table__title">表5 活跃APP流量情况</div>
|
|||
|
|
<table class="table">
|
|||
|
|
<thead class="table__header">
|
|||
|
|
<tr class="table__tr">
|
|||
|
|
<th rowspan="2" class="table__th">APP</th>
|
|||
|
|
<th rowspan="2" class="table__th">流量占比</th>
|
|||
|
|
<th colspan="3" class="table__th">TCP会话延迟(ms)</th>
|
|||
|
|
<th colspan="3" class="table__th">缺包率</th>
|
|||
|
|
</tr>
|
|||
|
|
<tr class="table__tr">
|
|||
|
|
<th class="table__th">P50 P90 P99</th>
|
|||
|
|
<th class="table__th">均值</th>
|
|||
|
|
<th class="table__th">均值环比</th>
|
|||
|
|
<th class="table__th">P50 P90 P99</th>
|
|||
|
|
<th class="table__th">均值</th>
|
|||
|
|
<th class="table__th">均值环比</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tr class="table__tr">
|
|||
|
|
<td class="table__td">douyin</td>
|
|||
|
|
<td class="table__td">6.12%</td>
|
|||
|
|
<td class="table__td">
|
|||
|
|
<div class="td__quantile-group">
|
|||
|
|
<div class="td__quantile">
|
|||
|
|
<div class="quantile__label">
|
|||
|
|
<div class="label-box">
|
|||
|
|
<div class="quantile__point quantile__point--p50"></div>
|
|||
|
|
<div>P50</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="quantile__value">124</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="td__quantile">
|
|||
|
|
<div class="quantile__label">
|
|||
|
|
<div class="label-box">
|
|||
|
|
<div class="quantile__point quantile__point--p90"></div>
|
|||
|
|
<div>P90</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="quantile__value">143</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="td__quantile">
|
|||
|
|
<div class="quantile__label">
|
|||
|
|
<div class="label-box">
|
|||
|
|
<div class="quantile__point quantile__point--p99"></div>
|
|||
|
|
<div>P99</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="quantile__value">15</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</td>
|
|||
|
|
<td class="table__td">27.60</td>
|
|||
|
|
<td class="table__td">2.10%</td>
|
|||
|
|
<td class="table__td">
|
|||
|
|
<div class="td__quantile-group">
|
|||
|
|
<div class="td__quantile">
|
|||
|
|
<div class="quantile__label">
|
|||
|
|
<div class="label-box">
|
|||
|
|
<div class="quantile__point quantile__point--p50"></div>
|
|||
|
|
<div>P50</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="quantile__value">0.01%</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="td__quantile">
|
|||
|
|
<div class="quantile__label">
|
|||
|
|
<div class="label-box">
|
|||
|
|
<div class="quantile__point quantile__point--p90"></div>
|
|||
|
|
<div>P90</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="quantile__value">0.01%</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="td__quantile">
|
|||
|
|
<div class="quantile__label">
|
|||
|
|
<div class="label-box">
|
|||
|
|
<div class="quantile__point quantile__point--p99"></div>
|
|||
|
|
<div>P99</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="quantile__value">0.02%</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</td>
|
|||
|
|
<td class="table__td">0.05%</td>
|
|||
|
|
<td class="table__td">-0.05%</td>
|
|||
|
|
</tr>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="header2">四.链路方向流量构成</div>
|
|||
|
|
<div class="echarts-box indent-3">
|
|||
|
|
<div class="echarts">
|
|||
|
|
<div class="echarts__canvas" id="canvas4" style="width: 1100px;height: 450px;"></div>
|
|||
|
|
<div class="echarts__title">图5 域内用户访问域外服务流量流向图</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="table-box indent-3">
|
|||
|
|
<table class="table table-contain-echarts">
|
|||
|
|
<thead class="table__header">
|
|||
|
|
<tr class="table__tr">
|
|||
|
|
<th class="table__th" style="width: 100px;"></th>
|
|||
|
|
<th class="table__th" style="width: 280px">西宁</th>
|
|||
|
|
<th class="table__th" style="width: 280px;">太原</th>
|
|||
|
|
<th class="table__th" style="width: 280px;">西安</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tr class="table__tr">
|
|||
|
|
<td class="table__td">下行链路</td>
|
|||
|
|
<td class="table__td">
|
|||
|
|
<div class="echarts-box">
|
|||
|
|
<div class="echarts">
|
|||
|
|
<div class="echarts__canvas" id="canvas5"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</td>
|
|||
|
|
<td class="table__td">
|
|||
|
|
<div class="echarts-box">
|
|||
|
|
<div class="echarts">
|
|||
|
|
<div class="echarts__canvas" id="canvas6"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</td>
|
|||
|
|
<td class="table__td">
|
|||
|
|
<div class="echarts-box">
|
|||
|
|
<div class="echarts">
|
|||
|
|
<div class="echarts__canvas" id="canvas7"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr class="table__tr">
|
|||
|
|
<td class="table__td">上行链路</td>
|
|||
|
|
<td class="table__td">
|
|||
|
|
<div class="echarts-box">
|
|||
|
|
<div class="echarts">
|
|||
|
|
<div class="echarts__canvas" id="canvas8"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</td>
|
|||
|
|
<td class="table__td">
|
|||
|
|
<div class="echarts-box">
|
|||
|
|
<div class="echarts">
|
|||
|
|
<div class="echarts__canvas" id="canvas9"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</td>
|
|||
|
|
<td class="table__td">
|
|||
|
|
<div class="echarts-box">
|
|||
|
|
<div class="echarts">
|
|||
|
|
<div class="echarts__canvas" id="canvas10"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
<div class="echarts__title">图6 域内用户访问域外服务各链路TOP5APP流量占比</div>
|
|||
|
|
<div class="table-box indent-3">
|
|||
|
|
<table class="table table-contain-echarts">
|
|||
|
|
<thead class="table__header">
|
|||
|
|
<tr class="table__tr">
|
|||
|
|
<th class="table__th" style="width: 100px;"></th>
|
|||
|
|
<th class="table__th" style="width: 280px;">西宁</th>
|
|||
|
|
<th class="table__th" style="width: 280px;">太原</th>
|
|||
|
|
<th class="table__th" style="width: 280px;">西安</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tr class="table__tr">
|
|||
|
|
<td class="table__td">下行链路</td>
|
|||
|
|
<td class="table__td">
|
|||
|
|
<div class="echarts-box">
|
|||
|
|
<div class="echarts">
|
|||
|
|
<div class="echarts__canvas" id="canvas11"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</td>
|
|||
|
|
<td class="table__td">
|
|||
|
|
<div class="echarts-box">
|
|||
|
|
<div class="echarts">
|
|||
|
|
<div class="echarts__canvas" id="canvas12"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</td>
|
|||
|
|
<td class="table__td">
|
|||
|
|
<div class="echarts-box">
|
|||
|
|
<div class="echarts">
|
|||
|
|
<div class="echarts__canvas" id="canvas13"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr class="table__tr">
|
|||
|
|
<td class="table__td">上行链路</td>
|
|||
|
|
<td class="table__td">
|
|||
|
|
<div class="echarts-box">
|
|||
|
|
<div class="echarts">
|
|||
|
|
<div class="echarts__canvas" id="canvas14"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</td>
|
|||
|
|
<td class="table__td">
|
|||
|
|
<div class="echarts-box">
|
|||
|
|
<div class="echarts">
|
|||
|
|
<div class="echarts__canvas" id="canvas15"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</td>
|
|||
|
|
<td class="table__td">
|
|||
|
|
<div class="echarts-box">
|
|||
|
|
<div class="echarts">
|
|||
|
|
<div class="echarts__canvas" id="canvas16"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
<div class="echarts__legends">
|
|||
|
|
<div class="echarts__legend">
|
|||
|
|
<div class="color-block blue"></div>
|
|||
|
|
<div class="legend-text" id="currentRange6"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="echarts__legend">
|
|||
|
|
<div class="color-block green"></div>
|
|||
|
|
<div class="legend-text" id="prevRange6"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="echarts__title">图7 域内用户访问域外服务各链路访问的服务端所在Top5省份流量</div>
|
|||
|
|
</body>
|
|||
|
|
<script>
|
|||
|
|
/** 数据 begin */
|
|||
|
|
// 时间区间
|
|||
|
|
var timeRange = [1648742400, 1648828800]
|
|||
|
|
var seriesData1 = [[1646323200000,772532872894],[1646323500000,737472933103],[1646323800000,718003693762],[1646324100000,787275787118],[1646324400000,675091838555],[1646324700000,665907987145],[1646325000000,663995345084],[1646325300000,673263448146],[1646325600000,623024467477],[1646325900000,607518328769],[1646326200000,595596692291],[1646326500000,576685657915],[1646326800000,563125388840],[1646327100000,536629805389],[1646327400000,512064513301],[1646327700000,500112361755],[1646328000000,483313489075],[1646328300000,529000513941],[1646328600000,434706003334],[1646328900000,420330833357],[1646329200000,412221073080],[1646329500000,381581636955],[1646329800000,368380772263],[1646330100000,355612050222],[1646330400000,346546307434],[1646330700000,351106970704],[1646331000000,306402436164],[1646331300000,307549388296],[1646331600000,289914454618],[1646331900000,269914427899],[1646332200000,265810006551],[1646332500000,325605447693],[1646332800000,228689729283],[1646333100000,221380076104],[1646333400000,214688315185],[1646333700000,207430475082],[1646334000000,228531765558],[1646334300000,218633588553],[1646334600000,177510090490],[1646334900000,172114088332],[1646335200000,167588261185],[1646335500000,160522955738],[1646335800000,158616961652],[1646336100000,157404547208],[1646336400000,146780416292],[1646336700000,142851201793],[1646337000000,143891943824],[1646337300000,144832687528],[1646337600000,134942949909],[1646337900000,126263388287],[1646338200000,130563200859],[1646338500000,124184387098],[1646338800000,116545272633],[1646339100000,121405570250],[1646339400000,114561101206],[1646339700000,110468589545],[1646340000000,113104811845],[1646340300000,112646490470],[1646340600000,111953785239],[1646340900000,102888018727],[1646341200000,102796512378],[1646341500000,101049996649],[1646341800000,96283941675],[1646342100000,95502450781],[1646342400000,91188952241],[1646342700000,91720190187],[1646343000000,93628795245],[1646343300000,86417843281],[1646343600000,86166292795],[1646343900000,83983490611],[1646344200000,87798450663],[1646344500000,88662331578],[1646344800000,87145266635],[1646345100000,87856564892],[1646345400000,91884802839],[1646345700000,90421909864],[1646346000000,90618563208],[1646346300000,88114179946],[1646346600000,88056019830],[1646346900000,89552706480],[1646347200000,94847380620],[1646347500000,92714721441],[1646347800000,90831666011],[1646348100000,117785027484],[1646348400000,95847207702],[1646348700000,96714010066],[1646349000000,95093327595],[1646349300000,105594955186],[1646349600000,106301457552],[1646349900000,112033934697],[1646350200000,110924049081],[1646350500000,117038870948],[1646350800000,122285968342],[1646351100000,129225537263],[1646351400000,135303008087],[1646351700000,144618274688],[1646352000000,160191289955],[1646352300000,174804633925],[1646352600000,169371000210],[1646352900000,185220468936],[1646353200000,188625450543],[1646353500000,203201591624],[1646353800000,229816839313],[1646354100000,218415543727],[1646354400000,227099952017],[1646354700000,235943215456],[1646355000000,247778577722],[1646355300000,261692796377],[1646355600000,271103332032],[1646355900000,281777626596],[1646356200000,298629680799],[1646356500000,294071950673],[1646356800000,307591643611],[1646357100000,314096020387],[1646357400000,322787548616],[1646357700000,326521884163],[1646358000000,336418677250],[1646358300000,345710499037],[1646358600000,347096385973],[1646358900000,353403522514],[1646359200000,368144445750],[1646359500000,371593197939],[1646359800000,376720441131],[1646360100000,384921440707],[1646360400000,384856278322],[1646360700000,390655320977],[1646361000000,393831467047],[1646361300000,397622731052],[1646361600000,407859512345],[1646361900000,409459764011],[1646362200000,409923219718],[1646362500000,417388328374],[1646362800000,421081337847],[1646363100000,425995051530],[1646363400000,482837867511],[1646363700000,425714780866],[1646364000000,423099990656],[1646364300000,430364721344],[1646364600000,436598213078],[1646364900000,440885401830],[1646365200000,454553393946],[16463655
|
|||
|
|
var quantile1 = {
|
|||
|
|
p50: 536130030141,
|
|||
|
|
p90: 844057710428,
|
|||
|
|
p99: 969266744524
|
|||
|
|
}
|
|||
|
|
var totalTraffic1 = 587946516246
|
|||
|
|
var seriesData2 = [
|
|||
|
|
{
|
|||
|
|
name: 'douyin',
|
|||
|
|
value: 56165187441
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'wechat',
|
|||
|
|
value: 46165187441
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'kuaishou',
|
|||
|
|
value: 40165187441
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'qq',
|
|||
|
|
value: 16165187441
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'qq_web',
|
|||
|
|
value: 6165187441
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
var seriesData3 = [
|
|||
|
|
{
|
|||
|
|
name: 'douyin',
|
|||
|
|
value: 56165187441
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'wechat',
|
|||
|
|
value: 46165187441
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'kuaishou',
|
|||
|
|
value: 40165187441
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'qq',
|
|||
|
|
value: 16165187441
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'qq_web',
|
|||
|
|
value: 6165187441
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
/* 2.1 app整体流量排名 */
|
|||
|
|
var overallAppTraffic = [
|
|||
|
|
{
|
|||
|
|
app_company: 'douyin',
|
|||
|
|
bytes: 345243240041,
|
|||
|
|
rate50: 885454,
|
|||
|
|
rate90: 1987332,
|
|||
|
|
rate99: 2503297,
|
|||
|
|
rate_avg: 984710,
|
|||
|
|
rate_max: 2503297,
|
|||
|
|
rate_min: 108410
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
app_company: 'wechat',
|
|||
|
|
bytes: 245243240041,
|
|||
|
|
rate50: 885454,
|
|||
|
|
rate90: 1987332,
|
|||
|
|
rate99: 2503297,
|
|||
|
|
rate_avg: 984710,
|
|||
|
|
rate_max: 2503297,
|
|||
|
|
rate_min: 108410
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
app_company: 'aleskrhalwkei',
|
|||
|
|
bytes: 145243240041,
|
|||
|
|
rate50: 885454,
|
|||
|
|
rate90: 1987332,
|
|||
|
|
rate99: 2503297,
|
|||
|
|
rate_avg: 984710,
|
|||
|
|
rate_max: 2503297,
|
|||
|
|
rate_min: 108410
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
app_company: 'ccc',
|
|||
|
|
bytes: 140243240041,
|
|||
|
|
rate50: 885454,
|
|||
|
|
rate90: 1987332,
|
|||
|
|
rate99: 2503297,
|
|||
|
|
rate_avg: 984710,
|
|||
|
|
rate_max: 2503297,
|
|||
|
|
rate_min: 108410
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
app_company: 'douyin2',
|
|||
|
|
bytes: 115243240041,
|
|||
|
|
rate50: 885454,
|
|||
|
|
rate90: 1987332,
|
|||
|
|
rate99: 2503297,
|
|||
|
|
rate_avg: 984710,
|
|||
|
|
rate_max: 2503297,
|
|||
|
|
rate_min: 108410
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
app_company: 'douyin3',
|
|||
|
|
bytes: 114243240041,
|
|||
|
|
rate50: 885454,
|
|||
|
|
rate90: 1987332,
|
|||
|
|
rate99: 2503297,
|
|||
|
|
rate_avg: 984710,
|
|||
|
|
rate_max: 2503297,
|
|||
|
|
rate_min: 108410
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
app_company: 'douyin4',
|
|||
|
|
bytes: 75243240041,
|
|||
|
|
rate50: 885454,
|
|||
|
|
rate90: 1987332,
|
|||
|
|
rate99: 2503297,
|
|||
|
|
rate_avg: 984710,
|
|||
|
|
rate_max: 2503297,
|
|||
|
|
rate_min: 108410
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
app_company: 'douyin5',
|
|||
|
|
bytes: 55243240041,
|
|||
|
|
rate50: 885454,
|
|||
|
|
rate90: 1987332,
|
|||
|
|
rate99: 2503297,
|
|||
|
|
rate_avg: 984710,
|
|||
|
|
rate_max: 2503297,
|
|||
|
|
rate_min: 108410
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
app_company: 'douyin6',
|
|||
|
|
bytes: 45243240041,
|
|||
|
|
rate50: 885454,
|
|||
|
|
rate90: 1987332,
|
|||
|
|
rate99: 2503297,
|
|||
|
|
rate_avg: 984710,
|
|||
|
|
rate_max: 2503297,
|
|||
|
|
rate_min: 108410
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
app_company: 'douyin7',
|
|||
|
|
bytes: 15243240041,
|
|||
|
|
rate50: 885454,
|
|||
|
|
rate90: 1987332,
|
|||
|
|
rate99: 2503297,
|
|||
|
|
rate_avg: 984710,
|
|||
|
|
rate_max: 2503297,
|
|||
|
|
rate_min: 108410
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
var prevOverallAppTraffic = [
|
|||
|
|
{
|
|||
|
|
app_company: 'douyin',
|
|||
|
|
bytes: 305243240041,
|
|||
|
|
rate50: 885454,
|
|||
|
|
rate90: 1987332,
|
|||
|
|
rate99: 2503297,
|
|||
|
|
rate_avg: 984710,
|
|||
|
|
rate_max: 2503297,
|
|||
|
|
rate_min: 108410
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
app_company: 'wechat',
|
|||
|
|
bytes: 205243240041,
|
|||
|
|
rate50: 885454,
|
|||
|
|
rate90: 1987332,
|
|||
|
|
rate99: 2503297,
|
|||
|
|
rate_avg: 984710,
|
|||
|
|
rate_max: 2503297,
|
|||
|
|
rate_min: 108410
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
app_company: 'aleskrhalwkei',
|
|||
|
|
bytes: 185243240041,
|
|||
|
|
rate50: 885454,
|
|||
|
|
rate90: 1987332,
|
|||
|
|
rate99: 2503297,
|
|||
|
|
rate_avg: 984710,
|
|||
|
|
rate_max: 2503297,
|
|||
|
|
rate_min: 108410
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
app_company: 'ccc',
|
|||
|
|
bytes: 190243240041,
|
|||
|
|
rate50: 885454,
|
|||
|
|
rate90: 1987332,
|
|||
|
|
rate99: 2503297,
|
|||
|
|
rate_avg: 984710,
|
|||
|
|
rate_max: 2503297,
|
|||
|
|
rate_min: 108410
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
app_company: 'douyin2',
|
|||
|
|
bytes: 105243240041,
|
|||
|
|
rate50: 885454,
|
|||
|
|
rate90: 1987332,
|
|||
|
|
rate99: 2503297,
|
|||
|
|
rate_avg: 984710,
|
|||
|
|
rate_max: 2503297,
|
|||
|
|
rate_min: 108410
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
app_company: 'douyin3',
|
|||
|
|
bytes: 104243240041,
|
|||
|
|
rate50: 885454,
|
|||
|
|
rate90: 1987332,
|
|||
|
|
rate99: 2503297,
|
|||
|
|
rate_avg: 984710,
|
|||
|
|
rate_max: 2503297,
|
|||
|
|
rate_min: 108410
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
app_company: 'douyin4',
|
|||
|
|
bytes: 45243240041,
|
|||
|
|
rate50: 885454,
|
|||
|
|
rate90: 1987332,
|
|||
|
|
rate99: 2503297,
|
|||
|
|
rate_avg: 984710,
|
|||
|
|
rate_max: 2503297,
|
|||
|
|
rate_min: 108410
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
app_company: 'douyin5',
|
|||
|
|
bytes: 35243240041,
|
|||
|
|
rate50: 885454,
|
|||
|
|
rate90: 1987332,
|
|||
|
|
rate99: 2503297,
|
|||
|
|
rate_avg: 984710,
|
|||
|
|
rate_max: 2503297,
|
|||
|
|
rate_min: 108410
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
app_company: 'douyin6',
|
|||
|
|
bytes: 45243240041,
|
|||
|
|
rate50: 885454,
|
|||
|
|
rate90: 1987332,
|
|||
|
|
rate99: 2503297,
|
|||
|
|
rate_avg: 984710,
|
|||
|
|
rate_max: 2503297,
|
|||
|
|
rate_min: 108410
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
app_company: 'douyin7',
|
|||
|
|
bytes: 25243240041,
|
|||
|
|
rate50: 885454,
|
|||
|
|
rate90: 1987332,
|
|||
|
|
rate99: 2503297,
|
|||
|
|
rate_avg: 984710,
|
|||
|
|
rate_max: 2503297,
|
|||
|
|
rate_min: 108410
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
/* 4.1 流量流向图 */
|
|||
|
|
var data4 = [{ egress_link_direction: "xi'an", ingress_link_direction: 'taiyuan', bytes: 1234232456 }, { egress_link_direction: "taiyuan", ingress_link_direction: "xi'an", bytes: 5121311222 }, { egress_link_direction: "xi'an", ingress_link_direction: 'xining', bytes: 3365771234 }]
|
|||
|
|
|
|||
|
|
/* 4.2 */
|
|||
|
|
// 总流量
|
|||
|
|
var totalEgressTraffic = [
|
|||
|
|
{
|
|||
|
|
egress_link_direction: '西宁',
|
|||
|
|
egress_bytes: 6549687641365
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
egress_link_direction: '太原',
|
|||
|
|
egress_bytes: 4549687641365
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
egress_link_direction: '西安',
|
|||
|
|
egress_bytes: 3549687641365
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
var totalIngressTraffic = [
|
|||
|
|
{
|
|||
|
|
ingress_link_direction: '西宁',
|
|||
|
|
ingress_bytes: 6549687641365
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
ingress_link_direction: '太原',
|
|||
|
|
ingress_bytes: 4549687641365
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
ingress_link_direction: '西安',
|
|||
|
|
ingress_bytes: 3549687641365
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
// 西宁top5 app 上行
|
|||
|
|
var xiningEgressTop5AppTraffic = [
|
|||
|
|
{
|
|||
|
|
app_label: 'douyin',
|
|||
|
|
egress_bytes: 65498796845
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
app_label: 'kuaishou',
|
|||
|
|
egress_bytes: 55498796845
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
app_label: 'wechat',
|
|||
|
|
egress_bytes: 52498796845
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
app_label: 'qq',
|
|||
|
|
egress_bytes: 45498796845
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
app_label: 'baidu',
|
|||
|
|
egress_bytes: 25498796845
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
// 太原top5 app 上行
|
|||
|
|
var taiyuanEgressTop5AppTraffic = [
|
|||
|
|
{
|
|||
|
|
app_label: 'douyin',
|
|||
|
|
egress_bytes: 65498796845
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
app_label: 'kuaishou',
|
|||
|
|
egress_bytes: 55498796845
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
app_label: 'wechat',
|
|||
|
|
egress_bytes: 52498796845
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
app_label: 'qq',
|
|||
|
|
egress_bytes: 45498796845
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
app_label: 'baidu',
|
|||
|
|
egress_bytes: 25498796845
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
// 西安top5 app 上行
|
|||
|
|
var xianEgressTop5AppTraffic = [
|
|||
|
|
{
|
|||
|
|
app_label: 'douyin',
|
|||
|
|
egress_bytes: 65498796845
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
app_label: 'kuaishou',
|
|||
|
|
egress_bytes: 55498796845
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
app_label: 'wechat',
|
|||
|
|
egress_bytes: 52498796845
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
app_label: 'qq',
|
|||
|
|
egress_bytes: 45498796845
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
app_label: 'baidu',
|
|||
|
|
egress_bytes: 25498796845
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
// 西宁top5 app 下行
|
|||
|
|
var xiningIngressTop5AppTraffic = [
|
|||
|
|
{
|
|||
|
|
app_label: 'douyin',
|
|||
|
|
ingress_bytes: 65498796845
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
app_label: 'kuaishou',
|
|||
|
|
ingress_bytes: 55498796845
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
app_label: 'wechat',
|
|||
|
|
ingress_bytes: 52498796845
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
app_label: 'qq',
|
|||
|
|
ingress_bytes: 45498796845
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
app_label: 'baidu',
|
|||
|
|
ingress_bytes: 25498796845
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
// 太原top5 app 下行
|
|||
|
|
var taiyuanIngressTop5AppTraffic = [
|
|||
|
|
{
|
|||
|
|
app_label: 'douyin',
|
|||
|
|
ingress_bytes: 65498796845
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
app_label: 'kuaishou',
|
|||
|
|
ingress_bytes: 55498796845
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
app_label: 'wechat',
|
|||
|
|
ingress_bytes: 52498796845
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
app_label: 'qq',
|
|||
|
|
ingress_bytes: 45498796845
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
app_label: 'baidu',
|
|||
|
|
ingress_bytes: 25498796845
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
// 西安top5 app 下行
|
|||
|
|
var xianIngressTop5AppTraffic = [
|
|||
|
|
{
|
|||
|
|
app_label: 'douyin',
|
|||
|
|
ingress_bytes: 65498796845
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
app_label: 'kuaishou',
|
|||
|
|
ingress_bytes: 55498796845
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
app_label: 'wechat',
|
|||
|
|
ingress_bytes: 52498796845
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
app_label: 'qq',
|
|||
|
|
ingress_bytes: 45498796845
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
app_label: 'baidu',
|
|||
|
|
ingress_bytes: 25498796845
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
/* 4.3 */
|
|||
|
|
// 上一周期上行总流量
|
|||
|
|
var prevTotalEgressTraffic2 = [
|
|||
|
|
{
|
|||
|
|
egress_link_direction: '西宁',
|
|||
|
|
egress_bytes: 8549876465
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
egress_link_direction: '太原',
|
|||
|
|
egress_bytes: 7549876465
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
egress_link_direction: '西安',
|
|||
|
|
egress_bytes: 6549876465
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
// 当前周期上行总流量
|
|||
|
|
var totalEgressTraffic2 = [
|
|||
|
|
{
|
|||
|
|
egress_link_direction: '西宁',
|
|||
|
|
egress_bytes: 7549876465
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
egress_link_direction: '太原',
|
|||
|
|
egress_bytes: 6549876465
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
egress_link_direction: '西安',
|
|||
|
|
egress_bytes: 5549876465
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
// 上一周期下行总流量
|
|||
|
|
var prevTotalIngressTraffic2 = [
|
|||
|
|
{
|
|||
|
|
ingress_link_direction: '西宁',
|
|||
|
|
ingress_bytes: 6549687641365
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
ingress_link_direction: '太原',
|
|||
|
|
ingress_bytes: 4549687641365
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
ingress_link_direction: '西安',
|
|||
|
|
ingress_bytes: 3549687641365
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
// 当前周期下行总流量
|
|||
|
|
var totalIngressTraffic2 = [
|
|||
|
|
{
|
|||
|
|
ingress_link_direction: '西宁',
|
|||
|
|
ingress_bytes: 5549687641365
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
ingress_link_direction: '太原',
|
|||
|
|
ingress_bytes: 3549687641365
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
ingress_link_direction: '西安',
|
|||
|
|
ingress_bytes: 2549687641365
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
// 上一周期西宁上行总流量
|
|||
|
|
var prevXiningEgressTraffic2 = [
|
|||
|
|
{
|
|||
|
|
server_province: '福建',
|
|||
|
|
egress_bytes: 654687894551
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
server_province: '江西',
|
|||
|
|
egress_bytes: 554687894551
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
server_province: '北京',
|
|||
|
|
egress_bytes: 504687894551
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
server_province: '海南',
|
|||
|
|
egress_bytes: 254687894551
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
server_province: '河南',
|
|||
|
|
egress_bytes: 154687894551
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
// 当前周期西宁上行总流量
|
|||
|
|
var xiningEgressTraffic2 = [
|
|||
|
|
{
|
|||
|
|
server_province: '福建',
|
|||
|
|
egress_bytes: 654687894551
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
server_province: '江西',
|
|||
|
|
egress_bytes: 554687894551
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
server_province: '北京',
|
|||
|
|
egress_bytes: 504687894551
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
server_province: '海南',
|
|||
|
|
egress_bytes: 254687894551
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
server_province: '河南',
|
|||
|
|
egress_bytes: 154687894551
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
// 上一周期太原上行总流量
|
|||
|
|
var prevTaiyuanEgressTraffic2 = [
|
|||
|
|
{
|
|||
|
|
server_province: '福建',
|
|||
|
|
egress_bytes: 654687894551
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
server_province: '江西',
|
|||
|
|
egress_bytes: 554687894551
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
server_province: '北京',
|
|||
|
|
egress_bytes: 504687894551
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
server_province: '海南',
|
|||
|
|
egress_bytes: 254687894551
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
server_province: '河南',
|
|||
|
|
egress_bytes: 154687894551
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
// 当前周期太原上行总流量
|
|||
|
|
var taiyuanEgressTraffic2 = [
|
|||
|
|
{
|
|||
|
|
server_province: '福建',
|
|||
|
|
egress_bytes: 654687894551
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
server_province: '江西',
|
|||
|
|
egress_bytes: 554687894551
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
server_province: '北京',
|
|||
|
|
egress_bytes: 504687894551
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
server_province: '海南',
|
|||
|
|
egress_bytes: 254687894551
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
server_province: '河南',
|
|||
|
|
egress_bytes: 154687894551
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
// 上一周期西安上行总流量
|
|||
|
|
var prevXianEgressTraffic2 = [
|
|||
|
|
{
|
|||
|
|
server_province: '福建',
|
|||
|
|
egress_bytes: 654687894551
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
server_province: '江西',
|
|||
|
|
egress_bytes: 554687894551
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
server_province: '北京',
|
|||
|
|
egress_bytes: 504687894551
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
server_province: '海南',
|
|||
|
|
egress_bytes: 254687894551
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
server_province: '河南',
|
|||
|
|
egress_bytes: 154687894551
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
// 当前周期西安上行总流量
|
|||
|
|
var xianEgressTraffic2 = [
|
|||
|
|
{
|
|||
|
|
server_province: '福建',
|
|||
|
|
egress_bytes: 654687894551
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
server_province: '江西',
|
|||
|
|
egress_bytes: 554687894551
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
server_province: '北京',
|
|||
|
|
egress_bytes: 504687894551
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
server_province: '海南',
|
|||
|
|
egress_bytes: 254687894551
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
server_province: '河南',
|
|||
|
|
egress_bytes: 154687894551
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
// 上一周期西宁下行总流量
|
|||
|
|
var prevXiningIngressTraffic2 = [
|
|||
|
|
{
|
|||
|
|
server_province: '福建',
|
|||
|
|
ingress_bytes: 654687894551
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
server_province: '江西',
|
|||
|
|
ingress_bytes: 554687894551
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
server_province: '北京',
|
|||
|
|
ingress_bytes: 504687894551
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
server_province: '海南',
|
|||
|
|
ingress_bytes: 254687894551
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
server_province: '河南',
|
|||
|
|
ingress_bytes: 154687894551
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
// 当前周期西宁下行总流量
|
|||
|
|
var xiningIngressTraffic2 = [
|
|||
|
|
{
|
|||
|
|
server_province: '福建',
|
|||
|
|
ingress_bytes: 654687894551
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
server_province: '江西',
|
|||
|
|
ingress_bytes: 554687894551
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
server_province: '北京',
|
|||
|
|
ingress_bytes: 504687894551
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
server_province: '海南',
|
|||
|
|
ingress_bytes: 254687894551
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
server_province: '河南',
|
|||
|
|
ingress_bytes: 154687894551
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
// 上一周期太原下行总流量
|
|||
|
|
var prevTaiyuanIngressTraffic2 = [
|
|||
|
|
{
|
|||
|
|
server_province: '福建',
|
|||
|
|
ingress_bytes: 654687894551
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
server_province: '江西',
|
|||
|
|
ingress_bytes: 554687894551
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
server_province: '北京',
|
|||
|
|
ingress_bytes: 504687894551
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
server_province: '海南',
|
|||
|
|
ingress_bytes: 254687894551
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
server_province: '河南',
|
|||
|
|
ingress_bytes: 154687894551
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
// 当前周期太原下行总流量
|
|||
|
|
var taiyuanIngressTraffic2 = [
|
|||
|
|
{
|
|||
|
|
server_province: '福建',
|
|||
|
|
ingress_bytes: 654687894551
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
server_province: '江西',
|
|||
|
|
ingress_bytes: 554687894551
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
server_province: '北京',
|
|||
|
|
ingress_bytes: 504687894551
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
server_province: '海南',
|
|||
|
|
ingress_bytes: 254687894551
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
server_province: '河南',
|
|||
|
|
ingress_bytes: 154687894551
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
// 上一周期西安下行总流量
|
|||
|
|
var prevXianIngressTraffic2 = [
|
|||
|
|
{
|
|||
|
|
server_province: '福建',
|
|||
|
|
ingress_bytes: 654687894551
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
server_province: '江西',
|
|||
|
|
ingress_bytes: 554687894551
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
server_province: '北京',
|
|||
|
|
ingress_bytes: 504687894551
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
server_province: '海南',
|
|||
|
|
ingress_bytes: 254687894551
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
server_province: '河南',
|
|||
|
|
ingress_bytes: 154687894551
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
// 当前周期西安下行总流量
|
|||
|
|
var xianIngressTraffic2 = [
|
|||
|
|
{
|
|||
|
|
server_province: '福建',
|
|||
|
|
ingress_bytes: 654687894551
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
server_province: '江西',
|
|||
|
|
ingress_bytes: 554687894551
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
server_province: '北京',
|
|||
|
|
ingress_bytes: 504687894551
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
server_province: '海南',
|
|||
|
|
ingress_bytes: 254687894551
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
server_province: '河南',
|
|||
|
|
ingress_bytes: 154687894551
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
/** 数据 end */
|
|||
|
|
|
|||
|
|
|
|||
|
|
/** 内置js begin */
|
|||
|
|
/* 由于js的number精度最多到8PB-1，而实际流量达百PB级,
|
|||
|
|
所以对于byte类型数据，在java(freemarker)中除以1024后再处理；时间、数量、百分比等其他类型不变。
|
|||
|
|
*/
|
|||
|
|
/*var chartColor = ['rgb(83,112,198)', 'rgb(144,204,166)', 'rgb(250,200,88)', 'rgb(238,102,102)',
|
|||
|
|
'rgb(115,191,222)', 'rgb(59,161,114)', 'rgb(252,132,82)', 'rgb(233,124,204)',
|
|||
|
|
'rgb(153,96,180)', 'rgb(254,166,158)', 'rgb(87,203,172)', 'rgb(99,182,172)']*/
|
|||
|
|
var chartColor = ['rgb(132,202,230)', 'rgb(88,176,209)', 'rgb(133,221,214)', 'rgb(245,184,136)',
|
|||
|
|
'rgb(235,198,90)', 'rgb(237,157,138)', 'rgb(140,206,213)', 'rgb(174,214,222)',
|
|||
|
|
'rgb(153,96,180)', 'rgb(254,166,158)', 'rgb(87,203,172)', 'rgb(99,182,172)']
|
|||
|
|
var unitTypes = {
|
|||
|
|
time: 'time',
|
|||
|
|
number: 'number',
|
|||
|
|
byte: 'byte',
|
|||
|
|
bps: 'bps',
|
|||
|
|
string: 'string',
|
|||
|
|
percent: 'percent'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var numberUnit = ['', 'K', 'M', 'G', 'T', 'P', 'E']
|
|||
|
|
var byteUnit = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB']
|
|||
|
|
var bpsUnit = ['bps', 'Kbps', 'Mbps', 'Gbps', 'Tbps', 'Pbps', 'Ebps']
|
|||
|
|
var timeUnit = [ // 时间单位步进倍数，以ms为基数
|
|||
|
|
{ unit: 'ms', step: 1 },
|
|||
|
|
{ unit: 's', step: 1000 },
|
|||
|
|
{ unit: 'm', step: 60 },
|
|||
|
|
{ unit: 'h', step: 60 },
|
|||
|
|
{ unit: 'd', step: 24 }
|
|||
|
|
]
|
|||
|
|
function asciiCompute (num, offset = 0, ascii = 1000, units, dot = 2) {
|
|||
|
|
if (!num && num !== 0 && num !== '0') {
|
|||
|
|
return ['', '']
|
|||
|
|
}
|
|||
|
|
num = Number(num)
|
|||
|
|
var carry = 0
|
|||
|
|
if (num > 1) {
|
|||
|
|
var log = Math.log(num) / Math.log(ascii)
|
|||
|
|
carry = parseInt(log)
|
|||
|
|
num = num / Math.pow(ascii, carry)
|
|||
|
|
}
|
|||
|
|
if (Number.isInteger(num)) {
|
|||
|
|
return [num, units[carry + offset]]
|
|||
|
|
} else {
|
|||
|
|
return [num.toFixed(dot), units[carry + offset]]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
function numberUnitConvert (value, sourceUnit = '', targetUnit, dot = 2) {
|
|||
|
|
return asciiCompute(value, numberUnit.indexOf(sourceUnit), 1000, numberUnit, dot)
|
|||
|
|
}
|
|||
|
|
function byteUnitConvert (value, sourceUnit = 'B', targetUnit, dot = 2) {
|
|||
|
|
return asciiCompute(value, byteUnit.indexOf(sourceUnit), 1024, byteUnit, dot)
|
|||
|
|
}
|
|||
|
|
function bpsUnitConvert (value, sourceUnit = 'bps', targetUnit, dot = 2) {
|
|||
|
|
return asciiCompute(value, bpsUnit.indexOf(sourceUnit), 1000, bpsUnit, dot)
|
|||
|
|
}
|
|||
|
|
function timeUnitFormatter (time, sourceUnit = 'ms', targetUnit, dot = 2) {
|
|||
|
|
if (time === '' || time instanceof Array || isNaN(time)) {
|
|||
|
|
return [0, sourceUnit]
|
|||
|
|
}
|
|||
|
|
var sourceIndex = -1
|
|||
|
|
var targetIndex = -1
|
|||
|
|
timeUnit.forEach((t, i) => {
|
|||
|
|
sourceUnit === t.unit && (sourceIndex = i)
|
|||
|
|
targetUnit && targetUnit === t.unit && (targetIndex = i)
|
|||
|
|
})
|
|||
|
|
var multi = 1
|
|||
|
|
var result = parseFloat(time)
|
|||
|
|
if (targetIndex < 0) {
|
|||
|
|
while (sourceIndex < timeUnit.length - 1 && result > timeUnit[sourceIndex + 1].step) {
|
|||
|
|
sourceIndex++
|
|||
|
|
multi = timeUnit[sourceIndex].step
|
|||
|
|
result /= multi
|
|||
|
|
}
|
|||
|
|
return [multi === 1 ? result : result.toFixed(dot), timeUnit[sourceIndex].unit]
|
|||
|
|
} else {
|
|||
|
|
timeUnit.forEach((s, i) => {
|
|||
|
|
if (i <= targetIndex) {
|
|||
|
|
multi *= s.step
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
result /= multi
|
|||
|
|
return [result.toFixed(dot), targetUnit]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
function unitConvert (value, unitType, sourceUnit, targetUnit, dot = 2) {
|
|||
|
|
if (unitType === unitTypes.string) {
|
|||
|
|
if (value) {
|
|||
|
|
if (typeof value === 'string') {
|
|||
|
|
return [value, '']
|
|||
|
|
} else {
|
|||
|
|
return ['-', '']
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
return ['-', '']
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (!value && value !== 0) {
|
|||
|
|
return ['-', '']
|
|||
|
|
} else {
|
|||
|
|
switch (unitType) {
|
|||
|
|
case unitTypes.time: {
|
|||
|
|
return timeUnitFormatter(value, sourceUnit, targetUnit, dot)
|
|||
|
|
}
|
|||
|
|
case unitTypes.percent: {
|
|||
|
|
return [(Number(value) * 100).toFixed(dot), '%']
|
|||
|
|
}
|
|||
|
|
case unitTypes.number: {
|
|||
|
|
return numberUnitConvert(value, sourceUnit, targetUnit, dot)
|
|||
|
|
}
|
|||
|
|
case unitTypes.byte: {
|
|||
|
|
return byteUnitConvert(value, sourceUnit, targetUnit, dot)
|
|||
|
|
}
|
|||
|
|
case unitTypes.bps: {
|
|||
|
|
return bpsUnitConvert(value, sourceUnit, targetUnit, dot)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
function getUnitType (column) {
|
|||
|
|
if (column) {
|
|||
|
|
switch (column.toLowerCase()) {
|
|||
|
|
case 'time': {
|
|||
|
|
return unitTypes.time
|
|||
|
|
}
|
|||
|
|
case 'bytes': {
|
|||
|
|
return unitTypes.byte
|
|||
|
|
}
|
|||
|
|
case 'sessions':
|
|||
|
|
default: {
|
|||
|
|
return unitTypes.number
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
return unitTypes.number
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
function valueToRangeValue (value, unitType) {
|
|||
|
|
var values = unitConvert(value, unitType)
|
|||
|
|
if (values[0] || values[0] === 0) {
|
|||
|
|
switch (unitType) {
|
|||
|
|
case unitTypes.time: {
|
|||
|
|
if (values[0] < 1) {
|
|||
|
|
return ['<1', 'ms']
|
|||
|
|
}
|
|||
|
|
break
|
|||
|
|
}
|
|||
|
|
case unitTypes.percent: {
|
|||
|
|
if (values[0] < 0.01) {
|
|||
|
|
return ['<0.01', '%']
|
|||
|
|
}
|
|||
|
|
break
|
|||
|
|
}
|
|||
|
|
default: break
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return values
|
|||
|
|
}
|
|||
|
|
// 十位数的时间戳
|
|||
|
|
function timestampToStr (timestamp) {
|
|||
|
|
var time = new Date(timestamp * 1000)
|
|||
|
|
var year = time.getFullYear(),
|
|||
|
|
month = time.getMonth() + 1 , //月份是从0开始的
|
|||
|
|
day = time.getDate(),
|
|||
|
|
hour = time.getHours(),
|
|||
|
|
minute = time.getMinutes(),
|
|||
|
|
second = time.getSeconds()
|
|||
|
|
return year + '-' + add0(month) + '-' + add0(day) + ' ' + add0(hour) + ':' + add0(minute)
|
|||
|
|
}
|
|||
|
|
function add0 (m) {
|
|||
|
|
return m < 10 ? '0' + m: m
|
|||
|
|
}
|
|||
|
|
function isWholeDay (_timeRange) {
|
|||
|
|
var _timeRangeStrStart = timestampToStr(_timeRange[0])
|
|||
|
|
var _timeOffset = _timeRange[1] - _timeRange[0]
|
|||
|
|
return (_timeOffset === 86400 || _timeOffset === 86399) && _timeRangeStrStart.indexOf('00:00') > -1
|
|||
|
|
}
|
|||
|
|
/** 内置js end */
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 计算出前三个周期的时间戳范围
|
|||
|
|
var timeOffset = timeRange[1] - timeRange[0]
|
|||
|
|
var wholeTimeOffset = [60 * 60 - 1, 60 * 60 * 24 - 1, 60 * 60 * 24 * 7 - 1]
|
|||
|
|
if (wholeTimeOffset.indexOf(timeOffset) > -1) {
|
|||
|
|
timeOffset++
|
|||
|
|
}
|
|||
|
|
var prevTimeRange = [timeRange[0] - timeOffset, timeRange[1] - timeOffset]
|
|||
|
|
var pprevTimeRange = [prevTimeRange[0] - timeOffset, prevTimeRange[1] - timeOffset]
|
|||
|
|
var ppprevTimeRange = [pprevTimeRange[0] - timeOffset, pprevTimeRange[1] - timeOffset]
|
|||
|
|
// 填充时间
|
|||
|
|
function initTimeRange () {
|
|||
|
|
var currentRange0 = document.getElementById('currentRange0')
|
|||
|
|
var currentRange6 = document.getElementById('currentRange6')
|
|||
|
|
var prevRange6 = document.getElementById('prevRange6')
|
|||
|
|
var currentRangeStr = ''
|
|||
|
|
var prevRangeStr = ''
|
|||
|
|
if (isWholeDay(timeRange)) {
|
|||
|
|
currentRangeStr = timestampToStr(timeRange[0]).substring(0, 10)
|
|||
|
|
prevRangeStr = timestampToStr(prevTimeRange[0]).substring(0, 10)
|
|||
|
|
} else {
|
|||
|
|
currentRangeStr = timestampToStr(timeRange[0]) + ' -- ' + timestampToStr(timeRange[1])
|
|||
|
|
prevRangeStr = timestampToStr(prevTimeRange[0]) + ' -- ' + timestampToStr(prevTimeRange[1])
|
|||
|
|
}
|
|||
|
|
currentRange0.innerText = currentRangeStr
|
|||
|
|
currentRange6.innerText = currentRangeStr
|
|||
|
|
prevRange6.innerText = prevRangeStr
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var unit1 = 'Kbps'
|
|||
|
|
function initEcharts1 () {
|
|||
|
|
var myChart = echarts.init(document.getElementById('canvas1'))
|
|||
|
|
var option = {
|
|||
|
|
color: chartColor,
|
|||
|
|
animation: false,
|
|||
|
|
grid: {
|
|||
|
|
left: 100,
|
|||
|
|
right: 120,
|
|||
|
|
bottom: 25,
|
|||
|
|
top: 40
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'time',
|
|||
|
|
maxInterval: 3600000,
|
|||
|
|
axisLabel: {
|
|||
|
|
formatter: '{HH}:{mm}'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
splitLine: { show: false },
|
|||
|
|
offset: 10,
|
|||
|
|
axisLabel: {
|
|||
|
|
formatter (params) {
|
|||
|
|
return unitConvert(params, unitTypes.bps, unit1).join(' ')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
visualMap: {
|
|||
|
|
show: false,
|
|||
|
|
pieces: [
|
|||
|
|
{
|
|||
|
|
gt: 0,
|
|||
|
|
lte: quantile1.p50,
|
|||
|
|
color: 'rgb(251,219,15)'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
gt: quantile1.p50,
|
|||
|
|
lte: quantile1.p90,
|
|||
|
|
color: 'rgb(252,125,2)'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
gt: quantile1.p90,
|
|||
|
|
lte: quantile1.p99,
|
|||
|
|
color: 'rgb(253,1,0)'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
gt: quantile1.p99,
|
|||
|
|
color: 'rgb(170,6,159)'
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
outOfRange: {
|
|||
|
|
color: 'rgb(153,153,153)'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: {
|
|||
|
|
type: 'line',
|
|||
|
|
symbol: 'none',
|
|||
|
|
data: seriesData1,
|
|||
|
|
markLine: {
|
|||
|
|
silent: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: 'rgb(153,153,153)'
|
|||
|
|
},
|
|||
|
|
symbol: 'none',
|
|||
|
|
label: {
|
|||
|
|
formatter (params) {
|
|||
|
|
var arr = unitConvert(params.value, unitTypes.bps, unit1).join(' ')
|
|||
|
|
var desc = ''
|
|||
|
|
switch (params.dataIndex) {
|
|||
|
|
case 0: {
|
|||
|
|
desc = 'P50'
|
|||
|
|
break
|
|||
|
|
}
|
|||
|
|
case 1: {
|
|||
|
|
desc = 'P90'
|
|||
|
|
break
|
|||
|
|
}
|
|||
|
|
case 2: {
|
|||
|
|
desc = 'P99'
|
|||
|
|
break
|
|||
|
|
}
|
|||
|
|
default: break
|
|||
|
|
}
|
|||
|
|
return arr + ' (' + desc + ')'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: [
|
|||
|
|
{
|
|||
|
|
yAxis: quantile1.p50
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
yAxis: quantile1.p90
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
yAxis: quantile1.p99
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
myChart.setOption(option)
|
|||
|
|
document.getElementById('imgCanvas1').src = myChart.getDataURL({pixelRatio: 1})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var topNTotalTraffic2 = 0
|
|||
|
|
seriesData2.forEach(d => { topNTotalTraffic2 += d.value })
|
|||
|
|
seriesData2.push(
|
|||
|
|
{
|
|||
|
|
name: 'Others',
|
|||
|
|
value: totalTraffic1 - topNTotalTraffic2
|
|||
|
|
}
|
|||
|
|
)
|
|||
|
|
function initEcharts2 () {
|
|||
|
|
var myChart = echarts.init(document.getElementById('canvas2'))
|
|||
|
|
var option = {
|
|||
|
|
legend: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
color: chartColor,
|
|||
|
|
animation: false,
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
type: 'pie',
|
|||
|
|
radius: [60, 100],
|
|||
|
|
data: seriesData2,
|
|||
|
|
label: {
|
|||
|
|
formatter: '{b} {d}%',
|
|||
|
|
fontSize: 12
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
borderWidth: 1,
|
|||
|
|
borderColor: 'white'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
myChart.setOption(option)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var topNTotalTraffic3 = 0
|
|||
|
|
seriesData3.forEach(d => { topNTotalTraffic3 += d.value })
|
|||
|
|
seriesData3.push(
|
|||
|
|
{
|
|||
|
|
name: 'Others',
|
|||
|
|
value: totalTraffic1 - topNTotalTraffic3
|
|||
|
|
}
|
|||
|
|
)
|
|||
|
|
function initEcharts3 () {
|
|||
|
|
var myChart = echarts.init(document.getElementById('canvas3'))
|
|||
|
|
var option = {
|
|||
|
|
legend: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
color: chartColor,
|
|||
|
|
animation: false,
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
type: 'pie',
|
|||
|
|
radius: [60, 100],
|
|||
|
|
data: seriesData3,
|
|||
|
|
label: {
|
|||
|
|
formatter: '{b} {d}%',
|
|||
|
|
fontSize: 12
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
borderWidth: 1,
|
|||
|
|
borderColor: 'white'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
myChart.setOption(option)
|
|||
|
|
}
|
|||
|
|
var seriesData4 = []
|
|||
|
|
var linksData4 = []
|
|||
|
|
data4.forEach(d => {
|
|||
|
|
var hasEgress = seriesData4.some(d4 => d4.name === 'Egress-' + d.egress_link_direction)
|
|||
|
|
var hasIngress = seriesData4.some(d4 => d4.name === 'Ingress-' + d.ingress_link_direction)
|
|||
|
|
if (!hasEgress) {
|
|||
|
|
seriesData4.push({ name: 'Egress-' + d.egress_link_direction })
|
|||
|
|
}
|
|||
|
|
if (!hasIngress) {
|
|||
|
|
seriesData4.push({ name: 'Ingress-' + d.ingress_link_direction })
|
|||
|
|
}
|
|||
|
|
linksData4.push({
|
|||
|
|
source: 'Egress-' + d.egress_link_direction,
|
|||
|
|
target: 'Ingress-' + d.ingress_link_direction,
|
|||
|
|
value: d.bytes
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
function initEcharts4 () {
|
|||
|
|
var myChart = echarts.init(document.getElementById('canvas4'))
|
|||
|
|
var option = {
|
|||
|
|
animation: false,
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
type: 'sankey',
|
|||
|
|
data: seriesData4,
|
|||
|
|
links: linksData4,
|
|||
|
|
top: 3,
|
|||
|
|
bottom: 3,
|
|||
|
|
right: 100,
|
|||
|
|
left: 5,
|
|||
|
|
label: {
|
|||
|
|
position: 'right'
|
|||
|
|
},
|
|||
|
|
levels: [
|
|||
|
|
{
|
|||
|
|
depth: 0,
|
|||
|
|
itemStyle: {
|
|||
|
|
color: chartColor[0]
|
|||
|
|
},
|
|||
|
|
lineStyle: {
|
|||
|
|
color: 'gradient'
|
|||
|
|
}
|
|||
|
|
}, {
|
|||
|
|
depth: 1,
|
|||
|
|
itemStyle: {
|
|||
|
|
color: chartColor[3]
|
|||
|
|
},
|
|||
|
|
lineStyle: {
|
|||
|
|
color: 'gradient'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
myChart.setOption(option)
|
|||
|
|
}
|
|||
|
|
// 西宁下行
|
|||
|
|
function initEcharts5 () {
|
|||
|
|
var myChart = echarts.init(document.getElementById('canvas5'))
|
|||
|
|
var option = {
|
|||
|
|
animation: false,
|
|||
|
|
grid: {
|
|||
|
|
top: 30,
|
|||
|
|
bottom: 35,
|
|||
|
|
right: 20,
|
|||
|
|
left: 70
|
|||
|
|
},
|
|||
|
|
color: ['rgb(115,191,222)'],
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
data: xiningIngressTop5AppTraffic.map(d => d.app_label),
|
|||
|
|
axisLabel: {
|
|||
|
|
interval: 0,
|
|||
|
|
rotate: 20,
|
|||
|
|
fontSize: 12
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
axisLabel: {
|
|||
|
|
formatter (value) {
|
|||
|
|
return unitConvert(value, unitTypes.percent).join('')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
data: xiningIngressTop5AppTraffic.map(d => d.ingress_bytes / totalIngressTraffic.find(t => t.ingress_link_direction === '西宁').ingress_bytes),
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 28
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
myChart.setOption(option)
|
|||
|
|
}
|
|||
|
|
// 太原下行
|
|||
|
|
function initEcharts6 () {
|
|||
|
|
var myChart = echarts.init(document.getElementById('canvas6'))
|
|||
|
|
var option = {
|
|||
|
|
animation: false,
|
|||
|
|
grid: {
|
|||
|
|
top: 30,
|
|||
|
|
bottom: 35,
|
|||
|
|
right: 20,
|
|||
|
|
left: 70
|
|||
|
|
},
|
|||
|
|
color: ['rgb(115,191,222)'],
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
data: taiyuanIngressTop5AppTraffic.map(d => d.app_label),
|
|||
|
|
axisLabel: {
|
|||
|
|
interval: 0,
|
|||
|
|
rotate: 20,
|
|||
|
|
fontSize: 12
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
axisLabel: {
|
|||
|
|
formatter (value) {
|
|||
|
|
return unitConvert(value, unitTypes.percent).join('')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
data: taiyuanIngressTop5AppTraffic.map(d => d.ingress_bytes / totalIngressTraffic.find(t => t.ingress_link_direction === '太原').ingress_bytes),
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 28
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
myChart.setOption(option)
|
|||
|
|
}
|
|||
|
|
// 西安下行
|
|||
|
|
function initEcharts7 () {
|
|||
|
|
var myChart = echarts.init(document.getElementById('canvas7'))
|
|||
|
|
var option = {
|
|||
|
|
animation: false,
|
|||
|
|
grid: {
|
|||
|
|
top: 30,
|
|||
|
|
bottom: 35,
|
|||
|
|
right: 20,
|
|||
|
|
left: 70
|
|||
|
|
},
|
|||
|
|
color: ['rgb(115,191,222)'],
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
data: xianIngressTop5AppTraffic.map(d => d.app_label),
|
|||
|
|
axisLabel: {
|
|||
|
|
interval: 0,
|
|||
|
|
rotate: 20,
|
|||
|
|
fontSize: 12
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
axisLabel: {
|
|||
|
|
formatter (value) {
|
|||
|
|
return unitConvert(value, unitTypes.percent).join('')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
data: xianIngressTop5AppTraffic.map(d => d.ingress_bytes / totalIngressTraffic.find(t => t.ingress_link_direction === '西安').ingress_bytes),
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 28
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
myChart.setOption(option)
|
|||
|
|
}
|
|||
|
|
// 西宁上行
|
|||
|
|
function initEcharts8 () {
|
|||
|
|
var myChart = echarts.init(document.getElementById('canvas8'))
|
|||
|
|
var option = {
|
|||
|
|
animation: false,
|
|||
|
|
grid: {
|
|||
|
|
top: 30,
|
|||
|
|
bottom: 35,
|
|||
|
|
right: 20,
|
|||
|
|
left: 70
|
|||
|
|
},
|
|||
|
|
color: ['rgb(115,191,222)'],
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
data: xiningEgressTop5AppTraffic.map(d => d.app_label),
|
|||
|
|
axisLabel: {
|
|||
|
|
interval: 0,
|
|||
|
|
rotate: 20,
|
|||
|
|
fontSize: 12
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
axisLabel: {
|
|||
|
|
formatter (value) {
|
|||
|
|
return unitConvert(value, unitTypes.percent).join('')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
data: xiningEgressTop5AppTraffic.map(d => d.egress_bytes / totalEgressTraffic.find(t => t.egress_link_direction === '西宁').egress_bytes),
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 28
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
myChart.setOption(option)
|
|||
|
|
}
|
|||
|
|
// 太原上行
|
|||
|
|
function initEcharts9 () {
|
|||
|
|
var myChart = echarts.init(document.getElementById('canvas9'))
|
|||
|
|
var option = {
|
|||
|
|
animation: false,
|
|||
|
|
color: ['rgb(115,191,222)'],
|
|||
|
|
grid: {
|
|||
|
|
top: 30,
|
|||
|
|
bottom: 35,
|
|||
|
|
right: 20,
|
|||
|
|
left: 70
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
data: taiyuanEgressTop5AppTraffic.map(d => d.app_label),
|
|||
|
|
axisLabel: {
|
|||
|
|
interval: 0,
|
|||
|
|
rotate: 20,
|
|||
|
|
fontSize: 12
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
axisLabel: {
|
|||
|
|
formatter (value) {
|
|||
|
|
return unitConvert(value, unitTypes.percent).join('')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
data: taiyuanEgressTop5AppTraffic.map(d => d.egress_bytes / totalEgressTraffic.find(t => t.egress_link_direction === '太原').egress_bytes),
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 28
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
myChart.setOption(option)
|
|||
|
|
}
|
|||
|
|
// 西安上行
|
|||
|
|
function initEcharts10 () {
|
|||
|
|
var myChart = echarts.init(document.getElementById('canvas10'))
|
|||
|
|
var option = {
|
|||
|
|
animation: false,
|
|||
|
|
color: ['rgb(115,191,222)'],
|
|||
|
|
grid: {
|
|||
|
|
top: 30,
|
|||
|
|
bottom: 35,
|
|||
|
|
right: 20,
|
|||
|
|
left: 70
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
data: xianEgressTop5AppTraffic.map(d => d.app_label),
|
|||
|
|
axisLabel: {
|
|||
|
|
interval: 0,
|
|||
|
|
rotate: 20,
|
|||
|
|
fontSize: 12
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
axisLabel: {
|
|||
|
|
formatter (value) {
|
|||
|
|
return unitConvert(value, unitTypes.percent).join('')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
data: xianEgressTop5AppTraffic.map(d => d.egress_bytes / totalEgressTraffic.find(t => t.egress_link_direction === '西安').egress_bytes),
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 28
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
myChart.setOption(option)
|
|||
|
|
}
|
|||
|
|
// 西宁下行
|
|||
|
|
function initEcharts11 () {
|
|||
|
|
var myChart = echarts.init(document.getElementById('canvas11'))
|
|||
|
|
var option = {
|
|||
|
|
animation: false,
|
|||
|
|
color: [chartColor[1], chartColor[6]],
|
|||
|
|
grid: {
|
|||
|
|
top: 30,
|
|||
|
|
bottom: 35,
|
|||
|
|
right: 20,
|
|||
|
|
left: 70
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
data: xiningIngressTraffic2.map(d => d.server_province),
|
|||
|
|
axisLabel: {
|
|||
|
|
interval: 0,
|
|||
|
|
rotate: 20,
|
|||
|
|
fontSize: 12
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
axisLabel: {
|
|||
|
|
formatter (value) {
|
|||
|
|
return unitConvert(value, unitTypes.percent).join('')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
data: xiningIngressTraffic2.map(d => d.ingress_bytes / totalIngressTraffic2.find(t => t.ingress_link_direction === '西宁').ingress_bytes),
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 14
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
data: prevXiningIngressTraffic2.map(d => d.ingress_bytes / prevTotalIngressTraffic2.find(t => t.ingress_link_direction === '西宁').ingress_bytes),
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 14
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
myChart.setOption(option)
|
|||
|
|
}
|
|||
|
|
// 太原下行
|
|||
|
|
function initEcharts12 () {
|
|||
|
|
var myChart = echarts.init(document.getElementById('canvas12'))
|
|||
|
|
var option = {
|
|||
|
|
animation: false,
|
|||
|
|
color: [chartColor[1], chartColor[6]],
|
|||
|
|
grid: {
|
|||
|
|
top: 30,
|
|||
|
|
bottom: 35,
|
|||
|
|
right: 20,
|
|||
|
|
left: 70
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
data: taiyuanIngressTraffic2.map(d => d.server_province),
|
|||
|
|
axisLabel: {
|
|||
|
|
interval: 0,
|
|||
|
|
rotate: 20,
|
|||
|
|
fontSize: 12
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
axisLabel: {
|
|||
|
|
formatter (value) {
|
|||
|
|
return unitConvert(value, unitTypes.percent).join('')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
data: taiyuanIngressTraffic2.map(d => d.ingress_bytes / totalIngressTraffic2.find(t => t.ingress_link_direction === '太原').ingress_bytes),
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 14
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
data: prevTaiyuanIngressTraffic2.map(d => d.ingress_bytes / prevTotalIngressTraffic2.find(t => t.ingress_link_direction === '太原').ingress_bytes),
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 14
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
myChart.setOption(option)
|
|||
|
|
}
|
|||
|
|
// 西安下行
|
|||
|
|
function initEcharts13 () {
|
|||
|
|
var myChart = echarts.init(document.getElementById('canvas13'))
|
|||
|
|
var option = {
|
|||
|
|
animation: false,
|
|||
|
|
color: [chartColor[1], chartColor[6]],
|
|||
|
|
grid: {
|
|||
|
|
top: 30,
|
|||
|
|
bottom: 35,
|
|||
|
|
right: 20,
|
|||
|
|
left: 70
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
data: xianIngressTraffic2.map(d => d.server_province),
|
|||
|
|
axisLabel: {
|
|||
|
|
interval: 0,
|
|||
|
|
rotate: 20,
|
|||
|
|
fontSize: 12
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
axisLabel: {
|
|||
|
|
formatter (value) {
|
|||
|
|
return unitConvert(value, unitTypes.percent).join('')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
data: xianIngressTraffic2.map(d => d.ingress_bytes / totalIngressTraffic2.find(t => t.ingress_link_direction === '西安').ingress_bytes),
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 14
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
data: prevXianIngressTraffic2.map(d => d.ingress_bytes / prevTotalIngressTraffic2.find(t => t.ingress_link_direction === '西安').ingress_bytes),
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 14
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
myChart.setOption(option)
|
|||
|
|
}
|
|||
|
|
// 西宁上行
|
|||
|
|
function initEcharts14 () {
|
|||
|
|
var myChart = echarts.init(document.getElementById('canvas14'))
|
|||
|
|
var option = {
|
|||
|
|
animation: false,
|
|||
|
|
color: [chartColor[1], chartColor[6]],
|
|||
|
|
grid: {
|
|||
|
|
top: 30,
|
|||
|
|
bottom: 35,
|
|||
|
|
right: 20,
|
|||
|
|
left: 70
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
data: xiningEgressTraffic2.map(d => d.server_province),
|
|||
|
|
axisLabel: {
|
|||
|
|
interval: 0,
|
|||
|
|
rotate: 20,
|
|||
|
|
fontSize: 12
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
axisLabel: {
|
|||
|
|
formatter (value) {
|
|||
|
|
return unitConvert(value, unitTypes.percent).join('')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
data: xiningEgressTraffic2.map(d => d.egress_bytes / totalEgressTraffic2.find(t => t.egress_link_direction === '西宁').egress_bytes),
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 14
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
data: prevXiningEgressTraffic2.map(d => d.egress_bytes / prevTotalEgressTraffic2.find(t => t.egress_link_direction === '西宁').egress_bytes),
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 14
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
myChart.setOption(option)
|
|||
|
|
}
|
|||
|
|
// 太原上行
|
|||
|
|
function initEcharts15 () {
|
|||
|
|
var myChart = echarts.init(document.getElementById('canvas15'))
|
|||
|
|
var option = {
|
|||
|
|
animation: false,
|
|||
|
|
color: [chartColor[1], chartColor[6]],
|
|||
|
|
grid: {
|
|||
|
|
top: 30,
|
|||
|
|
bottom: 35,
|
|||
|
|
right: 20,
|
|||
|
|
left: 70
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
data: taiyuanEgressTraffic2.map(d => d.server_province),
|
|||
|
|
axisLabel: {
|
|||
|
|
interval: 0,
|
|||
|
|
rotate: 20,
|
|||
|
|
fontSize: 12
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
axisLabel: {
|
|||
|
|
formatter (value) {
|
|||
|
|
return unitConvert(value, unitTypes.percent).join('')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
data: taiyuanEgressTraffic2.map(d => d.egress_bytes / totalEgressTraffic2.find(t => t.egress_link_direction === '太原').egress_bytes),
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 14
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
data: prevTaiyuanEgressTraffic2.map(d => d.egress_bytes / prevTotalEgressTraffic2.find(t => t.egress_link_direction === '太原').egress_bytes),
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 14
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
myChart.setOption(option)
|
|||
|
|
}
|
|||
|
|
// 西宁上行
|
|||
|
|
function initEcharts16 () {
|
|||
|
|
var myChart = echarts.init(document.getElementById('canvas16'))
|
|||
|
|
var option = {
|
|||
|
|
animation: false,
|
|||
|
|
color: [chartColor[1], chartColor[6]],
|
|||
|
|
grid: {
|
|||
|
|
top: 30,
|
|||
|
|
bottom: 35,
|
|||
|
|
right: 20,
|
|||
|
|
left: 70
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
data: xianEgressTraffic2.map(d => d.server_province),
|
|||
|
|
axisLabel: {
|
|||
|
|
interval: 0,
|
|||
|
|
rotate: 20,
|
|||
|
|
fontSize: 12
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
axisLabel: {
|
|||
|
|
formatter (value) {
|
|||
|
|
return unitConvert(value, unitTypes.percent).join('')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
data: xianEgressTraffic2.map(d => d.egress_bytes / totalEgressTraffic2.find(t => t.egress_link_direction === '西安').egress_bytes),
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 14
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
data: prevXianEgressTraffic2.map(d => d.egress_bytes / prevTotalEgressTraffic2.find(t => t.egress_link_direction === '西安').egress_bytes),
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 14
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
myChart.setOption(option)
|
|||
|
|
}
|
|||
|
|
// APP流量情况折线图
|
|||
|
|
var categoryData17 = overallAppTraffic.map(t => t.app_company)
|
|||
|
|
var barSeriesData17 = overallAppTraffic.map(t => t.bytes)
|
|||
|
|
var lineSeriesData17 = overallAppTraffic.map(t => {
|
|||
|
|
var findData = prevOverallAppTraffic.find(pt => pt.app_company === t.app_company)
|
|||
|
|
if (findData) {
|
|||
|
|
return parseFloat(((t.bytes - findData.bytes) / parseFloat(findData.bytes) * 100).toFixed(2))
|
|||
|
|
} else {
|
|||
|
|
return 0
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
var copyLineSeriesData17 = [...lineSeriesData17]
|
|||
|
|
copyLineSeriesData17.sort((a, b) => a - b)
|
|||
|
|
var lineMin17 = copyLineSeriesData17[0]
|
|||
|
|
var lineMax17 = copyLineSeriesData17[copyLineSeriesData17.length - 1]
|
|||
|
|
function initEcharts17 () {
|
|||
|
|
var myChart = echarts.init(document.getElementById('canvas17'))
|
|||
|
|
var option = {
|
|||
|
|
animation: false,
|
|||
|
|
grid: {
|
|||
|
|
top: 50,
|
|||
|
|
bottom: 25,
|
|||
|
|
right: 40,
|
|||
|
|
left: 70
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
show: true,
|
|||
|
|
top: 'top',
|
|||
|
|
left: 'left'
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
data: categoryData17,
|
|||
|
|
axisLabel: {
|
|||
|
|
interval: 0,
|
|||
|
|
fontSize: 12
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
yAxis: [
|
|||
|
|
{
|
|||
|
|
name: '流量',
|
|||
|
|
nameTextStyle: {
|
|||
|
|
color: 'transparent'
|
|||
|
|
},
|
|||
|
|
type: 'value',
|
|||
|
|
axisLabel: {
|
|||
|
|
formatter (value) {
|
|||
|
|
return unitConvert(value, unitTypes.byte).join('')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
show: false,
|
|||
|
|
name: '环比',
|
|||
|
|
type: 'value',
|
|||
|
|
min: lineMin17 - (lineMax17 - lineMin17),
|
|||
|
|
max: lineMax17 + (lineMax17 - lineMin17)
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '流量',
|
|||
|
|
data: barSeriesData17,
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 40,
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
formatter: function (param) {
|
|||
|
|
return unitConvert(param.value, unitTypes.byte).join('')
|
|||
|
|
},
|
|||
|
|
color: 'rgb(59,162,201)',
|
|||
|
|
textBorderColor: 'white',
|
|||
|
|
textBorderWidth: 3,
|
|||
|
|
position: 'top'
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
color: 'rgb(59,162,201)'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
yAxisIndex: 1,
|
|||
|
|
name: '环比',
|
|||
|
|
data: lineSeriesData17,
|
|||
|
|
type: 'line',
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
formatter: function (param) {
|
|||
|
|
return param.value.toFixed(2) + '%'
|
|||
|
|
},
|
|||
|
|
textBorderColor: 'white',
|
|||
|
|
textBorderWidth: 3,
|
|||
|
|
color: 'rgb(99,182,172)'
|
|||
|
|
},
|
|||
|
|
lineStyle: {
|
|||
|
|
type: 'dashed'
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
color: 'rgb(99,182,172)'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
myChart.setOption(option)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
initEcharts1()
|
|||
|
|
initEcharts2()
|
|||
|
|
initEcharts3()
|
|||
|
|
initEcharts4()
|
|||
|
|
initEcharts5()
|
|||
|
|
initEcharts6()
|
|||
|
|
initEcharts7()
|
|||
|
|
initEcharts8()
|
|||
|
|
initEcharts9()
|
|||
|
|
initEcharts10()
|
|||
|
|
initEcharts11()
|
|||
|
|
initEcharts12()
|
|||
|
|
initEcharts13()
|
|||
|
|
initEcharts14()
|
|||
|
|
initEcharts15()
|
|||
|
|
initEcharts16()
|
|||
|
|
initEcharts17()
|
|||
|
|
initTimeRange()
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
</html>
|