2644 lines
95 KiB
HTML
2644 lines
95 KiB
HTML
<html><head>
|
||
<meta charset="UTF-8">
|
||
<title>字节跳动网络服务质量监测报告(IDC精简版)</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;
|
||
flex-wrap: wrap;
|
||
}
|
||
.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">字节跳动网络服务质量监测报告(IDC精简版)<span class="header1__time" id="currentRange0">2022-04-28</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>
|
||
<th class="table__th">总流量环比</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody><tr class="table__tr">
|
||
<td class="table__td">89.27 Gbps</td>
|
||
<td class="table__td">11.77 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">103.95 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">124.58 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">159.82 Gbps</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="table__td">501.66 Gbps</td>
|
||
<td class="table__td">
|
||
-29%
|
||
</td>
|
||
<td class="table__td">864.69 TB</td>
|
||
<td class="table__td">27%</td>
|
||
<td class="table__td">
|
||
184%
|
||
</td>
|
||
</tr>
|
||
</tbody></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 域外访问字节跳动服务的服务质量</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>
|
||
<tbody><tr class="table__tr">
|
||
<td class="table__td">TCP会话创建延迟</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">100 ms</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">106 ms</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">108 ms</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="table__td">108 ms</td>
|
||
<td class="table__td">99.84 ms</td>
|
||
<td class="table__td">
|
||
0%
|
||
</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">0%</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">1%</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">1%</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="table__td">1%</td>
|
||
<td class="table__td">0%</td>
|
||
<td class="table__td">
|
||
0%
|
||
</td>
|
||
</tr>
|
||
</tbody></table>
|
||
</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>
|
||
<tbody><tr class="table__tr">
|
||
<td class="table__td">TCP会话创建延迟</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">74 ms</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">80 ms</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">83.27 ms</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="table__td">84 ms</td>
|
||
<td class="table__td">74.24 ms</td>
|
||
<td class="table__td">
|
||
0%
|
||
</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">0%</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%</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%</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="table__td">0%</td>
|
||
<td class="table__td">0%</td>
|
||
<td class="table__td">
|
||
0%
|
||
</td>
|
||
</tr>
|
||
</tbody></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="canvas2" style="width: 1100px; height: 400px; display: none;"></div>
|
||
<img height="400" width="1100" id="imgCanvas2">
|
||
</div>
|
||
</div>
|
||
<div class="table-box indent-3">
|
||
<table class="table">
|
||
<thead class="table__header">
|
||
<tr class="table__tr">
|
||
<th class="table__th">各省份流量速率</th>
|
||
<th class="table__th">Xinjiang</th>
|
||
<th class="table__th">Shaanxi</th>
|
||
<th class="table__th">Gansu</th>
|
||
<th class="table__th">Qinghai</th>
|
||
<th class="table__th">Shandong</th>
|
||
<th class="table__th">Henan</th>
|
||
<th class="table__th">Ningxia</th>
|
||
<th class="table__th">Beijing</th>
|
||
<th class="table__th">Hebei</th>
|
||
<th class="table__th">Shanxi</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody><tr class="table__tr font-size-14">
|
||
<td class="table__td">上行峰值</td>
|
||
<td class="table__td">1.1 Gbps</td>
|
||
<td class="table__td">756.12 Mbps</td>
|
||
<td class="table__td">117.3 Mbps</td>
|
||
<td class="table__td">64.77 Mbps</td>
|
||
<td class="table__td">50.45 Mbps</td>
|
||
<td class="table__td">124.57 Mbps</td>
|
||
<td class="table__td">24.43 Mbps</td>
|
||
<td class="table__td">19.93 Mbps</td>
|
||
<td class="table__td">3.94 Mbps</td>
|
||
<td class="table__td">4.24 Mbps</td>
|
||
</tr>
|
||
<tr class="table__tr font-size-14">
|
||
<td class="table__td">上行均值</td>
|
||
<td class="table__td">809.1 Mbps</td>
|
||
<td class="table__td">579.71 Mbps</td>
|
||
<td class="table__td">71.3 Mbps</td>
|
||
<td class="table__td">51.08 Mbps</td>
|
||
<td class="table__td">20.52 Mbps</td>
|
||
<td class="table__td">21.74 Mbps</td>
|
||
<td class="table__td">16.88 Mbps</td>
|
||
<td class="table__td">2.47 Mbps</td>
|
||
<td class="table__td">1.9 Mbps</td>
|
||
<td class="table__td">2.35 Mbps</td>
|
||
</tr>
|
||
</tbody></table>
|
||
<div class="echarts__title" style="padding-top: 10px;">图2 域外访问字节跳动服务的TOP10省份流量分布</div>
|
||
</div>
|
||
|
||
<div class="echarts-box indent-3">
|
||
<div class="echarts">
|
||
<div class="echarts__canvas" id="canvas8" style="width: 1100px; height: 400px; display: none;"></div>
|
||
<img height="400" width="1100" id="imgCanvas8">
|
||
</div>
|
||
</div>
|
||
<div class="table-box indent-3">
|
||
<table class="table">
|
||
<thead class="table__header">
|
||
<tr class="table__tr">
|
||
<th class="table__th">各省份流量速率</th>
|
||
<th class="table__th">Xinjiang</th>
|
||
<th class="table__th">Shaanxi</th>
|
||
<th class="table__th">Gansu</th>
|
||
<th class="table__th">Qinghai</th>
|
||
<th class="table__th">Shandong</th>
|
||
<th class="table__th">Henan</th>
|
||
<th class="table__th">Ningxia</th>
|
||
<th class="table__th">Beijing</th>
|
||
<th class="table__th">Hebei</th>
|
||
<th class="table__th">Shanxi</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr class="table__tr font-size-14">
|
||
<td class="table__td">下行峰值</td>
|
||
<td class="table__td">69 Gbps</td>
|
||
<td class="table__td">54.69 Gbps</td>
|
||
<td class="table__td">8.26 Gbps</td>
|
||
<td class="table__td">5.02 Gbps</td>
|
||
<td class="table__td">3.42 Gbps</td>
|
||
<td class="table__td">8.14 Gbps</td>
|
||
<td class="table__td">1.6 Gbps</td>
|
||
<td class="table__td">865.94 Mbps</td>
|
||
<td class="table__td">468.89 Mbps</td>
|
||
<td class="table__td">516.45 Mbps</td>
|
||
</tr>
|
||
<tr class="table__tr font-size-14">
|
||
<td class="table__td">下行均值</td>
|
||
<td class="table__td">53.11 Gbps</td>
|
||
<td class="table__td">42.93 Gbps</td>
|
||
<td class="table__td">5.1 Gbps</td>
|
||
<td class="table__td">4.04 Gbps</td>
|
||
<td class="table__td">1.54 Gbps</td>
|
||
<td class="table__td">1.41 Gbps</td>
|
||
<td class="table__td">1.23 Gbps</td>
|
||
<td class="table__td">184.01 Mbps</td>
|
||
<td class="table__td">162.04 Mbps</td>
|
||
<td class="table__td">158.53 Mbps</td>
|
||
</tr>
|
||
</tbody></table>
|
||
<div class="echarts__title" style="padding-top: 10px;">图3 域外访问字节跳动服务的TOP10省份流量分布</div>
|
||
</div>
|
||
|
||
<div class="echarts-box indent-3">
|
||
<div class="echarts">
|
||
<div class="echarts__canvas" id="canvas3" style="width: 1100px; height: 400px; display: none;"></div>
|
||
<img height="400" width="1100" id="imgCanvas3">
|
||
</div>
|
||
</div>
|
||
<div class="table-box indent-3">
|
||
<table class="table">
|
||
<thead class="table__header">
|
||
<tr class="table__tr">
|
||
<th class="table__th">各省份流量速率</th>
|
||
<th class="table__th">Jiangsu</th>
|
||
<th class="table__th">Zhejiang</th>
|
||
<th class="table__th">Shandong</th>
|
||
<th class="table__th">Shaanxi</th>
|
||
<th class="table__th">Hebei</th>
|
||
<th class="table__th">Henan</th>
|
||
<th class="table__th">Fujian</th>
|
||
<th class="table__th">Hunan</th>
|
||
<th class="table__th">Heilongjiang</th>
|
||
<th class="table__th">Beijing</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody><tr class="table__tr font-size-14">
|
||
<td class="table__td">上行峰值</td>
|
||
<td class="table__td">30.84 Mbps</td>
|
||
<td class="table__td">22.36 Mbps</td>
|
||
<td class="table__td">26.98 Mbps</td>
|
||
<td class="table__td">11.44 Mbps</td>
|
||
<td class="table__td">13.13 Mbps</td>
|
||
<td class="table__td">9.68 Mbps</td>
|
||
<td class="table__td">12.22 Mbps</td>
|
||
<td class="table__td">8.12 Mbps</td>
|
||
<td class="table__td">5.64 Mbps</td>
|
||
<td class="table__td">7.71 Mbps</td>
|
||
</tr>
|
||
<tr class="table__tr font-size-14">
|
||
<td class="table__td">上行均值</td>
|
||
<td class="table__td">23.65 Mbps</td>
|
||
<td class="table__td">17.04 Mbps</td>
|
||
<td class="table__td">14.23 Mbps</td>
|
||
<td class="table__td">8.46 Mbps</td>
|
||
<td class="table__td">8.54 Mbps</td>
|
||
<td class="table__td">6.75 Mbps</td>
|
||
<td class="table__td">8.9 Mbps</td>
|
||
<td class="table__td">6.06 Mbps</td>
|
||
<td class="table__td">1.55 Mbps</td>
|
||
<td class="table__td">6.38 Mbps</td>
|
||
</tr>
|
||
</tbody></table>
|
||
<div class="echarts__title" style="padding-top: 10px;">图4 字节跳动服务对应网段访问域外服务的TOP10省份流量分布</div>
|
||
</div>
|
||
|
||
<div class="echarts-box indent-3">
|
||
<div class="echarts">
|
||
<div class="echarts__canvas" id="canvas9" style="width: 1100px; height: 400px; display: none;"></div>
|
||
<img height="400" width="1100" id="imgCanvas9">
|
||
</div>
|
||
</div>
|
||
<div class="table-box indent-3">
|
||
<table class="table">
|
||
<thead class="table__header">
|
||
<tr class="table__tr">
|
||
<th class="table__th">各省份流量速率</th>
|
||
<th class="table__th">Jiangsu</th>
|
||
<th class="table__th">Zhejiang</th>
|
||
<th class="table__th">Shandong</th>
|
||
<th class="table__th">Shaanxi</th>
|
||
<th class="table__th">Hebei</th>
|
||
<th class="table__th">Henan</th>
|
||
<th class="table__th">Fujian</th>
|
||
<th class="table__th">Hunan</th>
|
||
<th class="table__th">Heilongjiang</th>
|
||
<th class="table__th">Beijing</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr class="table__tr font-size-14">
|
||
<td class="table__td">下行峰值</td>
|
||
<td class="table__td">2.16 Gbps</td>
|
||
<td class="table__td">1.34 Gbps</td>
|
||
<td class="table__td">1.68 Gbps</td>
|
||
<td class="table__td">990.72 Mbps</td>
|
||
<td class="table__td">1.19 Gbps</td>
|
||
<td class="table__td">848.92 Mbps</td>
|
||
<td class="table__td">720.94 Mbps</td>
|
||
<td class="table__td">675.67 Mbps</td>
|
||
<td class="table__td">395.29 Mbps</td>
|
||
<td class="table__td">34.84 Mbps</td>
|
||
</tr>
|
||
<tr class="table__tr font-size-14">
|
||
<td class="table__td">下行均值</td>
|
||
<td class="table__td">1.6 Gbps</td>
|
||
<td class="table__td">1.04 Gbps</td>
|
||
<td class="table__td">947.37 Mbps</td>
|
||
<td class="table__td">766.37 Mbps</td>
|
||
<td class="table__td">693.43 Mbps</td>
|
||
<td class="table__td">559.46 Mbps</td>
|
||
<td class="table__td">516.84 Mbps</td>
|
||
<td class="table__td">516.67 Mbps</td>
|
||
<td class="table__td">98.41 Mbps</td>
|
||
<td class="table__td">23.26 Mbps</td>
|
||
</tr>
|
||
</tbody></table>
|
||
<div class="echarts__title" style="padding-top: 10px;">图5 字节跳动服务对应网段访问域外服务的TOP10省份流量分布</div>
|
||
</div>
|
||
|
||
<div class="header3">2.省内各地区流量分布</div>
|
||
<div class="echarts-box indent-3">
|
||
<div class="echarts">
|
||
<div class="echarts__canvas" id="canvas4" style="width: 1100px; height: 400px; display: none;"></div>
|
||
<img height="400" width="1100" id="imgCanvas4">
|
||
</div>
|
||
</div>
|
||
<div class="table-box indent-3">
|
||
<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>
|
||
<th class="table__th">和田</th>
|
||
<th class="table__th">巴州</th>
|
||
<th class="table__th">吐鲁番</th>
|
||
<th class="table__th">阿克苏</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody><tr class="table__tr font-size-14">
|
||
<td class="table__td">上行峰值</td>
|
||
<td class="table__td">744.64 Mbps</td>
|
||
<td class="table__td">90.6 Mbps</td>
|
||
<td class="table__td">60.79 Mbps</td>
|
||
<td class="table__td">46.76 Mbps</td>
|
||
<td class="table__td">24.32 Mbps</td>
|
||
<td class="table__td">20.67 Mbps</td>
|
||
<td class="table__td">21.43 Mbps</td>
|
||
<td class="table__td">14.58 Mbps</td>
|
||
<td class="table__td">13.52 Mbps</td>
|
||
<td class="table__td">13.91 Mbps</td>
|
||
</tr>
|
||
|
||
<tr class="table__tr font-size-14">
|
||
<td class="table__td">上行均值</td>
|
||
<td class="table__td">585.39 Mbps</td>
|
||
<td class="table__td">46.78 Mbps</td>
|
||
<td class="table__td">39.42 Mbps</td>
|
||
<td class="table__td">27.42 Mbps</td>
|
||
<td class="table__td">16.18 Mbps</td>
|
||
<td class="table__td">13.82 Mbps</td>
|
||
<td class="table__td">11.78 Mbps</td>
|
||
<td class="table__td">10.27 Mbps</td>
|
||
<td class="table__td">8.46 Mbps</td>
|
||
<td class="table__td">8.27 Mbps</td>
|
||
</tr>
|
||
</tbody></table>
|
||
<div class="echarts__title" style="padding-top: 10px;">图6 域外访问字节跳动服务的TOP10省内地区流量分布</div>
|
||
</div>
|
||
|
||
<div class="echarts-box indent-3">
|
||
<div class="echarts">
|
||
<div class="echarts__canvas" id="canvas10" style="width: 1100px; height: 400px; display: none;"></div>
|
||
<img height="400" width="1100" id="imgCanvas10">
|
||
</div>
|
||
</div>
|
||
<div class="table-box indent-3">
|
||
<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>
|
||
<th class="table__th">和田</th>
|
||
<th class="table__th">巴州</th>
|
||
<th class="table__th">吐鲁番</th>
|
||
<th class="table__th">阿克苏</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr class="table__tr font-size-14">
|
||
<td class="table__td">下行峰值</td>
|
||
<td class="table__td">45.37 Gbps</td>
|
||
<td class="table__td">5.54 Gbps</td>
|
||
<td class="table__td">4.24 Gbps</td>
|
||
<td class="table__td">3.3 Gbps</td>
|
||
<td class="table__td">1.67 Gbps</td>
|
||
<td class="table__td">1.52 Gbps</td>
|
||
<td class="table__td">1.4 Gbps</td>
|
||
<td class="table__td">1.05 Gbps</td>
|
||
<td class="table__td">979.99 Mbps</td>
|
||
<td class="table__td">934.38 Mbps</td>
|
||
</tr>
|
||
<tr class="table__tr font-size-14">
|
||
<td class="table__td">下行均值</td>
|
||
<td class="table__td">37.82 Gbps</td>
|
||
<td class="table__td">2.92 Gbps</td>
|
||
<td class="table__td">2.71 Gbps</td>
|
||
<td class="table__td">1.93 Gbps</td>
|
||
<td class="table__td">1.12 Gbps</td>
|
||
<td class="table__td">1.05 Gbps</td>
|
||
<td class="table__td">769.3 Mbps</td>
|
||
<td class="table__td">731.24 Mbps</td>
|
||
<td class="table__td">601.87 Mbps</td>
|
||
<td class="table__td">554.6 Mbps</td>
|
||
</tr>
|
||
</tbody></table>
|
||
<div class="echarts__title" style="padding-top: 10px;">图7 域外访问字节跳动服务的TOP10省内地区流量分布</div>
|
||
</div>
|
||
|
||
<div class="echarts-box indent-3">
|
||
<div class="echarts">
|
||
<div class="echarts__canvas" id="canvas5" style="width: 1100px; height: 400px; display: none;"></div>
|
||
<img height="400" width="1100" id="imgCanvas5">
|
||
</div>
|
||
</div>
|
||
<div class="table-box indent-3">
|
||
<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>
|
||
</tr>
|
||
</thead>
|
||
<tbody><tr class="table__tr font-size-14">
|
||
<td class="table__td">上行峰值</td>
|
||
<td class="table__td">1.22 Mbps</td>
|
||
<td class="table__td">164.64 bps</td>
|
||
</tr>
|
||
<tr class="table__tr font-size-14">
|
||
<td class="table__td">上行均值</td>
|
||
<td class="table__td">1.22 Mbps</td>
|
||
<td class="table__td">146.2 bps</td>
|
||
</tr>
|
||
</tbody></table>
|
||
<div class="echarts__title" style="padding-top: 10px;">图8 字节跳动服务对应网段访问域外服务的TOP10省内地区流量分布</div>
|
||
</div>
|
||
|
||
<div class="echarts-box indent-3">
|
||
<div class="echarts">
|
||
<div class="echarts__canvas" id="canvas11" style="width: 1100px; height: 400px; display: none;"></div>
|
||
<img height="400" width="1100" id="imgCanvas11">
|
||
</div>
|
||
</div>
|
||
<div class="table-box indent-3">
|
||
<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>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr class="table__tr font-size-14">
|
||
<td class="table__td">下行峰值</td>
|
||
<td class="table__td">42.82 Kbps</td>
|
||
<td class="table__td">523.44 bps</td>
|
||
</tr>
|
||
<tr class="table__tr font-size-14">
|
||
<td class="table__td">下行均值</td>
|
||
<td class="table__td">42.82 Kbps</td>
|
||
<td class="table__td">443.09 bps</td>
|
||
</tr>
|
||
</tbody></table>
|
||
<div class="echarts__title" style="padding-top: 10px;">图9 字节跳动服务对应网段访问域外服务的TOP10省内地区流量分布</div>
|
||
</div>
|
||
|
||
<div class="header2">三.内容收敛比</div>
|
||
<div class="echarts-box indent-3">
|
||
<div class="echarts">
|
||
<div class="echarts__canvas" id="canvas6" style="width: 550px; height: 280px; display: none;"></div>
|
||
<img height="280" width="550" id="imgCanvas6">
|
||
<div class="echarts__title">图10 缓存命中的响应流量占比</div>
|
||
</div>
|
||
<div class="echarts">
|
||
<div class="echarts__canvas" id="canvas7" style="width: 550px; height: 280px; display: none;"></div>
|
||
<img height="280" width="550" id="imgCanvas7">
|
||
<div class="echarts__title">图11 缓存命中的会话占比</div>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
/** 数据 begin */
|
||
// 时间区间
|
||
var timeRange = [1651075200, 1651161599]
|
||
/* 1.1 流量变化曲线 */
|
||
// sql-1 总流量
|
||
var totalTraffic = 3490849987756
|
||
// sql-2 字节跳动总流量
|
||
var targetTotalTraffic = 928455207581
|
||
// sql-3 prev字节跳动总流量
|
||
var prevTargetTotalTraffic = 326659324877
|
||
// sql-4 域外访问字节跳动总流量
|
||
var outToInTotalTraffic = 303962343429
|
||
// sql-5 prev域外访问字节跳动总流量
|
||
var prevOutToInTotalTraffic = 0
|
||
// sql-6 字节跳动访问域外总流量
|
||
var inToOutTotalTraffic = 18630698284
|
||
// sql-7 prev字节跳动访问域外总流量
|
||
var prevInToOutTotalTraffic = 0
|
||
// sql-8
|
||
var quantile1 = {
|
||
rate50: 103947713,
|
||
rate90: 124575842,
|
||
rate99: 159816957,
|
||
}
|
||
// sql-10 流量变化曲线
|
||
var trafficData = [
|
||
{stat_time:1651075200000, rate:118977475},
|
||
{stat_time:1651075500000, rate:117189200},
|
||
{stat_time:1651075800000, rate:120351727},
|
||
{stat_time:1651076100000, rate:118305898},
|
||
{stat_time:1651076400000, rate:116339076},
|
||
{stat_time:1651076700000, rate:116630039},
|
||
{stat_time:1651077000000, rate:110817402},
|
||
{stat_time:1651077300000, rate:105658754},
|
||
{stat_time:1651077600000, rate:102817121},
|
||
{stat_time:1651077900000, rate:96306665},
|
||
{stat_time:1651078200000, rate:92953561},
|
||
{stat_time:1651078500000, rate:89236264},
|
||
{stat_time:1651078800000, rate:82898700},
|
||
{stat_time:1651079100000, rate:75198028},
|
||
{stat_time:1651079400000, rate:70574185},
|
||
{stat_time:1651079700000, rate:69207810},
|
||
{stat_time:1651080000000, rate:66255182},
|
||
{stat_time:1651080300000, rate:62762611},
|
||
{stat_time:1651080600000, rate:57764332},
|
||
{stat_time:1651080900000, rate:55364174},
|
||
{stat_time:1651081200000, rate:52085664},
|
||
{stat_time:1651081500000, rate:48369970},
|
||
{stat_time:1651081800000, rate:46365938},
|
||
{stat_time:1651082100000, rate:43428538},
|
||
{stat_time:1651082400000, rate:40537283},
|
||
{stat_time:1651082700000, rate:38652331},
|
||
{stat_time:1651083000000, rate:36286706},
|
||
{stat_time:1651083300000, rate:34407473},
|
||
{stat_time:1651083600000, rate:34214859},
|
||
{stat_time:1651083900000, rate:31060529},
|
||
{stat_time:1651084200000, rate:29401364},
|
||
{stat_time:1651084500000, rate:27971237},
|
||
{stat_time:1651084800000, rate:27676330},
|
||
{stat_time:1651085100000, rate:26100370},
|
||
{stat_time:1651085400000, rate:24941238},
|
||
{stat_time:1651085700000, rate:24177343},
|
||
{stat_time:1651086000000, rate:22367237},
|
||
{stat_time:1651086300000, rate:21778766},
|
||
{stat_time:1651086600000, rate:20192889},
|
||
{stat_time:1651086900000, rate:20266599},
|
||
{stat_time:1651087200000, rate:19355921},
|
||
{stat_time:1651087500000, rate:18976583},
|
||
{stat_time:1651087800000, rate:18886477},
|
||
{stat_time:1651088100000, rate:17754252},
|
||
{stat_time:1651088400000, rate:16631953},
|
||
{stat_time:1651088700000, rate:16210936},
|
||
{stat_time:1651089000000, rate:15162012},
|
||
{stat_time:1651089300000, rate:14564624},
|
||
{stat_time:1651089600000, rate:16144280},
|
||
{stat_time:1651089900000, rate:13977887},
|
||
{stat_time:1651090200000, rate:13888770},
|
||
{stat_time:1651090500000, rate:13558003},
|
||
{stat_time:1651090800000, rate:12868779},
|
||
{stat_time:1651091100000, rate:12282784},
|
||
{stat_time:1651091400000, rate:12334037},
|
||
{stat_time:1651091700000, rate:12156964},
|
||
{stat_time:1651092000000, rate:12327807},
|
||
{stat_time:1651092300000, rate:11949289},
|
||
{stat_time:1651092600000, rate:11946255},
|
||
{stat_time:1651092900000, rate:11774401},
|
||
{stat_time:1651093200000, rate:12039437},
|
||
{stat_time:1651093500000, rate:12149318},
|
||
{stat_time:1651093800000, rate:12736805},
|
||
{stat_time:1651094100000, rate:12338932},
|
||
{stat_time:1651094400000, rate:14286865},
|
||
{stat_time:1651094700000, rate:14632950},
|
||
{stat_time:1651095000000, rate:14305413},
|
||
{stat_time:1651095300000, rate:14482662},
|
||
{stat_time:1651095600000, rate:15290685},
|
||
{stat_time:1651095900000, rate:18058817},
|
||
{stat_time:1651096200000, rate:20419983},
|
||
{stat_time:1651096500000, rate:20802734},
|
||
{stat_time:1651096800000, rate:21696588},
|
||
{stat_time:1651097100000, rate:23077436},
|
||
{stat_time:1651097400000, rate:25461299},
|
||
{stat_time:1651097700000, rate:27879247},
|
||
{stat_time:1651098000000, rate:28676868},
|
||
{stat_time:1651098300000, rate:30489786},
|
||
{stat_time:1651098600000, rate:33030195},
|
||
{stat_time:1651098900000, rate:35310184},
|
||
{stat_time:1651099200000, rate:36047762},
|
||
{stat_time:1651099500000, rate:38178057},
|
||
{stat_time:1651099800000, rate:41271770},
|
||
{stat_time:1651100100000, rate:43075152},
|
||
{stat_time:1651100400000, rate:46752960},
|
||
{stat_time:1651100700000, rate:44908406},
|
||
{stat_time:1651101000000, rate:46782335},
|
||
{stat_time:1651101300000, rate:47578041},
|
||
{stat_time:1651101600000, rate:49533018},
|
||
{stat_time:1651101900000, rate:50122672},
|
||
{stat_time:1651102200000, rate:50336836},
|
||
{stat_time:1651102500000, rate:53114137},
|
||
{stat_time:1651102800000, rate:55879777},
|
||
{stat_time:1651103100000, rate:57478985},
|
||
{stat_time:1651103400000, rate:59792577},
|
||
{stat_time:1651103700000, rate:62250905},
|
||
{stat_time:1651104000000, rate:65556494},
|
||
{stat_time:1651104300000, rate:69637419},
|
||
{stat_time:1651104600000, rate:71621032},
|
||
{stat_time:1651104900000, rate:76095342},
|
||
{stat_time:1651105200000, rate:79455560},
|
||
{stat_time:1651105500000, rate:83980774},
|
||
{stat_time:1651105800000, rate:87868025},
|
||
{stat_time:1651106100000, rate:91372001},
|
||
{stat_time:1651106400000, rate:92384023},
|
||
{stat_time:1651106700000, rate:94317374},
|
||
{stat_time:1651107000000, rate:95375870},
|
||
{stat_time:1651107300000, rate:97348420},
|
||
{stat_time:1651107600000, rate:95965299},
|
||
{stat_time:1651107900000, rate:95870430},
|
||
{stat_time:1651108200000, rate:94712141},
|
||
{stat_time:1651108500000, rate:96539272},
|
||
{stat_time:1651108800000, rate:96008811},
|
||
{stat_time:1651109100000, rate:96504545},
|
||
{stat_time:1651109400000, rate:96556135},
|
||
{stat_time:1651109700000, rate:98944550},
|
||
{stat_time:1651110000000, rate:100864933},
|
||
{stat_time:1651110300000, rate:98853081},
|
||
{stat_time:1651110600000, rate:98906340},
|
||
{stat_time:1651110900000, rate:99671278},
|
||
{stat_time:1651111200000, rate:99324923},
|
||
{stat_time:1651111500000, rate:101142889},
|
||
{stat_time:1651111800000, rate:97908525},
|
||
{stat_time:1651112100000, rate:99293390},
|
||
{stat_time:1651112400000, rate:98479694},
|
||
{stat_time:1651112700000, rate:101521064},
|
||
{stat_time:1651113000000, rate:104182843},
|
||
{stat_time:1651113300000, rate:102096744},
|
||
{stat_time:1651113600000, rate:103943748},
|
||
{stat_time:1651113900000, rate:102701995},
|
||
{stat_time:1651114200000, rate:102097053},
|
||
{stat_time:1651114500000, rate:100377570},
|
||
{stat_time:1651114800000, rate:102089041},
|
||
{stat_time:1651115100000, rate:102330445},
|
||
{stat_time:1651115400000, rate:101483089},
|
||
{stat_time:1651115700000, rate:39271144},
|
||
{stat_time:1651116000000, rate:169360962},
|
||
{stat_time:1651116300000, rate:107442792},
|
||
{stat_time:1651116600000, rate:105502278},
|
||
{stat_time:1651116900000, rate:104226511},
|
||
{stat_time:1651117200000, rate:104083693},
|
||
{stat_time:1651117500000, rate:104831435},
|
||
{stat_time:1651117800000, rate:106460932},
|
||
{stat_time:1651118100000, rate:104927142},
|
||
{stat_time:1651118400000, rate:102512366},
|
||
{stat_time:1651118700000, rate:103389783},
|
||
{stat_time:1651119000000, rate:108056246},
|
||
{stat_time:1651119300000, rate:111724230},
|
||
{stat_time:1651119600000, rate:109970271},
|
||
{stat_time:1651119900000, rate:112158400},
|
||
{stat_time:1651120200000, rate:110894787},
|
||
{stat_time:1651120500000, rate:122898580},
|
||
{stat_time:1651120800000, rate:120137109},
|
||
{stat_time:1651121100000, rate:118493247},
|
||
{stat_time:1651121400000, rate:119209113},
|
||
{stat_time:1651121700000, rate:118708386},
|
||
{stat_time:1651122000000, rate:116536584},
|
||
{stat_time:1651122300000, rate:114663546},
|
||
{stat_time:1651122600000, rate:114530951},
|
||
{stat_time:1651122900000, rate:117002026},
|
||
{stat_time:1651123200000, rate:117423812},
|
||
{stat_time:1651123500000, rate:118586239},
|
||
{stat_time:1651123800000, rate:116939150},
|
||
{stat_time:1651124100000, rate:114672797},
|
||
{stat_time:1651124400000, rate:114755069},
|
||
{stat_time:1651124700000, rate:114949468},
|
||
{stat_time:1651125000000, rate:116249182},
|
||
{stat_time:1651125300000, rate:116846656},
|
||
{stat_time:1651125600000, rate:117265622},
|
||
{stat_time:1651125900000, rate:119077833},
|
||
{stat_time:1651126200000, rate:120127460},
|
||
{stat_time:1651126500000, rate:120852427},
|
||
{stat_time:1651126800000, rate:95954452},
|
||
{stat_time:1651127100000, rate:84110733},
|
||
{stat_time:1651127400000, rate:36043995},
|
||
{stat_time:1651127700000, rate:0},
|
||
{stat_time:1651128000000, rate:0},
|
||
{stat_time:1651128300000, rate:0},
|
||
{stat_time:1651128600000, rate:0},
|
||
{stat_time:1651128900000, rate:157862161},
|
||
{stat_time:1651129200000, rate:501663970},
|
||
{stat_time:1651129500000, rate:332716748},
|
||
{stat_time:1651129800000, rate:116404958},
|
||
{stat_time:1651130100000, rate:112273910},
|
||
{stat_time:1651130400000, rate:113022853},
|
||
{stat_time:1651130700000, rate:115484130},
|
||
{stat_time:1651131000000, rate:115563870},
|
||
{stat_time:1651131300000, rate:116403204},
|
||
{stat_time:1651131600000, rate:114572102},
|
||
{stat_time:1651131900000, rate:112244899},
|
||
{stat_time:1651132200000, rate:109256213},
|
||
{stat_time:1651132500000, rate:107997559},
|
||
{stat_time:1651132800000, rate:110408575},
|
||
{stat_time:1651133100000, rate:110831607},
|
||
{stat_time:1651133400000, rate:109246651},
|
||
{stat_time:1651133700000, rate:108458011},
|
||
{stat_time:1651134000000, rate:104373741},
|
||
{stat_time:1651134300000, rate:103745796},
|
||
{stat_time:1651134600000, rate:106524462},
|
||
{stat_time:1651134900000, rate:108771718},
|
||
{stat_time:1651135200000, rate:108778878},
|
||
{stat_time:1651135500000, rate:107407703},
|
||
{stat_time:1651135800000, rate:105106218},
|
||
{stat_time:1651136100000, rate:103498461},
|
||
{stat_time:1651136400000, rate:102535971},
|
||
{stat_time:1651136700000, rate:104669997},
|
||
{stat_time:1651137000000, rate:105273664},
|
||
{stat_time:1651137300000, rate:104132491},
|
||
{stat_time:1651137600000, rate:104352416},
|
||
{stat_time:1651137900000, rate:103884139},
|
||
{stat_time:1651138200000, rate:101001112},
|
||
{stat_time:1651138500000, rate:104009823},
|
||
{stat_time:1651138800000, rate:107024384},
|
||
{stat_time:1651139100000, rate:109117657},
|
||
{stat_time:1651139400000, rate:109252160},
|
||
{stat_time:1651139700000, rate:108472304},
|
||
{stat_time:1651140000000, rate:103497240},
|
||
{stat_time:1651140300000, rate:102021567},
|
||
{stat_time:1651140600000, rate:103686182},
|
||
{stat_time:1651140900000, rate:105759401},
|
||
{stat_time:1651141200000, rate:105174316},
|
||
{stat_time:1651141500000, rate:105511070},
|
||
{stat_time:1651141800000, rate:105419334},
|
||
{stat_time:1651142100000, rate:103360821},
|
||
{stat_time:1651142400000, rate:103248271},
|
||
{stat_time:1651142700000, rate:105011167},
|
||
{stat_time:1651143000000, rate:104316075},
|
||
{stat_time:1651143300000, rate:103951678},
|
||
{stat_time:1651143600000, rate:107874099},
|
||
{stat_time:1651143900000, rate:107911310},
|
||
{stat_time:1651144200000, rate:112166223},
|
||
{stat_time:1651144500000, rate:116357205},
|
||
{stat_time:1651144800000, rate:116274003},
|
||
{stat_time:1651145100000, rate:115949277},
|
||
{stat_time:1651145400000, rate:114550230},
|
||
{stat_time:1651145700000, rate:108584105},
|
||
{stat_time:1651146000000, rate:108386519},
|
||
{stat_time:1651146300000, rate:113873949},
|
||
{stat_time:1651146600000, rate:118169666},
|
||
{stat_time:1651146900000, rate:120816039},
|
||
{stat_time:1651147200000, rate:119472874},
|
||
{stat_time:1651147500000, rate:118312430},
|
||
{stat_time:1651147800000, rate:121137411},
|
||
{stat_time:1651148100000, rate:124378757},
|
||
{stat_time:1651148400000, rate:125441875},
|
||
{stat_time:1651148700000, rate:125563798},
|
||
{stat_time:1651149000000, rate:127467238},
|
||
{stat_time:1651149300000, rate:123778895},
|
||
{stat_time:1651149600000, rate:124447363},
|
||
{stat_time:1651149900000, rate:126196713},
|
||
{stat_time:1651150200000, rate:125540306},
|
||
{stat_time:1651150500000, rate:123580833},
|
||
{stat_time:1651150800000, rate:123289063},
|
||
{stat_time:1651151100000, rate:123992347},
|
||
{stat_time:1651151400000, rate:124578888},
|
||
{stat_time:1651151700000, rate:127398676},
|
||
{stat_time:1651152000000, rate:130029262},
|
||
{stat_time:1651152300000, rate:120761449},
|
||
{stat_time:1651152600000, rate:120565894},
|
||
{stat_time:1651152900000, rate:119927115},
|
||
{stat_time:1651153200000, rate:123476524},
|
||
{stat_time:1651153500000, rate:125422028},
|
||
{stat_time:1651153800000, rate:126870429},
|
||
{stat_time:1651154100000, rate:129855086},
|
||
{stat_time:1651154400000, rate:131080076},
|
||
{stat_time:1651154700000, rate:126032848},
|
||
{stat_time:1651155000000, rate:122898787},
|
||
{stat_time:1651155300000, rate:129193789},
|
||
{stat_time:1651155600000, rate:134947400},
|
||
{stat_time:1651155900000, rate:134128875},
|
||
{stat_time:1651156200000, rate:123341447},
|
||
{stat_time:1651156500000, rate:123898760},
|
||
{stat_time:1651156800000, rate:125745028},
|
||
{stat_time:1651157100000, rate:127830353},
|
||
{stat_time:1651157400000, rate:127302237},
|
||
{stat_time:1651157700000, rate:125631089},
|
||
{stat_time:1651158000000, rate:125834356},
|
||
{stat_time:1651158300000, rate:124663368},
|
||
{stat_time:1651158600000, rate:125584192},
|
||
{stat_time:1651158900000, rate:125148254},
|
||
{stat_time:1651159200000, rate:123742633},
|
||
{stat_time:1651159500000, rate:124424401},
|
||
{stat_time:1651159800000, rate:123556133},
|
||
{stat_time:1651160100000, rate:124847154},
|
||
{stat_time:1651160400000, rate:124568735},
|
||
{stat_time:1651160700000, rate:124138191},
|
||
{stat_time:1651161000000, rate:121677997},
|
||
{stat_time:1651161300000, rate:119959201},
|
||
]
|
||
|
||
/* 2.1 各省份流量分布 */
|
||
// sql-19 Top 10省份流量分布（域外访问域内）
|
||
var top10ProvinceOutToInTraffic = [
|
||
{client_province:'Xinjiang',egress_bytes:2192621552.2979,ingress_bytes:143920183329.8408,bytes:146112804882.1387,egress_rate_avg:'809097106',egress_rate_max:'1097315743',egress_rate_min:'609801514',ingress_rate_avg:'53107844227',ingress_rate_max:'68999706382',ingress_rate_min:'41060483653'},
|
||
{client_province:'Shaanxi',egress_bytes:1570988346.7256,ingress_bytes:116348042943.291,bytes:117919031290.0166,egress_rate_avg:'579708853',egress_rate_max:'756123492',egress_rate_min:'416665707',ingress_rate_avg:'42933476027',ingress_rate_max:'54694957229',ingress_rate_min:'31944034878'},
|
||
{client_province:'Gansu',egress_bytes:193225142.5605,ingress_bytes:13829257372.335,bytes:14022482514.8955,egress_rate_avg:'71301818',egress_rate_max:'117302026',egress_rate_min:'34874147',ingress_rate_avg:'5103120558',ingress_rate_max:'8263462735',ingress_rate_min:'2524503483'},
|
||
{client_province:'Qinghai',egress_bytes:138414015.3408,ingress_bytes:10951551009.2725,bytes:11089965024.6133,egress_rate_avg:'51076019',egress_rate_max:'64771754',egress_rate_min:'38011714',ingress_rate_avg:'4041220985',ingress_rate_max:'5017076051',ingress_rate_min:'3062616514'},
|
||
{client_province:'Shandong',egress_bytes:55612209.6631,ingress_bytes:4181621478.3115,bytes:4237233687.9746,egress_rate_avg:'20521406',egress_rate_max:'50448575',egress_rate_min:'186784',ingress_rate_avg:'1543055998',ingress_rate_max:'3422127868',ingress_rate_min:'12527595'},
|
||
{client_province:'Henan',egress_bytes:58903692.3867,ingress_bytes:3813276815.9639,bytes:3872180508.3506,egress_rate_avg:'21735993',egress_rate_max:'124569067',egress_rate_min:'2175387',ingress_rate_avg:'1407133499',ingress_rate_max:'8141095857',ingress_rate_min:'138810264'},
|
||
{client_province:'Ningxia',egress_bytes:45742702.1719,ingress_bytes:3334897787.0811,bytes:3380640489.2529,egress_rate_avg:'16879469',egress_rate_max:'24427414',egress_rate_min:'10925710',ingress_rate_avg:'1230607328',ingress_rate_max:'1595754031',ingress_rate_min:'830582825'},
|
||
{client_province:'Beijing',egress_bytes:6705136.876,ingress_bytes:498666206.1572,bytes:505371343.0332,egress_rate_avg:'2474256',egress_rate_max:'19926249',egress_rate_min:'151240',ingress_rate_avg:'184012323',ingress_rate_max:'865936108',ingress_rate_min:'15074078'},
|
||
{client_province:'Hebei',egress_bytes:5158967.8496,ingress_bytes:439130366.5137,bytes:444289334.3633,egress_rate_avg:'1903706',egress_rate_max:'3942595',egress_rate_min:'645807',ingress_rate_avg:'162043061',ingress_rate_max:'468892905',ingress_rate_min:'43602675'},
|
||
{client_province:'Shanxi',egress_bytes:6362370.249,ingress_bytes:429619865.666,bytes:435982235.915,egress_rate_avg:'2347772',egress_rate_max:'4235671',egress_rate_min:'1138834',ingress_rate_avg:'158533601',ingress_rate_max:'516452094',ingress_rate_min:'76748535'},
|
||
]
|
||
// sql-20
|
||
var prevTop10ProvinceOutToInTraffic = [
|
||
]
|
||
// sql-21 Top 10省份流量分布（域内访问域外）
|
||
var top10ProvinceInToOutTraffic = [
|
||
{server_province:'Jiangsu',egress_bytes:64079514.3887,ingress_bytes:4334549719.9639,bytes:4398629234.3525,egress_rate_avg:'23645918',egress_rate_max:'30843698',egress_rate_min:'15426351',ingress_rate_avg:'1599487897',ingress_rate_max:'2156430730',ingress_rate_min:'1056513416'},
|
||
{server_province:'Zhejiang',egress_bytes:46172693.3848,ingress_bytes:2814324770.5078,bytes:2860497463.8926,egress_rate_avg:'17038140',egress_rate_max:'22363810',egress_rate_min:'10912372',ingress_rate_avg:'1038511195',ingress_rate_max:'1341004693',ingress_rate_min:'664646167'},
|
||
{server_province:'Shandong',egress_bytes:38570507.9072,ingress_bytes:2567326396.3076,bytes:2605896904.2148,egress_rate_avg:'14232865',egress_rate_max:'26976994',egress_rate_min:'7252862',ingress_rate_avg:'947366569',ingress_rate_max:'1679325092',ingress_rate_min:'447615686'},
|
||
{server_province:'Shaanxi',egress_bytes:22933638.9189,ingress_bytes:2076819651.957,bytes:2099753290.876,egress_rate_avg:'8462719',egress_rate_max:'11443424',egress_rate_min:'5655353',ingress_rate_avg:'766365162',ingress_rate_max:'990720137',ingress_rate_min:'494104264'},
|
||
{server_province:'Hebei',egress_bytes:23137027.2676,ingress_bytes:1879176438.6074,bytes:1902313465.875,egress_rate_avg:'8537772',egress_rate_max:'13127347',egress_rate_min:'4562890',ingress_rate_avg:'693433035',ingress_rate_max:'1189402095',ingress_rate_min:'347262643'},
|
||
{server_province:'Henan',egress_bytes:18302452.6201,ingress_bytes:1516114168.1387,bytes:1534416620.7588,egress_rate_avg:'6753770',egress_rate_max:'9680904',egress_rate_min:'3942353',ingress_rate_avg:'559459787',ingress_rate_max:'848918297',ingress_rate_min:'304658524'},
|
||
{server_province:'Fujian',egress_bytes:24112768.9785,ingress_bytes:1400610480.9365,bytes:1424723249.915,egress_rate_avg:'8897829',egress_rate_max:'12220371',egress_rate_min:'5735220',ingress_rate_avg:'516837886',ingress_rate_max:'720940919',ingress_rate_min:'351307049'},
|
||
{server_province:'Hunan',egress_bytes:16429395.3984,ingress_bytes:1400161517.7197,bytes:1416590913.1182,egress_rate_avg:'6062595',egress_rate_max:'8115050',egress_rate_min:'3817292',ingress_rate_avg:'516672214',ingress_rate_max:'675672787',ingress_rate_min:'346544014'},
|
||
{server_province:'Heilongjiang',egress_bytes:4188721.2646,ingress_bytes:266676364.2627,bytes:270865085.5273,egress_rate_avg:'1545676',egress_rate_max:'5640432',egress_rate_min:'24367',ingress_rate_avg:'98405981',ingress_rate_max:'395293449',ingress_rate_min:'1353279'},
|
||
{server_province:'Beijing',egress_bytes:17282020.0215,ingress_bytes:63046331.9531,bytes:80328351.9746,egress_rate_avg:'6377221',egress_rate_max:'7707962',egress_rate_min:'5093111',ingress_rate_avg:'23264664',ingress_rate_max:'34839777',ingress_rate_min:'17809060'},
|
||
]
|
||
// sql-22
|
||
var prevTop10ProvinceInToOutTraffic = [
|
||
]
|
||
|
||
/* 2.2 省内各地区流量分布 */
|
||
// sql-23（域外访问域内）
|
||
var top10CityOutToInTraffic = [
|
||
{client_region:'移动网',egress_bytes:1586377806.3994,ingress_bytes:102489537271.7266,bytes:104075915078.126,egress_rate_avg:'585387702',egress_rate_max:'744640122',egress_rate_min:'298980018',ingress_rate_avg:'37819562582',ingress_rate_max:'45368468662',ingress_rate_min:'18777214816'},
|
||
{client_region:'喀什',egress_bytes:126768326.8164,ingress_bytes:7907836268.1172,bytes:8034604594.9336,egress_rate_avg:'46778655',egress_rate_max:'90601709',egress_rate_min:'31385180',ingress_rate_avg:'2918062825',ingress_rate_max:'5537091775',ingress_rate_min:'1997170931'},
|
||
{client_region:'乌鲁木齐',egress_bytes:106820784.1709,ingress_bytes:7331122205.1279,bytes:7437942989.2988,egress_rate_avg:'39417832',egress_rate_max:'60791526',egress_rate_min:'23272053',ingress_rate_avg:'2705250140',ingress_rate_max:'4244517030',ingress_rate_min:'1578960604'},
|
||
{client_region:'伊犁',egress_bytes:74314358.1699,ingress_bytes:5230439848.3418,bytes:5304754206.5117,egress_rate_avg:'27422668',egress_rate_max:'46757658',egress_rate_min:'15759002',ingress_rate_avg:'1930079425',ingress_rate_max:'3295893688',ingress_rate_min:'1071908402'},
|
||
{client_region:'昌吉',egress_bytes:43838852.7529,ingress_bytes:3030345303.0938,bytes:3074184155.8467,egress_rate_avg:'16176932',egress_rate_max:'24317594',egress_rate_min:'9688839',ingress_rate_avg:'1118224717',ingress_rate_max:'1674505162',ingress_rate_min:'655304138'},
|
||
{client_region:'哈密',egress_bytes:37440942.4639,ingress_bytes:2840226985.1123,bytes:2877667927.5762,egress_rate_avg:'13816045',egress_rate_max:'20666416',egress_rate_min:'7095155',ingress_rate_avg:'1048069345',ingress_rate_max:'1517387450',ingress_rate_min:'555257997'},
|
||
{client_region:'和田',egress_bytes:31914190.3555,ingress_bytes:2084763286.9395,bytes:2116677477.2949,egress_rate_avg:'11776624',egress_rate_max:'21428031',egress_rate_min:'7820823',ingress_rate_avg:'769296435',ingress_rate_max:'1397243361',ingress_rate_min:'514847712'},
|
||
{client_region:'巴州',egress_bytes:27827936.4229,ingress_bytes:1981623977.5742,bytes:2009451913.9971,egress_rate_avg:'10268759',egress_rate_max:'14576722',egress_rate_min:'6433458',ingress_rate_avg:'731237100',ingress_rate_max:'1048456344',ingress_rate_min:'443780433'},
|
||
{client_region:'吐鲁番',egress_bytes:22926592.0811,ingress_bytes:1631035989.9775,bytes:1653962582.0586,egress_rate_avg:'8460119',egress_rate_max:'13518381',egress_rate_min:'5412286',ingress_rate_avg:'601866974',ingress_rate_max:'979991144',ingress_rate_min:'375354400'},
|
||
{client_region:'阿克苏',egress_bytes:22421028.6162,ingress_bytes:1502933100.3848,bytes:1525354129.001,egress_rate_avg:'8273562',egress_rate_max:'13910310',egress_rate_min:'5163667',ingress_rate_avg:'554595854',ingress_rate_max:'934381865',ingress_rate_min:'340354507'},
|
||
]
|
||
// sql-24
|
||
var prevTop10CityOutToInTraffic = [
|
||
]
|
||
// sql-25（域内访问域外）
|
||
var top10CityInToOutTraffic = [
|
||
{server_region:'阿克苏',egress_bytes:44631.2158,ingress_bytes:1567.9355,bytes:46199.1514,egress_rate_avg:'1218730',egress_rate_max:'1218730',egress_rate_min:'1218730',ingress_rate_avg:'42815',ingress_rate_max:'42815',ingress_rate_min:'42815'},
|
||
{server_region:'乌鲁木齐',egress_bytes:374.7734,ingress_bytes:1135.8457,bytes:1510.6191,egress_rate_avg:'146',egress_rate_max:'165',egress_rate_min:'68',ingress_rate_avg:'443',ingress_rate_max:'523',ingress_rate_min:'215'},
|
||
]
|
||
// sql-26
|
||
var prevTop10CityInToOutTraffic = [
|
||
]
|
||
|
||
/* 3. 内容收敛情况 */
|
||
// sql-27 Top3 S2C总流量
|
||
var top3S2cTotalTraffic = [
|
||
{received_bytes:868342274250.1367,server_idc_renter:'字节跳动',},
|
||
]
|
||
// sql-28 未命中缓存S2C流量
|
||
var missedCacheS2cTraffic = [
|
||
{received_bytes:18326012066.79,client_idc_renter:'字节跳动',},
|
||
]
|
||
// sql-29 Top3 会话总数
|
||
var top3Sessions = [
|
||
{sessions:232596338,server_idc_renter:'字节跳动',},
|
||
]
|
||
// sql-30 未命中缓存的会话
|
||
var missedCacheSession = [
|
||
{sessions:2695674,client_idc_renter:'字节跳动',},
|
||
]
|
||
/** 数据 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 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
|
||
}
|
||
|
||
var seriesData1 = trafficData.map(d => [d.stat_time, d.rate])
|
||
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.rate50,
|
||
color: 'rgb(251,219,15)'
|
||
},
|
||
{
|
||
gt: quantile1.rate50,
|
||
lte: quantile1.rate90,
|
||
color: 'rgb(252,125,2)'
|
||
},
|
||
{
|
||
gt: quantile1.rate90,
|
||
lte: quantile1.rate99,
|
||
color: 'rgb(253,1,0)'
|
||
},
|
||
{
|
||
gt: quantile1.rate99,
|
||
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.rate50
|
||
},
|
||
{
|
||
yAxis: quantile1.rate90
|
||
},
|
||
{
|
||
yAxis: quantile1.rate99
|
||
}
|
||
]
|
||
}
|
||
}
|
||
}
|
||
myChart.setOption(option)
|
||
document.getElementById('imgCanvas1').src = myChart.getDataURL({pixelRatio: 1})
|
||
}
|
||
|
||
// 域外访问域内服务的Top 10省份流量分布折线图
|
||
var unit2 = 'KB'
|
||
var categoryData2 = top10ProvinceOutToInTraffic.map(t => t.client_province)
|
||
var barSeriesDataUp2 = top10ProvinceOutToInTraffic.map(t => ({ value: t.egress_bytes, percent: outToInTotalTraffic === 0 ? 0 : parseFloat(t.egress_bytes) / outToInTotalTraffic }))
|
||
var lineSeriesDataUp2 = top10ProvinceOutToInTraffic.map(t => {
|
||
var findData = prevTop10ProvinceOutToInTraffic.find(pt => pt.client_province === t.client_province)
|
||
if (findData) {
|
||
return findData.egress_bytes === 0 ? 0 : parseFloat(((t.egress_bytes - findData.egress_bytes) / parseFloat(findData.egress_bytes) * 100).toFixed(2))
|
||
} else {
|
||
return 0
|
||
}
|
||
})
|
||
var copyLineSeriesData2 = [...lineSeriesDataUp2]
|
||
var copyBarSeriesData2 = [...barSeriesDataUp2]
|
||
copyLineSeriesData2.sort((a, b) => a - b)
|
||
copyBarSeriesData2.sort((a, b) => a.value - b.value)
|
||
var barMax2 = copyBarSeriesData2.length > 0 ? copyBarSeriesData2[copyBarSeriesData2.length - 1].value : 50
|
||
var lineMin2 = copyLineSeriesData2[0] ? copyLineSeriesData2[0] : 0
|
||
var lineMax2 = copyLineSeriesData2.length > 0 ? copyLineSeriesData2[copyLineSeriesData2.length - 1] : 0
|
||
if (lineMin2 == 0 && lineMin2 == lineMax2) {
|
||
lineMin2 = -5
|
||
lineMax2 = 1
|
||
} else {
|
||
var tempLineMin2 = lineMin2
|
||
lineMin2 = lineMin2 - 2.5 * (lineMax2 - lineMin2)
|
||
lineMax2 = lineMax2 + 0.5 * (lineMax2 - tempLineMin2)
|
||
}
|
||
function initEcharts2 () {
|
||
var myChart = echarts.init(document.getElementById('canvas2'))
|
||
var option = {
|
||
animation: false,
|
||
grid: {
|
||
top: 50,
|
||
bottom: 25,
|
||
right: 40,
|
||
left: 70
|
||
},
|
||
legend: {
|
||
show: true,
|
||
top: 'top',
|
||
left: 'left'
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: categoryData2,
|
||
axisLabel: {
|
||
interval: 0,
|
||
fontSize: 12
|
||
}
|
||
},
|
||
yAxis: [
|
||
{
|
||
name: '流量',
|
||
max: barMax2 * 2,
|
||
nameTextStyle: {
|
||
color: 'transparent'
|
||
},
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter (value) {
|
||
return unitConvert(value, unitTypes.byte, unit2).join('')
|
||
}
|
||
}
|
||
},
|
||
{
|
||
show: false,
|
||
name: '环比',
|
||
type: 'value',
|
||
min: lineMin2,
|
||
max: lineMax2
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '上行流量',
|
||
data: barSeriesDataUp2,
|
||
barMinHeight: 5,
|
||
type: 'bar',
|
||
barWidth: 40,
|
||
label: {
|
||
show: true,
|
||
formatter: function (param) {
|
||
return unitConvert(param.value, unitTypes.byte, unit2).join('') + '\n' + unitConvert(param.data.percent, unitTypes.percent).join('')
|
||
},
|
||
distance: 3,
|
||
color: 'rgb(59,162,201)',
|
||
textBorderColor: 'white',
|
||
textBorderWidth: 3,
|
||
position: 'top',
|
||
fontSize: 10
|
||
},
|
||
itemStyle: {
|
||
color: 'rgb(59,162,201)'
|
||
}
|
||
},
|
||
{
|
||
yAxisIndex: 1,
|
||
name: '上行流量环比',
|
||
data: lineSeriesDataUp2,
|
||
type: 'line',
|
||
label: {
|
||
show: true,
|
||
formatter: function (param) {
|
||
return param.value.toFixed(2) + '%'
|
||
},
|
||
textBorderColor: 'white',
|
||
textBorderWidth: 3,
|
||
color: 'rgb(59,162,201)'
|
||
},
|
||
lineStyle: {
|
||
type: 'dashed'
|
||
},
|
||
itemStyle: {
|
||
color: 'rgb(59,162,201)'
|
||
}
|
||
}
|
||
]
|
||
}
|
||
myChart.setOption(option)
|
||
document.getElementById('imgCanvas2').src = myChart.getDataURL({pixelRatio: 1})
|
||
}
|
||
|
||
// 域外访问域内服务的Top 10省份流量分布折线图
|
||
var unit8 = 'KB'
|
||
var categoryData8 = top10ProvinceOutToInTraffic.map(t => t.client_province)
|
||
var barSeriesDataDown8 = top10ProvinceOutToInTraffic.map(t => ({ value: t.ingress_bytes, percent: outToInTotalTraffic === 0 ? 0 : parseFloat(t.ingress_bytes) / outToInTotalTraffic }))
|
||
var lineSeriesDataDown8 = top10ProvinceOutToInTraffic.map(t => {
|
||
var findData = prevTop10ProvinceOutToInTraffic.find(pt => pt.client_province === t.client_province)
|
||
if (findData) {
|
||
return findData.ingress_bytes === 0 ? 0.00 : parseFloat(((t.ingress_bytes - findData.ingress_bytes) / parseFloat(findData.ingress_bytes) * 100).toFixed(2))
|
||
} else {
|
||
return 0
|
||
}
|
||
})
|
||
var copyLineSeriesData8 = [...lineSeriesDataDown8]
|
||
var copyBarSeriesData8 = [...barSeriesDataDown8]
|
||
copyLineSeriesData8.sort((a, b) => a - b)
|
||
copyBarSeriesData8.sort((a, b) => a.value - b.value)
|
||
var barMax8 = copyBarSeriesData8.length > 0 ? copyBarSeriesData8[copyBarSeriesData8.length - 1].value : 50
|
||
var lineMin8 = copyLineSeriesData8[0] ? copyLineSeriesData8[0] : 0
|
||
var lineMax8 = copyLineSeriesData8.length > 0 ? copyLineSeriesData8[copyLineSeriesData8.length - 1] : 0
|
||
if (lineMin8 == 0 && lineMin8 == lineMax8) {
|
||
lineMin8 = -5
|
||
lineMax8 = 1
|
||
} else {
|
||
var tempLineMin8 = lineMin8
|
||
lineMin8 = lineMin8 - 2.5 * (lineMax8 - lineMin8)
|
||
lineMax8 = lineMax8 + 0.5 * (lineMax8 - tempLineMin8)
|
||
}
|
||
function initEcharts8 () {
|
||
var myChart = echarts.init(document.getElementById('canvas8'))
|
||
var option = {
|
||
animation: false,
|
||
grid: {
|
||
top: 50,
|
||
bottom: 25,
|
||
right: 40,
|
||
left: 70
|
||
},
|
||
legend: {
|
||
show: true,
|
||
top: 'top',
|
||
left: 'left'
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: categoryData8,
|
||
axisLabel: {
|
||
interval: 0,
|
||
fontSize: 12
|
||
}
|
||
},
|
||
yAxis: [
|
||
{
|
||
name: '流量',
|
||
max: barMax8 * 2,
|
||
nameTextStyle: {
|
||
color: 'transparent'
|
||
},
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter (value) {
|
||
return unitConvert(value, unitTypes.byte, unit8).join('')
|
||
}
|
||
}
|
||
},
|
||
{
|
||
show: false,
|
||
name: '环比',
|
||
type: 'value',
|
||
min: lineMin8,
|
||
max: lineMax8
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '下行流量',
|
||
data: barSeriesDataDown8,
|
||
barMinHeight: 5,
|
||
type: 'bar',
|
||
barWidth: 40,
|
||
label: {
|
||
show: true,
|
||
formatter: function (param) {
|
||
return unitConvert(param.value, unitTypes.byte, unit8).join('') + '\n' + unitConvert(param.data.percent, unitTypes.percent).join('')
|
||
},
|
||
distance: 3,
|
||
color: chartColor[2],
|
||
textBorderColor: 'white',
|
||
textBorderWidth: 3,
|
||
position: 'top',
|
||
fontSize: 10
|
||
},
|
||
itemStyle: {
|
||
color: chartColor[2]
|
||
}
|
||
},
|
||
{
|
||
yAxisIndex: 1,
|
||
name: '下行流量环比',
|
||
data: lineSeriesDataDown8,
|
||
type: 'line',
|
||
label: {
|
||
show: true,
|
||
formatter: function (param) {
|
||
return param.value.toFixed(2) + '%'
|
||
},
|
||
textBorderColor: 'white',
|
||
textBorderWidth: 3,
|
||
color: chartColor[2]
|
||
},
|
||
lineStyle: {
|
||
type: 'dashed'
|
||
},
|
||
itemStyle: {
|
||
color: chartColor[2]
|
||
}
|
||
}
|
||
]
|
||
}
|
||
myChart.setOption(option)
|
||
document.getElementById('imgCanvas8').src = myChart.getDataURL({pixelRatio: 1})
|
||
}
|
||
|
||
// 域内访问域外服务的Top 10省份流量分布折线图
|
||
var unit3 = 'KB'
|
||
var categoryData3 = top10ProvinceInToOutTraffic.map(t => t.server_province)
|
||
var barSeriesDataUp3 = top10ProvinceInToOutTraffic.map(t => ({ value: t.egress_bytes, percent: inToOutTotalTraffic === 0 ? 0 : parseFloat(t.egress_bytes) / inToOutTotalTraffic }))
|
||
var lineSeriesDataUp3 = top10ProvinceInToOutTraffic.map(t => {
|
||
var findData = prevTop10ProvinceInToOutTraffic.find(pt => pt.server_province === t.server_province)
|
||
if (findData) {
|
||
return findData.egress_bytes === 0 ? 0 : parseFloat(((t.egress_bytes - findData.egress_bytes) / parseFloat(findData.egress_bytes) * 100).toFixed(2))
|
||
} else {
|
||
return 0
|
||
}
|
||
})
|
||
var copyLineSeriesData3 = [...lineSeriesDataUp3]
|
||
var copyBarSeriesData3 = [...barSeriesDataUp3]
|
||
copyLineSeriesData3.sort((a, b) => a - b)
|
||
copyBarSeriesData3.sort((a, b) => a.value - b.value)
|
||
var barMax3 = copyBarSeriesData3.length > 0 ? copyBarSeriesData3[copyBarSeriesData3.length - 1].value : 50
|
||
var lineMin3 = copyLineSeriesData3[0] ? copyLineSeriesData3[0] : 0
|
||
var lineMax3 = copyLineSeriesData3.length > 0 ? copyLineSeriesData3[copyLineSeriesData3.length - 1] : 0
|
||
if (lineMin3 == 0 && lineMin3 == lineMax3) {
|
||
lineMin3 = -5
|
||
lineMax3 = 1
|
||
} else {
|
||
var tempLineMin3 = lineMin3
|
||
lineMin3 = lineMin3 - 2.5 * (lineMax3 - lineMin3)
|
||
lineMax3 = lineMax3 + 0.5 * (lineMax3 - tempLineMin3)
|
||
}
|
||
function initEcharts3 () {
|
||
var myChart = echarts.init(document.getElementById('canvas3'))
|
||
var option = {
|
||
animation: false,
|
||
grid: {
|
||
top: 50,
|
||
bottom: 25,
|
||
right: 40,
|
||
left: 70
|
||
},
|
||
legend: {
|
||
show: true,
|
||
top: 'top',
|
||
left: 'left'
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: categoryData3,
|
||
axisLabel: {
|
||
interval: 0,
|
||
fontSize: 12
|
||
}
|
||
},
|
||
yAxis: [
|
||
{
|
||
name: '流量',
|
||
max: barMax3 * 2,
|
||
nameTextStyle: {
|
||
color: 'transparent'
|
||
},
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter (value) {
|
||
return unitConvert(value, unitTypes.byte, unit3).join('')
|
||
}
|
||
}
|
||
},
|
||
{
|
||
show: false,
|
||
name: '环比',
|
||
type: 'value',
|
||
min: lineMin3,
|
||
max: lineMax3
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '上行流量',
|
||
data: barSeriesDataUp3,
|
||
barMinHeight: 5,
|
||
type: 'bar',
|
||
barWidth: 40,
|
||
label: {
|
||
show: true,
|
||
formatter: function (param) {
|
||
return unitConvert(param.value, unitTypes.byte, unit3).join('') + '\n' + unitConvert(param.data.percent, unitTypes.percent).join('')
|
||
},
|
||
distance: 3,
|
||
color: 'rgb(59,162,201)',
|
||
textBorderColor: 'white',
|
||
textBorderWidth: 3,
|
||
position: 'top',
|
||
fontSize: 10
|
||
},
|
||
itemStyle: {
|
||
color: 'rgb(59,162,201)'
|
||
}
|
||
},
|
||
{
|
||
yAxisIndex: 1,
|
||
name: '上行流量环比',
|
||
data: lineSeriesDataUp3,
|
||
type: 'line',
|
||
label: {
|
||
show: true,
|
||
formatter: function (param) {
|
||
return param.value.toFixed(2) + '%'
|
||
},
|
||
textBorderColor: 'white',
|
||
textBorderWidth: 3,
|
||
color: 'rgb(59,162,201)'
|
||
},
|
||
lineStyle: {
|
||
type: 'dashed'
|
||
},
|
||
itemStyle: {
|
||
color: 'rgb(59,162,201)'
|
||
}
|
||
}
|
||
]
|
||
}
|
||
myChart.setOption(option)
|
||
document.getElementById('imgCanvas3').src = myChart.getDataURL({pixelRatio: 1})
|
||
}
|
||
|
||
// 域内访问域外服务的Top 10省份流量分布折线图
|
||
var unit9 = 'KB'
|
||
var categoryData9 = top10ProvinceInToOutTraffic.map(t => t.server_province)
|
||
var barSeriesDataDown9 = top10ProvinceInToOutTraffic.map(t => ({ value: t.ingress_bytes, percent: inToOutTotalTraffic === 0 ? 0 : parseFloat(t.ingress_bytes) / inToOutTotalTraffic }))
|
||
var lineSeriesDataDown9 = top10ProvinceInToOutTraffic.map(t => {
|
||
var findData = prevTop10ProvinceInToOutTraffic.find(pt => pt.server_province === t.server_province)
|
||
if (findData) {
|
||
return findData.ingress_bytes === 0 ? 0.00 : parseFloat(((t.ingress_bytes - findData.ingress_bytes) / parseFloat(findData.ingress_bytes) * 100).toFixed(2))
|
||
} else {
|
||
return 0
|
||
}
|
||
})
|
||
var copyLineSeriesData9 = [...lineSeriesDataDown9]
|
||
var copyBarSeriesData9 = [...barSeriesDataDown9]
|
||
copyLineSeriesData9.sort((a, b) => a - b)
|
||
copyBarSeriesData9.sort((a, b) => a.value - b.value)
|
||
var barMax9 = copyBarSeriesData9.length > 0 ? copyBarSeriesData9[copyBarSeriesData9.length - 1].value : 50
|
||
var lineMin9 = copyLineSeriesData9[0] ? copyLineSeriesData9[0] : 0
|
||
var lineMax9 = copyLineSeriesData9.length > 0 ? copyLineSeriesData9[copyLineSeriesData9.length - 1] : 0
|
||
if (lineMin9 == 0 && lineMin9 == lineMax9) {
|
||
lineMin9 = -5
|
||
lineMax9 = 1
|
||
} else {
|
||
var tempLineMin9 = lineMin9
|
||
lineMin9 = lineMin9 - 2.5 * (lineMax9 - lineMin9)
|
||
lineMax9 = lineMax9 + 0.5 * (lineMax9 - tempLineMin9)
|
||
}
|
||
function initEcharts9 () {
|
||
var myChart = echarts.init(document.getElementById('canvas9'))
|
||
var option = {
|
||
animation: false,
|
||
grid: {
|
||
top: 50,
|
||
bottom: 25,
|
||
right: 40,
|
||
left: 70
|
||
},
|
||
legend: {
|
||
show: true,
|
||
top: 'top',
|
||
left: 'left'
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: categoryData9,
|
||
axisLabel: {
|
||
interval: 0,
|
||
fontSize: 12
|
||
}
|
||
},
|
||
yAxis: [
|
||
{
|
||
name: '流量',
|
||
max: barMax9 * 2,
|
||
nameTextStyle: {
|
||
color: 'transparent'
|
||
},
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter (value) {
|
||
return unitConvert(value, unitTypes.byte, unit9).join('')
|
||
}
|
||
}
|
||
},
|
||
{
|
||
show: false,
|
||
name: '环比',
|
||
type: 'value',
|
||
min: lineMin9,
|
||
max: lineMax9
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '下行流量',
|
||
data: barSeriesDataDown9,
|
||
barMinHeight: 5,
|
||
type: 'bar',
|
||
barWidth: 40,
|
||
label: {
|
||
show: true,
|
||
formatter: function (param) {
|
||
return unitConvert(param.value, unitTypes.byte, unit9).join('') + '\n' + unitConvert(param.data.percent, unitTypes.percent).join('')
|
||
},
|
||
distance: 3,
|
||
color: chartColor[2],
|
||
textBorderColor: 'white',
|
||
textBorderWidth: 3,
|
||
position: 'top',
|
||
fontSize: 10
|
||
},
|
||
itemStyle: {
|
||
color: chartColor[2]
|
||
}
|
||
},
|
||
{
|
||
yAxisIndex: 1,
|
||
name: '下行流量环比',
|
||
data: lineSeriesDataDown9,
|
||
type: 'line',
|
||
label: {
|
||
show: true,
|
||
formatter: function (param) {
|
||
return param.value.toFixed(2) + '%'
|
||
},
|
||
textBorderColor: 'white',
|
||
textBorderWidth: 3,
|
||
color: chartColor[2]
|
||
},
|
||
lineStyle: {
|
||
type: 'dashed'
|
||
},
|
||
itemStyle: {
|
||
color: chartColor[2]
|
||
}
|
||
}
|
||
]
|
||
}
|
||
myChart.setOption(option)
|
||
document.getElementById('imgCanvas9').src = myChart.getDataURL({pixelRatio: 1})
|
||
}
|
||
|
||
// 域外访问域内服务的Top 10省内地区流量分布折线图
|
||
var unit4 = 'KB'
|
||
var categoryData4 = top10CityOutToInTraffic.map(t => t.client_region)
|
||
var barSeriesDataUp4 = top10CityOutToInTraffic.map(t => ({ value: t.egress_bytes, percent: outToInTotalTraffic === 0 ? 0 : parseFloat(t.egress_bytes) / outToInTotalTraffic }))
|
||
var lineSeriesDataUp4 = top10CityOutToInTraffic.map(t => {
|
||
var findData = prevTop10CityOutToInTraffic.find(pt => pt.client_region === t.client_region)
|
||
if (findData) {
|
||
return findData.egress_bytes === 0 ? 0 : parseFloat(((t.egress_bytes - findData.egress_bytes) / parseFloat(findData.egress_bytes) * 100).toFixed(2))
|
||
} else {
|
||
return 0
|
||
}
|
||
})
|
||
var copyLineSeriesData4 = [...lineSeriesDataUp4]
|
||
var copyBarSeriesData4 = [...barSeriesDataUp4]
|
||
copyLineSeriesData4.sort((a, b) => a - b)
|
||
copyBarSeriesData4.sort((a, b) => a.value - b.value)
|
||
var barMax4 = copyBarSeriesData4.length > 0 ? copyBarSeriesData4[copyBarSeriesData4.length - 1].value : 50
|
||
var lineMin4 = copyLineSeriesData4[0] ? copyLineSeriesData4[0] : 0
|
||
var lineMax4 = copyLineSeriesData4.length > 0 ? copyLineSeriesData4[copyLineSeriesData4.length - 1] : 0
|
||
if (lineMin4 == 0 && lineMin4 == lineMax4) {
|
||
lineMin4 = -5
|
||
lineMax4 = 1
|
||
} else {
|
||
var tempLineMin4 = lineMin4
|
||
lineMin4 = lineMin4 - 2.5 * (lineMax4 - lineMin4)
|
||
lineMax4 = lineMax4 + 0.5 * (lineMax4 - tempLineMin4)
|
||
}
|
||
function initEcharts4 () {
|
||
var myChart = echarts.init(document.getElementById('canvas4'))
|
||
var option = {
|
||
animation: false,
|
||
grid: {
|
||
top: 50,
|
||
bottom: 25,
|
||
right: 40,
|
||
left: 70
|
||
},
|
||
legend: {
|
||
show: true,
|
||
top: 'top',
|
||
left: 'left'
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: categoryData4,
|
||
axisLabel: {
|
||
interval: 0,
|
||
fontSize: 12
|
||
}
|
||
},
|
||
yAxis: [
|
||
{
|
||
name: '流量',
|
||
max: barMax4 * 2,
|
||
nameTextStyle: {
|
||
color: 'transparent'
|
||
},
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter (value) {
|
||
return unitConvert(value, unitTypes.byte, unit4).join('')
|
||
}
|
||
}
|
||
},
|
||
{
|
||
show: false,
|
||
name: '环比',
|
||
type: 'value',
|
||
min: lineMin4,
|
||
max: lineMax4
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '上行流量',
|
||
barMinHeight: 5,
|
||
data: barSeriesDataUp4,
|
||
type: 'bar',
|
||
barWidth: 40,
|
||
label: {
|
||
show: true,
|
||
formatter: function (param) {
|
||
return unitConvert(param.value, unitTypes.byte, unit4).join('') + '\n' + unitConvert(param.data.percent, unitTypes.percent).join('')
|
||
},
|
||
color: 'rgb(59,162,201)',
|
||
textBorderColor: 'white',
|
||
textBorderWidth: 3,
|
||
position: 'top',
|
||
fontSize: 10
|
||
},
|
||
itemStyle: {
|
||
color: 'rgb(59,162,201)'
|
||
}
|
||
},
|
||
{
|
||
yAxisIndex: 1,
|
||
name: '上行流量环比',
|
||
data: lineSeriesDataUp4,
|
||
type: 'line',
|
||
label: {
|
||
show: true,
|
||
formatter: function (param) {
|
||
return param.value.toFixed(2) + '%'
|
||
},
|
||
textBorderColor: 'white',
|
||
textBorderWidth: 3,
|
||
color: 'rgb(59,162,201)'
|
||
},
|
||
lineStyle: {
|
||
type: 'dashed'
|
||
},
|
||
itemStyle: {
|
||
color: 'rgb(59,162,201)'
|
||
}
|
||
}
|
||
]
|
||
}
|
||
myChart.setOption(option)
|
||
document.getElementById('imgCanvas4').src = myChart.getDataURL({pixelRatio: 1})
|
||
}
|
||
|
||
// 域外访问域内服务的Top 10省内地区流量分布折线图
|
||
var unit10 = 'KB'
|
||
var categoryData10 = top10CityOutToInTraffic.map(t => t.client_region)
|
||
var barSeriesDataDown10 = top10CityOutToInTraffic.map(t => ({ value: t.ingress_bytes, percent: outToInTotalTraffic === 0 ? 0 : parseFloat(t.ingress_bytes) / outToInTotalTraffic }))
|
||
var lineSeriesDataDown10 = top10CityOutToInTraffic.map(t => {
|
||
var findData = prevTop10CityOutToInTraffic.find(pt => pt.client_region === t.client_region)
|
||
if (findData) {
|
||
return findData.ingress_bytes === 0 ? 0 : parseFloat(((t.ingress_bytes - findData.ingress_bytes) / parseFloat(findData.ingress_bytes) * 100).toFixed(2))
|
||
} else {
|
||
return 0
|
||
}
|
||
})
|
||
var copyLineSeriesData10 = [...lineSeriesDataDown10]
|
||
var copyBarSeriesData10 = [...barSeriesDataDown10]
|
||
copyLineSeriesData10.sort((a, b) => a - b)
|
||
copyBarSeriesData10.sort((a, b) => a.value - b.value)
|
||
var barMax10 = copyBarSeriesData10.length > 0 ? copyBarSeriesData10[copyBarSeriesData10.length - 1].value : 50
|
||
var lineMin10 = copyLineSeriesData10[0] ? copyLineSeriesData10[0] : 0
|
||
var lineMax10 = copyLineSeriesData10.length > 0 ? copyLineSeriesData10[copyLineSeriesData10.length - 1] : 0
|
||
if (lineMin10 == 0 && lineMin10 == lineMax10) {
|
||
lineMin10 = -5
|
||
lineMax10 = 1
|
||
} else {
|
||
var tempLineMin10 = lineMin10
|
||
lineMin10 = lineMin10 - 2.5 * (lineMax10 - lineMin10)
|
||
lineMax10 = lineMax10 + 0.5 * (lineMax10 - tempLineMin10)
|
||
}
|
||
function initEcharts10 () {
|
||
var myChart = echarts.init(document.getElementById('canvas10'))
|
||
var option = {
|
||
animation: false,
|
||
grid: {
|
||
top: 50,
|
||
bottom: 25,
|
||
right: 40,
|
||
left: 70
|
||
},
|
||
legend: {
|
||
show: true,
|
||
top: 'top',
|
||
left: 'left'
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: categoryData10,
|
||
axisLabel: {
|
||
interval: 0,
|
||
fontSize: 12
|
||
}
|
||
},
|
||
yAxis: [
|
||
{
|
||
name: '流量',
|
||
max: barMax10 * 2,
|
||
nameTextStyle: {
|
||
color: 'transparent'
|
||
},
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter (value) {
|
||
return unitConvert(value, unitTypes.byte, unit10).join('')
|
||
}
|
||
}
|
||
},
|
||
{
|
||
show: false,
|
||
name: '环比',
|
||
type: 'value',
|
||
min: lineMin10,
|
||
max: lineMax10
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '下行流量',
|
||
barMinHeight: 5,
|
||
data: barSeriesDataDown10,
|
||
type: 'bar',
|
||
barWidth: 40,
|
||
label: {
|
||
show: true,
|
||
formatter: function (param) {
|
||
return unitConvert(param.value, unitTypes.byte, unit10).join('') + '\n' + unitConvert(param.data.percent, unitTypes.percent).join('')
|
||
},
|
||
color: chartColor[2],
|
||
textBorderColor: 'white',
|
||
textBorderWidth: 3,
|
||
position: 'top',
|
||
fontSize: 10
|
||
},
|
||
itemStyle: {
|
||
color: chartColor[2]
|
||
}
|
||
},
|
||
{
|
||
yAxisIndex: 1,
|
||
name: '下行流量环比',
|
||
data: lineSeriesDataDown10,
|
||
type: 'line',
|
||
label: {
|
||
show: true,
|
||
formatter: function (param) {
|
||
return param.value.toFixed(2) + '%'
|
||
},
|
||
textBorderColor: 'white',
|
||
textBorderWidth: 3,
|
||
color: chartColor[2]
|
||
},
|
||
lineStyle: {
|
||
type: 'dashed'
|
||
},
|
||
itemStyle: {
|
||
color: chartColor[2]
|
||
}
|
||
}
|
||
]
|
||
}
|
||
myChart.setOption(option)
|
||
document.getElementById('imgCanvas10').src = myChart.getDataURL({pixelRatio: 1})
|
||
}
|
||
|
||
// 域内访问域外服务的TOP 10省内地区流量分布折线图
|
||
var unit5 = 'KB'
|
||
var categoryData5 = top10CityInToOutTraffic.map(t => t.server_region)
|
||
var barSeriesDataUp5 = top10CityInToOutTraffic.map(t => ({ value: t.egress_bytes, percent: inToOutTotalTraffic === 0 ? 0 : parseFloat(t.egress_bytes) / inToOutTotalTraffic }))
|
||
var lineSeriesDataUp5 = top10CityInToOutTraffic.map(t => {
|
||
var findData = prevTop10CityInToOutTraffic.find(pt => pt.client_region === t.client_region)
|
||
if (findData) {
|
||
return findData.egress_bytes === 0 ? 0 : parseFloat(((t.egress_bytes - findData.egress_bytes) / parseFloat(findData.egress_bytes) * 100).toFixed(2))
|
||
} else {
|
||
return 0
|
||
}
|
||
})
|
||
var copyLineSeriesData5 = [...lineSeriesDataUp5]
|
||
var copyBarSeriesData5 = [...barSeriesDataUp5]
|
||
copyLineSeriesData5.sort((a, b) => a - b)
|
||
copyBarSeriesData5.sort((a, b) => a.value - b.value)
|
||
var barMax5 = copyBarSeriesData5.length > 0 ? copyBarSeriesData5[copyBarSeriesData5.length - 1].value : 50
|
||
var lineMin5 = copyLineSeriesData5[0] ? copyLineSeriesData5[0] : 0
|
||
var lineMax5 = copyLineSeriesData5.length > 0 ? copyLineSeriesData5[copyLineSeriesData5.length - 1] : 0
|
||
if (lineMin5 == 0 && lineMin5 == lineMax5) {
|
||
lineMin5 = -5
|
||
lineMax5 = 1
|
||
} else {
|
||
var tempLineMin5 = lineMin5
|
||
lineMin5 = lineMin5 - 2.5 * (lineMax5 - lineMin5)
|
||
lineMax5 = lineMax5 + 0.5 * (lineMax5 - tempLineMin5)
|
||
}
|
||
function initEcharts5 () {
|
||
var myChart = echarts.init(document.getElementById('canvas5'))
|
||
var option = {
|
||
animation: false,
|
||
grid: {
|
||
top: 50,
|
||
bottom: 25,
|
||
right: 40,
|
||
left: 70
|
||
},
|
||
legend: {
|
||
show: true,
|
||
top: 'top',
|
||
left: 'left'
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: categoryData5,
|
||
axisLabel: {
|
||
interval: 0,
|
||
fontSize: 12
|
||
}
|
||
},
|
||
yAxis: [
|
||
{
|
||
name: '流量',
|
||
max: barMax5 * 2,
|
||
nameTextStyle: {
|
||
color: 'transparent'
|
||
},
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter (value) {
|
||
return unitConvert(value, unitTypes.byte, unit5).join('')
|
||
}
|
||
}
|
||
},
|
||
{
|
||
show: false,
|
||
name: '环比',
|
||
type: 'value',
|
||
min: lineMin5,
|
||
max: lineMax5
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '上行流量',
|
||
barMinHeight: 5,
|
||
data: barSeriesDataUp5,
|
||
type: 'bar',
|
||
barWidth: 40,
|
||
label: {
|
||
show: true,
|
||
formatter: function (param) {
|
||
return unitConvert(param.value, unitTypes.byte, unit5).join('') + '\n' + unitConvert(param.data.percent, unitTypes.percent).join('')
|
||
},
|
||
color: 'rgb(59,162,201)',
|
||
textBorderColor: 'white',
|
||
textBorderWidth: 3,
|
||
position: 'top',
|
||
fontSize: 10
|
||
},
|
||
itemStyle: {
|
||
color: 'rgb(59,162,201)'
|
||
}
|
||
},
|
||
{
|
||
yAxisIndex: 1,
|
||
name: '上行流量环比',
|
||
data: lineSeriesDataUp5,
|
||
type: 'line',
|
||
label: {
|
||
show: true,
|
||
formatter: function (param) {
|
||
return param.value.toFixed(2) + '%'
|
||
},
|
||
textBorderColor: 'white',
|
||
textBorderWidth: 3,
|
||
color: 'rgb(59,162,201)'
|
||
},
|
||
lineStyle: {
|
||
type: 'dashed'
|
||
},
|
||
itemStyle: {
|
||
color: 'rgb(59,162,201)'
|
||
}
|
||
}
|
||
]
|
||
}
|
||
myChart.setOption(option)
|
||
document.getElementById('imgCanvas5').src = myChart.getDataURL({pixelRatio: 1})
|
||
}
|
||
|
||
// 域内访问域外服务的TOP 10省内地区流量分布折线图
|
||
var unit11 = 'KB'
|
||
var categoryData11 = top10CityInToOutTraffic.map(t => t.server_region)
|
||
var barSeriesDataDown11 = top10CityInToOutTraffic.map(t => ({ value: t.ingress_bytes, percent: inToOutTotalTraffic === 0 ? 0 : parseFloat(t.ingress_bytes) / inToOutTotalTraffic }))
|
||
var lineSeriesDataDown11 = top10CityInToOutTraffic.map(t => {
|
||
var findData = prevTop10CityInToOutTraffic.find(pt => pt.client_region === t.client_region)
|
||
if (findData) {
|
||
return findData.ingress_bytes === 0 ? 0 : parseFloat(((t.ingress_bytes - findData.ingress_bytes) / parseFloat(findData.ingress_bytes) * 100).toFixed(2))
|
||
} else {
|
||
return 0
|
||
}
|
||
})
|
||
var copyLineSeriesData11 = [...lineSeriesDataDown11]
|
||
var copyBarSeriesData11 = [...barSeriesDataDown11]
|
||
copyLineSeriesData11.sort((a, b) => a - b)
|
||
copyBarSeriesData11.sort((a, b) => a.value - b.value)
|
||
var barMax11 = copyBarSeriesData11.length > 0 ? copyBarSeriesData11[copyBarSeriesData11.length - 1].value : 50
|
||
var lineMin11 = copyLineSeriesData11[0] ? copyLineSeriesData11[0] : 0
|
||
var lineMax11 = copyLineSeriesData11.length > 0 ? copyLineSeriesData11[copyLineSeriesData11.length - 1] : 0
|
||
if (lineMin11 == 0 && lineMin11 == lineMax11) {
|
||
lineMin11 = -5
|
||
lineMax11 = 1
|
||
} else {
|
||
var tempLineMin11 = lineMin11
|
||
lineMin11 = lineMin11 - 2.5 * (lineMax11 - lineMin11)
|
||
lineMax11 = lineMax11 + 0.5 * (lineMax11 - tempLineMin11)
|
||
}
|
||
function initEcharts11 () {
|
||
var myChart = echarts.init(document.getElementById('canvas11'))
|
||
var option = {
|
||
animation: false,
|
||
grid: {
|
||
top: 50,
|
||
bottom: 25,
|
||
right: 40,
|
||
left: 70
|
||
},
|
||
legend: {
|
||
show: true,
|
||
top: 'top',
|
||
left: 'left'
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: categoryData11,
|
||
axisLabel: {
|
||
interval: 0,
|
||
fontSize: 12
|
||
}
|
||
},
|
||
yAxis: [
|
||
{
|
||
name: '流量',
|
||
max: barMax11 * 2,
|
||
nameTextStyle: {
|
||
color: 'transparent'
|
||
},
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter (value) {
|
||
return unitConvert(value, unitTypes.byte, unit11).join('')
|
||
}
|
||
}
|
||
},
|
||
{
|
||
show: false,
|
||
name: '环比',
|
||
type: 'value',
|
||
min: lineMin11,
|
||
max: lineMax11
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '下行流量',
|
||
barMinHeight: 5,
|
||
data: barSeriesDataDown11,
|
||
type: 'bar',
|
||
barWidth: 40,
|
||
label: {
|
||
show: true,
|
||
formatter: function (param) {
|
||
return unitConvert(param.value, unitTypes.byte, unit11).join('') + '\n' + unitConvert(param.data.percent, unitTypes.percent).join('')
|
||
},
|
||
color: chartColor[2],
|
||
textBorderColor: 'white',
|
||
textBorderWidth: 3,
|
||
position: 'top',
|
||
fontSize: 10
|
||
},
|
||
itemStyle: {
|
||
color: chartColor[2]
|
||
}
|
||
},
|
||
{
|
||
yAxisIndex: 1,
|
||
name: '下行流量环比',
|
||
data: lineSeriesDataDown11,
|
||
type: 'line',
|
||
label: {
|
||
show: true,
|
||
formatter: function (param) {
|
||
return param.value.toFixed(2) + '%'
|
||
},
|
||
textBorderColor: 'white',
|
||
textBorderWidth: 3,
|
||
color: chartColor[2]
|
||
},
|
||
lineStyle: {
|
||
type: 'dashed'
|
||
},
|
||
itemStyle: {
|
||
color: chartColor[2]
|
||
}
|
||
}
|
||
]
|
||
}
|
||
myChart.setOption(option)
|
||
document.getElementById('imgCanvas11').src = myChart.getDataURL({pixelRatio: 1})
|
||
}
|
||
|
||
var total6 = top3S2cTotalTraffic[0]
|
||
var seriesData6 = []
|
||
var startAngle6 = 90
|
||
if (total6) {
|
||
var missedCache6 = missedCacheS2cTraffic.find(t => total6.server_idc_renter === t.client_idc_renter)
|
||
if (missedCache6) {
|
||
seriesData6.push({ name: '缓存未命中流量', value: missedCache6.received_bytes })
|
||
seriesData6.push({ name: '缓存命中流量', value: total6.received_bytes - missedCache6.received_bytes })
|
||
var halfAngle6 = (seriesData6[0].value / total6.received_bytes) * 360 / 2
|
||
startAngle6 = startAngle6 + halfAngle6 - 5
|
||
}
|
||
}
|
||
|
||
var pieOption = {
|
||
legend: {
|
||
show: false
|
||
},
|
||
title: {
|
||
show: true,
|
||
bottom: 0,
|
||
left: 'center',
|
||
textStyle: {
|
||
fontSize: 14
|
||
}
|
||
},
|
||
color: chartColor,
|
||
animation: false,
|
||
series: [
|
||
{
|
||
type: 'pie',
|
||
radius: [45, 85],
|
||
label: {
|
||
formatter: '{b} {d}%',
|
||
fontSize: 12,
|
||
},
|
||
center: ['50%', 130],
|
||
itemStyle: {
|
||
borderWidth: 1,
|
||
borderColor: 'white'
|
||
}
|
||
}
|
||
]
|
||
}
|
||
function initEcharts6 () {
|
||
var myChart = echarts.init(document.getElementById('canvas6'))
|
||
var option = JSON.parse(JSON.stringify(pieOption))
|
||
option.series[0].data = seriesData6
|
||
option.title.text = total6 ? total6.server_idc_renter : '-'
|
||
option.series[0].startAngle = startAngle6
|
||
myChart.setOption(option)
|
||
document.getElementById('imgCanvas6').src = myChart.getDataURL({pixelRatio: 1})
|
||
}
|
||
|
||
var total7 = top3Sessions[0]
|
||
var seriesData7 = []
|
||
var startAngle7 = 90
|
||
if (total7) {
|
||
var missedCache7 = missedCacheSession.find(t => total7.server_idc_renter === t.client_idc_renter)
|
||
if (missedCache7) {
|
||
seriesData7.push({ name: '缓存未命中会话', value: missedCache7.sessions })
|
||
seriesData7.push({ name: '缓存命中会话', value: total7.sessions - missedCache7.sessions })
|
||
var halfAngle7 = (seriesData7[0].value / total7.sessions) * 360 / 2
|
||
startAngle7 = startAngle7 + halfAngle7 - 5
|
||
}
|
||
}
|
||
function initEcharts7 () {
|
||
var myChart = echarts.init(document.getElementById('canvas7'))
|
||
var option = JSON.parse(JSON.stringify(pieOption))
|
||
option.series[0].data = seriesData7
|
||
option.title.text = total7 ? total7.server_idc_renter : '-'
|
||
option.series[0].startAngle = startAngle7
|
||
myChart.setOption(option)
|
||
document.getElementById('imgCanvas7').src = myChart.getDataURL({pixelRatio: 1})
|
||
}
|
||
|
||
initEcharts1()
|
||
initEcharts2()
|
||
initEcharts3()
|
||
initEcharts4()
|
||
initEcharts5()
|
||
initEcharts6()
|
||
initEcharts7()
|
||
initEcharts8()
|
||
initEcharts9()
|
||
initEcharts10()
|
||
initEcharts11()
|
||
initTimeRange()
|
||
</script>
|
||
|
||
|
||
|
||
</body></html>
|