4882 lines
134 KiB
HTML
4882 lines
134 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<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;
|
||
}
|
||
.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"></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 域内访问域外流量的服务质量</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会话创建延迟</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 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">786.09 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">902.70 ms</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="table__td">902.42 ms</td>
|
||
<td class="table__td">36.30 ms</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">3%</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">4%</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">5%</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="table__td">902.42 %</td>
|
||
<td class="table__td">36.30 %</td>
|
||
<td class="table__td">8.14%</td>
|
||
</tr>
|
||
</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>
|
||
<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">499.31 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">786.09 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">902.70 ms</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="table__td">902.42 ms</td>
|
||
<td class="table__td">36.30 ms</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%</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%</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%</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="table__td">902.42%</td>
|
||
<td class="table__td">36.30%</td>
|
||
<td class="table__td">8.14%</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="header2">二.业务流量排名</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">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 TOP10 APP流量情况</div>
|
||
</div>
|
||
|
||
<div class="header2">三.业务质量概况</div>
|
||
<div class="table-box indent-3">
|
||
<div class="table__title">表4 TOP10 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 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">143 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">15 ms</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="table__td">27.60 ms</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="header3">1.各省份流量分布</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">APP流量速率</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>
|
||
<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;">图3 TOP10省份访问流量分布</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: 366px">西宁</th>
|
||
<th class="table__th" style="width: 366px;">太原</th>
|
||
<th class="table__th" style="width: 366px;">西安</th>
|
||
</tr>
|
||
</thead>
|
||
<tr class="table__tr">
|
||
<td class="table__td">
|
||
<div class="echarts-box">
|
||
<div class="echarts">
|
||
<div class="echarts__canvas" id="canvas4" style="width: 360px; height: 200px; display: none;"></div>
|
||
<img height="200" width="360" id="imgCanvas4"/>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="table__td">
|
||
<div class="echarts-box">
|
||
<div class="echarts">
|
||
<div class="echarts__canvas" id="canvas5" style="width: 360px; height: 200px; display: none;"></div>
|
||
<img height="200" width="360" id="imgCanvas5"/>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="table__td">
|
||
<div class="echarts-box">
|
||
<div class="echarts">
|
||
<div class="echarts__canvas" id="canvas6" style="width: 360px; height: 200px; display: none;"></div>
|
||
<img height="200" width="360" id="imgCanvas6"/>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
<div class="echarts__title">图4 TOP3省份访问的主要APP的流量占比</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: 280px;">douyin</th>
|
||
<th class="table__th" style="width: 280px;">wechat</th>
|
||
<th class="table__th" style="width: 280px;">aaaa</th>
|
||
</tr>
|
||
</thead>
|
||
<tr class="table__tr">
|
||
<td class="table__td">
|
||
<div class="echarts-box">
|
||
<div class="echarts">
|
||
<div class="echarts__canvas" id="canvas7" style="width: 360px; height: 200px; display: none;"></div>
|
||
<img height="200" width="360" id="imgCanvas7"/>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="table__td">
|
||
<div class="echarts-box">
|
||
<div class="echarts">
|
||
<div class="echarts__canvas" id="canvas8" style="width: 360px; height: 200px; display: none;"></div>
|
||
<img height="200" width="360" id="imgCanvas8"/>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="table__td">
|
||
<div class="echarts-box">
|
||
<div class="echarts">
|
||
<div class="echarts__canvas" id="canvas9" style="width: 360px; height: 200px; display: none;"></div>
|
||
<img height="200" width="360" id="imgCanvas9"/>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
<div class="echarts__title">图5 访问TOP3 APP的各省份流量占比</div>
|
||
|
||
<div class="header3">2.省内各地区流量分布</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">APP流量速率</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>
|
||
<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;">图6 TOP10省内各地区流量分布</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: 366px">西宁</th>
|
||
<th class="table__th" style="width: 366px;">太原</th>
|
||
<th class="table__th" style="width: 366px;">西安</th>
|
||
</tr>
|
||
</thead>
|
||
<tr class="table__tr">
|
||
<td class="table__td">
|
||
<div class="echarts-box">
|
||
<div class="echarts">
|
||
<div class="echarts__canvas" id="canvas11" style="width: 360px; height: 200px; display: none;"></div>
|
||
<img height="200" width="360" id="imgCanvas11"/>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="table__td">
|
||
<div class="echarts-box">
|
||
<div class="echarts">
|
||
<div class="echarts__canvas" id="canvas12" style="width: 360px; height: 200px; display: none;"></div>
|
||
<img height="200" width="360" id="imgCanvas12"/>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="table__td">
|
||
<div class="echarts-box">
|
||
<div class="echarts">
|
||
<div class="echarts__canvas" id="canvas13" style="width: 360px; height: 200px; display: none;"></div>
|
||
<img height="200" width="360" id="imgCanvas13"/>
|
||
</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="currentRange7"></div>
|
||
</div>
|
||
<div class="echarts__legend">
|
||
<div class="color-block green"></div>
|
||
<div class="legend-text" id="prevRange7"></div>
|
||
</div>
|
||
</div>
|
||
<div class="echarts__title">图7 TOP3省内各地区访问的主要APP的流量分布</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: 366px;">douyin</th>
|
||
<th class="table__th" style="width: 366px;">wechat</th>
|
||
<th class="table__th" style="width: 366px;">aaaa</th>
|
||
</tr>
|
||
</thead>
|
||
<tr class="table__tr">
|
||
<td class="table__td">
|
||
<div class="echarts-box">
|
||
<div class="echarts">
|
||
<div class="echarts__canvas" id="canvas14" style="width: 360px; height: 200px; display: none;"></div>
|
||
<img height="200" width="360" id="imgCanvas14"/>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="table__td">
|
||
<div class="echarts-box">
|
||
<div class="echarts">
|
||
<div class="echarts__canvas" id="canvas15" style="width: 360px; height: 200px; display: none;"></div>
|
||
<img height="200" width="360" id="imgCanvas15"/>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="table__td">
|
||
<div class="echarts-box">
|
||
<div class="echarts">
|
||
<div class="echarts__canvas" id="canvas16" style="width: 360px; height: 200px; display: none;"></div>
|
||
<img height="200" width="360" id="imgCanvas16"/>
|
||
</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="currentRange8"></div>
|
||
</div>
|
||
<div class="echarts__legend">
|
||
<div class="color-block green"></div>
|
||
<div class="legend-text" id="prevRange8"></div>
|
||
</div>
|
||
</div>
|
||
<div class="echarts__title">图8 访问TOP3 APP的省内各地区流量占比</div>
|
||
</body>
|
||
<script>
|
||
/** 数据 begin */
|
||
// 时间区间
|
||
var timeRange = [1648742400, 1648828800]
|
||
/* 1.1 流量变化曲线 */
|
||
var trafficData = [
|
||
{stat_time:1646323200000,rate:772532872894},
|
||
{stat_time:1646323500000,rate:737472933103},
|
||
{stat_time:1646323800000,rate:718003693762},
|
||
{stat_time:1646324100000,rate:787275787118},
|
||
{stat_time:1646324400000,rate:675091838555},
|
||
{stat_time:1646324700000,rate:665907987145},
|
||
{stat_time:1646325000000,rate:663995345084},
|
||
{stat_time:1646325300000,rate:673263448146},
|
||
{stat_time:1646325600000,rate:623024467477},
|
||
{stat_time:1646325900000,rate:607518328769},
|
||
{stat_time:1646326200000,rate:595596692291},
|
||
{stat_time:1646326500000,rate:576685657915},
|
||
{stat_time:1646326800000,rate:563125388840},
|
||
{stat_time:1646327100000,rate:536629805389},
|
||
{stat_time:1646327400000,rate:512064513301},
|
||
{stat_time:1646327700000,rate:500112361755},
|
||
{stat_time:1646328000000,rate:483313489075},
|
||
{stat_time:1646328300000,rate:529000513941},
|
||
{stat_time:1646328600000,rate:434706003334},
|
||
{stat_time:1646328900000,rate:420330833357},
|
||
{stat_time:1646329200000,rate:412221073080},
|
||
{stat_time:1646329500000,rate:381581636955},
|
||
{stat_time:1646329800000,rate:368380772263},
|
||
{stat_time:1646330100000,rate:355612050222},
|
||
{stat_time:1646330400000,rate:346546307434},
|
||
{stat_time:1646330700000,rate:351106970704},
|
||
{stat_time:1646331000000,rate:306402436164},
|
||
{stat_time:1646331300000,rate:307549388296},
|
||
{stat_time:1646331600000,rate:289914454618},
|
||
{stat_time:1646331900000,rate:269914427899},
|
||
{stat_time:1646332200000,rate:265810006551},
|
||
{stat_time:1646332500000,rate:325605447693},
|
||
{stat_time:1646332800000,rate:228689729283},
|
||
{stat_time:1646333100000,rate:221380076104},
|
||
{stat_time:1646333400000,rate:214688315185},
|
||
{stat_time:1646333700000,rate:207430475082},
|
||
{stat_time:1646334000000,rate:228531765558},
|
||
{stat_time:1646334300000,rate:218633588553},
|
||
{stat_time:1646334600000,rate:177510090490},
|
||
{stat_time:1646334900000,rate:172114088332},
|
||
{stat_time:1646335200000,rate:167588261185},
|
||
{stat_time:1646335500000,rate:160522955738},
|
||
{stat_time:1646335800000,rate:158616961652},
|
||
{stat_time:1646336100000,rate:157404547208},
|
||
{stat_time:1646336400000,rate:146780416292},
|
||
{stat_time:1646336700000,rate:142851201793},
|
||
{stat_time:1646337000000,rate:143891943824},
|
||
{stat_time:1646337300000,rate:144832687528},
|
||
{stat_time:1646337600000,rate:134942949909},
|
||
{stat_time:1646337900000,rate:126263388287},
|
||
{stat_time:1646338200000,rate:130563200859},
|
||
{stat_time:1646338500000,rate:124184387098},
|
||
{stat_time:1646338800000,rate:116545272633},
|
||
{stat_time:1646339100000,rate:121405570250},
|
||
{stat_time:1646339400000,rate:114561101206},
|
||
{stat_time:1646339700000,rate:110468589545},
|
||
{stat_time:1646340000000,rate:113104811845},
|
||
{stat_time:1646340300000,rate:112646490470},
|
||
{stat_time:1646340600000,rate:111953785239},
|
||
{stat_time:1646340900000,rate:102888018727},
|
||
{stat_time:1646341200000,rate:102796512378},
|
||
{stat_time:1646341500000,rate:101049996649},
|
||
{stat_time:1646341800000,rate:96283941675},
|
||
{stat_time:1646342100000,rate:95502450781},
|
||
{stat_time:1646342400000,rate:91188952241},
|
||
{stat_time:1646342700000,rate:91720190187},
|
||
{stat_time:1646343000000,rate:93628795245},
|
||
{stat_time:1646343300000,rate:86417843281},
|
||
{stat_time:1646343600000,rate:86166292795},
|
||
{stat_time:1646343900000,rate:83983490611},
|
||
{stat_time:1646344200000,rate:87798450663},
|
||
{stat_time:1646344500000,rate:88662331578},
|
||
{stat_time:1646344800000,rate:87145266635},
|
||
{stat_time:1646345100000,rate:87856564892},
|
||
{stat_time:1646345400000,rate:91884802839},
|
||
{stat_time:1646345700000,rate:90421909864},
|
||
{stat_time:1646346000000,rate:90618563208},
|
||
{stat_time:1646346300000,rate:88114179946},
|
||
{stat_time:1646346600000,rate:88056019830},
|
||
{stat_time:1646346900000,rate:89552706480},
|
||
{stat_time:1646347200000,rate:94847380620},
|
||
{stat_time:1646347500000,rate:92714721441},
|
||
{stat_time:1646347800000,rate:90831666011},
|
||
{stat_time:1646348100000,rate:117785027484},
|
||
{stat_time:1646348400000,rate:95847207702},
|
||
{stat_time:1646348700000,rate:96714010066},
|
||
{stat_time:1646349000000,rate:95093327595},
|
||
{stat_time:1646349300000,rate:105594955186},
|
||
{stat_time:1646349600000,rate:106301457552},
|
||
{stat_time:1646349900000,rate:112033934697},
|
||
{stat_time:1646350200000,rate:110924049081},
|
||
{stat_time:1646350500000,rate:117038870948},
|
||
{stat_time:1646350800000,rate:122285968342},
|
||
{stat_time:1646351100000,rate:129225537263},
|
||
{stat_time:1646351400000,rate:135303008087},
|
||
{stat_time:1646351700000,rate:144618274688},
|
||
{stat_time:1646352000000,rate:160191289955},
|
||
{stat_time:1646352300000,rate:174804633925},
|
||
{stat_time:1646352600000,rate:169371000210},
|
||
{stat_time:1646352900000,rate:185220468936},
|
||
{stat_time:1646353200000,rate:188625450543},
|
||
{stat_time:1646353500000,rate:203201591624},
|
||
{stat_time:1646353800000,rate:229816839313},
|
||
{stat_time:1646354100000,rate:218415543727},
|
||
{stat_time:1646354400000,rate:227099952017},
|
||
{stat_time:1646354700000,rate:235943215456},
|
||
{stat_time:1646355000000,rate:247778577722},
|
||
{stat_time:1646355300000,rate:261692796377},
|
||
{stat_time:1646355600000,rate:271103332032},
|
||
{stat_time:1646355900000,rate:281777626596},
|
||
{stat_time:1646356200000,rate:298629680799},
|
||
{stat_time:1646356500000,rate:294071950673},
|
||
{stat_time:1646356800000,rate:307591643611},
|
||
{stat_time:1646357100000,rate:314096020387},
|
||
{stat_time:1646357400000,rate:322787548616},
|
||
{stat_time:1646357700000,rate:326521884163},
|
||
{stat_time:1646358000000,rate:336418677250},
|
||
{stat_time:1646358300000,rate:345710499037},
|
||
{stat_time:1646358600000,rate:347096385973},
|
||
{stat_time:1646358900000,rate:353403522514},
|
||
{stat_time:1646359200000,rate:368144445750},
|
||
{stat_time:1646359500000,rate:371593197939},
|
||
{stat_time:1646359800000,rate:376720441131},
|
||
{stat_time:1646360100000,rate:384921440707},
|
||
{stat_time:1646360400000,rate:384856278322},
|
||
{stat_time:1646360700000,rate:390655320977},
|
||
{stat_time:1646361000000,rate:393831467047},
|
||
{stat_time:1646361300000,rate:397622731052},
|
||
{stat_time:1646361600000,rate:407859512345},
|
||
{stat_time:1646361900000,rate:409459764011},
|
||
{stat_time:1646362200000,rate:409923219718},
|
||
{stat_time:1646362500000,rate:417388328374},
|
||
{stat_time:1646362800000,rate:421081337847},
|
||
{stat_time:1646363100000,rate:425995051530},
|
||
{stat_time:1646363400000,rate:482837867511},
|
||
{stat_time:1646363700000,rate:425714780866},
|
||
{stat_time:1646364000000,rate:423099990656},
|
||
{stat_time:1646364300000,rate:430364721344},
|
||
{stat_time:1646364600000,rate:436598213078},
|
||
{stat_time:1646364900000,rate:440885401830},
|
||
{stat_time:1646365200000,rate:454553393946},
|
||
{stat_time:1646365500000,rate:452835614814},
|
||
{stat_time:1646365800000,rate:456484123399},
|
||
{stat_time:1646366100000,rate:457290438810},
|
||
{stat_time:1646366400000,rate:465870786741},
|
||
{stat_time:1646366700000,rate:468488230914},
|
||
{stat_time:1646367000000,rate:473969109825},
|
||
{stat_time:1646367300000,rate:474162132998},
|
||
{stat_time:1646367600000,rate:479733893487},
|
||
{stat_time:1646367900000,rate:490254608588},
|
||
{stat_time:1646368200000,rate:492288519732},
|
||
{stat_time:1646368500000,rate:493088178908},
|
||
{stat_time:1646368800000,rate:491006146192},
|
||
{stat_time:1646369100000,rate:494753570234},
|
||
{stat_time:1646369400000,rate:497863023455},
|
||
{stat_time:1646369700000,rate:532366285263},
|
||
{stat_time:1646370000000,rate:490041427553},
|
||
{stat_time:1646370300000,rate:494902680280},
|
||
{stat_time:1646370600000,rate:498125874014},
|
||
{stat_time:1646370900000,rate:505359743295},
|
||
{stat_time:1646371200000,rate:504338218695},
|
||
{stat_time:1646371500000,rate:505417771401},
|
||
{stat_time:1646371800000,rate:509034977314},
|
||
{stat_time:1646372100000,rate:511892791322},
|
||
{stat_time:1646372400000,rate:516100206671},
|
||
{stat_time:1646372700000,rate:523280635042},
|
||
{stat_time:1646373000000,rate:533498235909},
|
||
{stat_time:1646373300000,rate:536796333516},
|
||
{stat_time:1646373600000,rate:551749048332},
|
||
{stat_time:1646373900000,rate:555131083787},
|
||
{stat_time:1646374200000,rate:566073763029},
|
||
{stat_time:1646374500000,rate:572503869450},
|
||
{stat_time:1646374800000,rate:581731981613},
|
||
{stat_time:1646375100000,rate:587988292609},
|
||
{stat_time:1646375400000,rate:600557395255},
|
||
{stat_time:1646375700000,rate:605807729086},
|
||
{stat_time:1646376000000,rate:692732845270},
|
||
{stat_time:1646376300000,rate:564507238172},
|
||
{stat_time:1646376600000,rate:564951524109},
|
||
{stat_time:1646376900000,rate:565687332976},
|
||
{stat_time:1646377200000,rate:609399687934},
|
||
{stat_time:1646377500000,rate:538156993674},
|
||
{stat_time:1646377800000,rate:540328705623},
|
||
{stat_time:1646378100000,rate:532195464380},
|
||
{stat_time:1646378400000,rate:521074412796},
|
||
{stat_time:1646378700000,rate:516827990470},
|
||
{stat_time:1646379000000,rate:516573361943},
|
||
{stat_time:1646379300000,rate:511874422203},
|
||
{stat_time:1646379600000,rate:508645651472},
|
||
{stat_time:1646379900000,rate:506269721953},
|
||
{stat_time:1646380200000,rate:506317818150},
|
||
{stat_time:1646380500000,rate:505808996974},
|
||
{stat_time:1646380800000,rate:501538854606},
|
||
{stat_time:1646381100000,rate:507010826102},
|
||
{stat_time:1646381400000,rate:548333571481},
|
||
{stat_time:1646381700000,rate:489024700765},
|
||
{stat_time:1646382000000,rate:493991292211},
|
||
{stat_time:1646382300000,rate:502385633763},
|
||
{stat_time:1646382600000,rate:502402704141},
|
||
{stat_time:1646382900000,rate:502259888550},
|
||
{stat_time:1646383200000,rate:519948206893},
|
||
{stat_time:1646383500000,rate:506239688156},
|
||
{stat_time:1646383800000,rate:543347948433},
|
||
{stat_time:1646384100000,rate:498511959066},
|
||
{stat_time:1646384400000,rate:512642317007},
|
||
{stat_time:1646384700000,rate:512932141312},
|
||
{stat_time:1646385000000,rate:513112952130},
|
||
{stat_time:1646385300000,rate:525054894052},
|
||
{stat_time:1646385600000,rate:520325935700},
|
||
{stat_time:1646385900000,rate:527240474168},
|
||
{stat_time:1646386200000,rate:523617937557},
|
||
{stat_time:1646386500000,rate:529364687794},
|
||
{stat_time:1646386800000,rate:535594151283},
|
||
{stat_time:1646387100000,rate:532570628846},
|
||
{stat_time:1646387400000,rate:529527878395},
|
||
{stat_time:1646387700000,rate:529929031523},
|
||
{stat_time:1646388000000,rate:527900296600},
|
||
{stat_time:1646388300000,rate:527541592058},
|
||
{stat_time:1646388600000,rate:529046251110},
|
||
{stat_time:1646388900000,rate:545756964174},
|
||
{stat_time:1646389200000,rate:536604796869},
|
||
{stat_time:1646389500000,rate:541063045749},
|
||
{stat_time:1646389800000,rate:544931242676},
|
||
{stat_time:1646390100000,rate:551184984349},
|
||
{stat_time:1646390400000,rate:555122992220},
|
||
{stat_time:1646390700000,rate:577249146584},
|
||
{stat_time:1646391000000,rate:573953265498},
|
||
{stat_time:1646391300000,rate:563624187481},
|
||
{stat_time:1646391600000,rate:579499417800},
|
||
{stat_time:1646391900000,rate:574808833840},
|
||
{stat_time:1646392200000,rate:571952935514},
|
||
{stat_time:1646392500000,rate:583361001294},
|
||
{stat_time:1646392800000,rate:585485310090},
|
||
{stat_time:1646393100000,rate:595694314567},
|
||
{stat_time:1646393400000,rate:594423439642},
|
||
{stat_time:1646393700000,rate:605240653345},
|
||
{stat_time:1646394000000,rate:610218412423},
|
||
{stat_time:1646394300000,rate:609736256632},
|
||
{stat_time:1646394600000,rate:625699016259},
|
||
{stat_time:1646394900000,rate:628300934891},
|
||
{stat_time:1646395200000,rate:632089061066},
|
||
{stat_time:1646395500000,rate:644450648756},
|
||
{stat_time:1646395800000,rate:651920826942},
|
||
{stat_time:1646396100000,rate:656231274059},
|
||
{stat_time:1646396400000,rate:674012331354},
|
||
{stat_time:1646396700000,rate:671956613128},
|
||
{stat_time:1646397000000,rate:683940816363},
|
||
{stat_time:1646397300000,rate:683340014775},
|
||
{stat_time:1646397600000,rate:679486462327},
|
||
{stat_time:1646397900000,rate:688855536686},
|
||
{stat_time:1646398200000,rate:699511886641},
|
||
{stat_time:1646398500000,rate:712946834507},
|
||
{stat_time:1646398800000,rate:722430075071},
|
||
{stat_time:1646399100000,rate:727410447518},
|
||
{stat_time:1646399400000,rate:734104909319},
|
||
{stat_time:1646399700000,rate:754513406782},
|
||
{stat_time:1646400000000,rate:762098029749},
|
||
{stat_time:1646400300000,rate:765969642914},
|
||
{stat_time:1646400600000,rate:763326584440},
|
||
{stat_time:1646400900000,rate:788479131162},
|
||
{stat_time:1646401200000,rate:785584677446},
|
||
{stat_time:1646401500000,rate:788441495121},
|
||
{stat_time:1646401800000,rate:815279057900},
|
||
{stat_time:1646402100000,rate:808788386447},
|
||
{stat_time:1646402400000,rate:844383983384},
|
||
{stat_time:1646402700000,rate:829771825399},
|
||
{stat_time:1646403000000,rate:836759193214},
|
||
{stat_time:1646403300000,rate:844231456933},
|
||
{stat_time:1646403600000,rate:850022414566},
|
||
{stat_time:1646403900000,rate:861044947245},
|
||
{stat_time:1646404200000,rate:864475664031},
|
||
{stat_time:1646404500000,rate:862578363480},
|
||
{stat_time:1646404800000,rate:880442618138},
|
||
{stat_time:1646405100000,rate:883893550796},
|
||
{stat_time:1646405400000,rate:887163599665},
|
||
{stat_time:1646405700000,rate:890597233508},
|
||
{stat_time:1646406000000,rate:902523833111},
|
||
{stat_time:1646406300000,rate:905550838362},
|
||
{stat_time:1646406600000,rate:903859297382},
|
||
{stat_time:1646406900000,rate:1017118927323},
|
||
{stat_time:1646407200000,rate:861804321876},
|
||
{stat_time:1646407500000,rate:864349855668},
|
||
{stat_time:1646407800000,rate:867948911157},
|
||
{stat_time:1646408100000,rate:857509874184},
|
||
{stat_time:1646408400000,rate:859059627284},
|
||
{stat_time:1646408700000,rate:857721722642},
|
||
{stat_time:1646409000000,rate:846061427500},
|
||
{stat_time:1646409300000,rate:857208596245}
|
||
]
|
||
var quantile1 = {
|
||
p50: 536130030141,
|
||
p90: 844057710428,
|
||
p99: 969266744524
|
||
}
|
||
|
||
/* 2.1 top10 app流量情况 */
|
||
var overallAppTraffic = [
|
||
{
|
||
common_app_label: 'douyin',
|
||
bytes: 345243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'wechat',
|
||
bytes: 245243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'aleskrhalwkei',
|
||
bytes: 145243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'ccc',
|
||
bytes: 140243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'douyin2',
|
||
bytes: 115243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'douyin3',
|
||
bytes: 114243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'douyin4',
|
||
bytes: 75243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'douyin5',
|
||
bytes: 55243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'douyin6',
|
||
bytes: 45243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'douyin7',
|
||
bytes: 15243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
}
|
||
]
|
||
var prevOverallAppTraffic = [
|
||
{
|
||
common_app_label: 'douyin',
|
||
bytes: 305243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'wechat',
|
||
bytes: 205243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'aleskrhalwkei',
|
||
bytes: 185243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'ccc',
|
||
bytes: 190243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'douyin2',
|
||
bytes: 105243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'douyin3',
|
||
bytes: 104243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'douyin4',
|
||
bytes: 45243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'douyin5',
|
||
bytes: 35243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'douyin6',
|
||
bytes: 45243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'douyin7',
|
||
bytes: 25243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
}
|
||
]
|
||
|
||
/* 4.1 各省份流量分布 */
|
||
var top10ProvinceTraffic = [
|
||
{
|
||
client_province: '北京',
|
||
bytes: 345243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_province: '四川',
|
||
bytes: 245243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_province: '重庆',
|
||
bytes: 145243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_province: '广西',
|
||
bytes: 140243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_province: '台湾',
|
||
bytes: 115243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_province: '日本',
|
||
bytes: 114243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_province: '海南',
|
||
bytes: 75243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_province: '内蒙古',
|
||
bytes: 55243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_province: '河北',
|
||
bytes: 45243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_province: '安徽',
|
||
bytes: 15243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
}
|
||
]
|
||
var prevTop10ProvinceTraffic = [
|
||
{
|
||
client_province: '北京',
|
||
bytes: 305243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_province: '四川',
|
||
bytes: 205243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_province: '重庆',
|
||
bytes: 185243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_province: '广西',
|
||
bytes: 190243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_province: '台湾',
|
||
bytes: 105243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_province: '日本',
|
||
bytes: 104243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_province: '海南',
|
||
bytes: 45243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_province: '内蒙古',
|
||
bytes: 35243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_province: '河北',
|
||
bytes: 45243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_province: '安徽',
|
||
bytes: 25243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
}
|
||
]
|
||
/* 4.1 top3省份访问的主要app流量 */
|
||
var totalTop3ProvinceTraffic = [
|
||
{
|
||
client_province: '北京',
|
||
bytes: 10524324004100
|
||
},
|
||
{
|
||
client_province: '四川',
|
||
bytes: 5524324004100
|
||
},
|
||
{
|
||
client_province: '重庆',
|
||
bytes: 4524324004100
|
||
}
|
||
]
|
||
var prevTotalTop3ProvinceTraffic = [
|
||
{
|
||
client_province: '北京',
|
||
bytes: 9524324004100
|
||
},
|
||
{
|
||
client_province: '四川',
|
||
bytes: 5024324004100
|
||
},
|
||
{
|
||
client_province: '重庆',
|
||
bytes: 4024324004100
|
||
}
|
||
]
|
||
var top3ProvinceAppTraffic = [
|
||
{
|
||
client_province: '北京',
|
||
common_app_label: 'douyin',
|
||
bytes: 345243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_province: '北京',
|
||
common_app_label: 'wechat',
|
||
bytes: 245243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_province: '北京',
|
||
common_app_label: 'aleskrhalwkei',
|
||
bytes: 145243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_province: '北京',
|
||
common_app_label: 'aaaa',
|
||
bytes: 135243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_province: '北京',
|
||
common_app_label: 'bbbb',
|
||
bytes: 125243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_province: '四川',
|
||
common_app_label: 'douyin',
|
||
bytes: 345243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_province: '四川',
|
||
common_app_label: 'wechat',
|
||
bytes: 245243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_province: '四川',
|
||
common_app_label: 'aaaa',
|
||
bytes: 135243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_province: '四川',
|
||
common_app_label: 'bbbb',
|
||
bytes: 125243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_province: '四川',
|
||
common_app_label: 'aleskrhalwkei',
|
||
bytes: 145243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_province: '重庆',
|
||
common_app_label: 'douyin',
|
||
bytes: 345243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_province: '重庆',
|
||
common_app_label: 'wechat',
|
||
bytes: 245243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_province: '重庆',
|
||
common_app_label: 'aleskrhalwkei',
|
||
bytes: 145243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_province: '重庆',
|
||
common_app_label: 'aaaa',
|
||
bytes: 135243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_province: '重庆',
|
||
common_app_label: 'bbbb',
|
||
bytes: 125243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
}
|
||
]
|
||
var prevTop3ProvinceAppTraffic = [
|
||
{
|
||
client_province: '北京',
|
||
common_app_label: 'douyin',
|
||
bytes: 335243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_province: '北京',
|
||
common_app_label: 'wechat',
|
||
bytes: 235243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_province: '北京',
|
||
common_app_label: 'aleskrhalwkei',
|
||
bytes: 135243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_province: '北京',
|
||
common_app_label: 'aaaa',
|
||
bytes: 125243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_province: '北京',
|
||
common_app_label: 'bbbb',
|
||
bytes: 115243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_province: '四川',
|
||
common_app_label: 'douyin',
|
||
bytes: 335243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_province: '四川',
|
||
common_app_label: 'wechat',
|
||
bytes: 235243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_province: '四川',
|
||
common_app_label: 'aaaa',
|
||
bytes: 125243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_province: '四川',
|
||
common_app_label: 'bbbb',
|
||
bytes: 115243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_province: '四川',
|
||
common_app_label: 'aleskrhalwkei',
|
||
bytes: 105243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_province: '重庆',
|
||
common_app_label: 'douyin',
|
||
bytes: 335243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_province: '重庆',
|
||
common_app_label: 'wechat',
|
||
bytes: 235243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_province: '重庆',
|
||
common_app_label: 'aleskrhalwkei',
|
||
bytes: 125243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_province: '重庆',
|
||
common_app_label: 'aaaa',
|
||
bytes: 115243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_province: '重庆',
|
||
common_app_label: 'bbbb',
|
||
bytes: 105243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
}
|
||
]
|
||
/* 4.1 top3 app各省流量 */
|
||
var totalTop3AppProvinceTraffic = [
|
||
{
|
||
common_app_label: 'douyin',
|
||
bytes: 10524324004100
|
||
},
|
||
{
|
||
common_app_label: 'wechat',
|
||
bytes: 10524324004100
|
||
},
|
||
{
|
||
common_app_label: 'aaaa',
|
||
bytes: 9524324004100
|
||
}
|
||
]
|
||
var prevTotalTop3AppProvinceTraffic = [
|
||
{
|
||
common_app_label: 'douyin',
|
||
bytes: 9524324004100
|
||
},
|
||
{
|
||
common_app_label: 'wechat',
|
||
bytes: 8524324004100
|
||
},
|
||
{
|
||
common_app_label: 'aaaa',
|
||
bytes: 7524324004100
|
||
}
|
||
]
|
||
var top3AppProvinceTraffic = [
|
||
{
|
||
common_app_label: 'douyin',
|
||
client_province: '北京',
|
||
bytes: 345243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'douyin',
|
||
client_province: '天津',
|
||
bytes: 245243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'douyin',
|
||
client_province: '河北',
|
||
bytes: 145243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'douyin',
|
||
client_province: '河南',
|
||
bytes: 135243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'douyin',
|
||
client_province: '福建',
|
||
bytes: 125243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'wechat',
|
||
client_province: '北京',
|
||
bytes: 345243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'wechat',
|
||
client_province: '四川',
|
||
bytes: 245243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'wechat',
|
||
client_province: '重庆',
|
||
bytes: 135243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'wechat',
|
||
client_province: '河南',
|
||
bytes: 125243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'wechat',
|
||
client_province: '安徽',
|
||
bytes: 145243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'aaaa',
|
||
client_province: '北京',
|
||
bytes: 345243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'aaaa',
|
||
client_province: '四川',
|
||
bytes: 245243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'aaaa',
|
||
client_province: '重庆',
|
||
bytes: 145243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'aaaa',
|
||
client_province: '湖南',
|
||
bytes: 135243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'aaaa',
|
||
client_province: '安徽',
|
||
bytes: 125243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
}
|
||
]
|
||
var prevTop3AppProvinceTraffic = [
|
||
{
|
||
common_app_label: 'douyin',
|
||
client_province: '北京',
|
||
bytes: 335243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'douyin',
|
||
client_province: '天津',
|
||
bytes: 235243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'douyin',
|
||
client_province: '河北',
|
||
bytes: 135243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'douyin',
|
||
client_province: '河南',
|
||
bytes: 125243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'douyin',
|
||
client_province: '福建',
|
||
bytes: 135243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'wechat',
|
||
client_province: '北京',
|
||
bytes: 325243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'wechat',
|
||
client_province: '四川',
|
||
bytes: 265243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'wechat',
|
||
client_province: '重庆',
|
||
bytes: 145243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'wechat',
|
||
client_province: '河南',
|
||
bytes: 115243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'wechat',
|
||
client_province: '安徽',
|
||
bytes: 145243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'aaaa',
|
||
client_province: '北京',
|
||
bytes: 345243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'aaaa',
|
||
client_province: '四川',
|
||
bytes: 245243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'aaaa',
|
||
client_province: '重庆',
|
||
bytes: 125243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'aaaa',
|
||
client_province: '湖南',
|
||
bytes: 165243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'aaaa',
|
||
client_province: '安徽',
|
||
bytes: 145243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
}
|
||
]
|
||
/* 4.2 省内各地区流量分布 */
|
||
var top10CityTraffic = [
|
||
{
|
||
client_region: '北京',
|
||
bytes: 345243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_region: '四川',
|
||
bytes: 245243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_region: '重庆',
|
||
bytes: 145243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_region: '广西',
|
||
bytes: 140243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_region: '台湾',
|
||
bytes: 115243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_region: '日本',
|
||
bytes: 114243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_region: '海南',
|
||
bytes: 75243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_region: '内蒙古',
|
||
bytes: 55243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_region: '河北',
|
||
bytes: 45243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_region: '安徽',
|
||
bytes: 15243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
}
|
||
]
|
||
var prevTop10CityTraffic = [
|
||
{
|
||
client_region: '北京',
|
||
bytes: 305243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_region: '四川',
|
||
bytes: 205243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_region: '重庆',
|
||
bytes: 185243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_region: '广西',
|
||
bytes: 190243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_region: '台湾',
|
||
bytes: 105243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_region: '日本',
|
||
bytes: 104243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_region: '海南',
|
||
bytes: 45243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_region: '内蒙古',
|
||
bytes: 35243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_region: '河北',
|
||
bytes: 45243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_region: '安徽',
|
||
bytes: 25243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
}
|
||
]
|
||
/* 4.2 top3地区访问的主要app流量 */
|
||
var totalTop3CityTraffic = [
|
||
{
|
||
client_region: '北京',
|
||
bytes: 10524324004100
|
||
},
|
||
{
|
||
client_region: '四川',
|
||
bytes: 5524324004100
|
||
},
|
||
{
|
||
client_region: '重庆',
|
||
bytes: 4524324004100
|
||
}
|
||
]
|
||
var prevTotalTop3CityTraffic = [
|
||
{
|
||
client_region: '北京',
|
||
bytes: 8524324004100
|
||
},
|
||
{
|
||
client_region: '四川',
|
||
bytes: 6524324004100
|
||
},
|
||
{
|
||
client_region: '重庆',
|
||
bytes: 5524324004100
|
||
}
|
||
]
|
||
var top3CityAppTraffic = [
|
||
{
|
||
client_region: '北京',
|
||
common_app_label: 'douyin',
|
||
bytes: 345243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_region: '北京',
|
||
common_app_label: 'wechat',
|
||
bytes: 245243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_region: '北京',
|
||
common_app_label: 'aleskrhalwkei',
|
||
bytes: 145243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_region: '北京',
|
||
common_app_label: 'aaaa',
|
||
bytes: 135243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_region: '北京',
|
||
common_app_label: 'bbbb',
|
||
bytes: 125243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_region: '四川',
|
||
common_app_label: 'douyin',
|
||
bytes: 345243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_region: '四川',
|
||
common_app_label: 'wechat',
|
||
bytes: 245243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_region: '四川',
|
||
common_app_label: 'aaaa',
|
||
bytes: 135243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_region: '四川',
|
||
common_app_label: 'bbbb',
|
||
bytes: 125243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_region: '四川',
|
||
common_app_label: 'aleskrhalwkei',
|
||
bytes: 145243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_region: '重庆',
|
||
common_app_label: 'douyin',
|
||
bytes: 345243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_region: '重庆',
|
||
common_app_label: 'wechat',
|
||
bytes: 245243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_region: '重庆',
|
||
common_app_label: 'aleskrhalwkei',
|
||
bytes: 145243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_region: '重庆',
|
||
common_app_label: 'aaaa',
|
||
bytes: 135243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_region: '重庆',
|
||
common_app_label: 'bbbb',
|
||
bytes: 125243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
}
|
||
]
|
||
var prevTop3CityAppTraffic = [
|
||
{
|
||
client_region: '北京',
|
||
common_app_label: 'douyin',
|
||
bytes: 335243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_region: '北京',
|
||
common_app_label: 'wechat',
|
||
bytes: 235243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_region: '北京',
|
||
common_app_label: 'aleskrhalwkei',
|
||
bytes: 135243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_region: '北京',
|
||
common_app_label: 'aaaa',
|
||
bytes: 125243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_region: '北京',
|
||
common_app_label: 'bbbb',
|
||
bytes: 115243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_region: '四川',
|
||
common_app_label: 'douyin',
|
||
bytes: 335243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_region: '四川',
|
||
common_app_label: 'wechat',
|
||
bytes: 235243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_region: '四川',
|
||
common_app_label: 'aaaa',
|
||
bytes: 125243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_region: '四川',
|
||
common_app_label: 'bbbb',
|
||
bytes: 115243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_region: '四川',
|
||
common_app_label: 'aleskrhalwkei',
|
||
bytes: 105243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_region: '重庆',
|
||
common_app_label: 'douyin',
|
||
bytes: 335243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_region: '重庆',
|
||
common_app_label: 'wechat',
|
||
bytes: 235243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_region: '重庆',
|
||
common_app_label: 'aleskrhalwkei',
|
||
bytes: 125243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_region: '重庆',
|
||
common_app_label: 'aaaa',
|
||
bytes: 115243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
client_region: '重庆',
|
||
common_app_label: 'bbbb',
|
||
bytes: 105243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
}
|
||
]
|
||
/* 4.2 top3 app各地区流量 */
|
||
var totalTop3AppCityTraffic = [
|
||
{
|
||
common_app_label: 'douyin',
|
||
bytes: 10524324004100
|
||
},
|
||
{
|
||
common_app_label: 'wechat',
|
||
bytes: 10524324004100
|
||
},
|
||
{
|
||
common_app_label: 'aaaa',
|
||
bytes: 10524324004100
|
||
}
|
||
]
|
||
var prevTotalTop3AppCityTraffic = [
|
||
{
|
||
common_app_label: 'douyin',
|
||
bytes: 8524324004100
|
||
},
|
||
{
|
||
common_app_label: 'wechat',
|
||
bytes: 9524324004100
|
||
},
|
||
{
|
||
common_app_label: 'aaaa',
|
||
bytes: 8524324004100
|
||
}
|
||
]
|
||
var top3AppCityTraffic = [
|
||
{
|
||
common_app_label: 'douyin',
|
||
client_region: '北京',
|
||
bytes: 345243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'douyin',
|
||
client_region: '天津',
|
||
bytes: 245243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'douyin',
|
||
client_region: '河北',
|
||
bytes: 145243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'douyin',
|
||
client_region: '河南',
|
||
bytes: 135243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'douyin',
|
||
client_region: '福建',
|
||
bytes: 125243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'wechat',
|
||
client_region: '北京',
|
||
bytes: 345243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'wechat',
|
||
client_region: '四川',
|
||
bytes: 245243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'wechat',
|
||
client_region: '重庆',
|
||
bytes: 135243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'wechat',
|
||
client_region: '河南',
|
||
bytes: 125243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'wechat',
|
||
client_region: '安徽',
|
||
bytes: 145243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'aaaa',
|
||
client_region: '北京',
|
||
bytes: 345243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'aaaa',
|
||
client_region: '四川',
|
||
bytes: 245243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'aaaa',
|
||
client_region: '重庆',
|
||
bytes: 145243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'aaaa',
|
||
client_region: '湖南',
|
||
bytes: 135243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'aaaa',
|
||
client_region: '安徽',
|
||
bytes: 125243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
}
|
||
]
|
||
var prevTop3AppCityTraffic = [
|
||
{
|
||
common_app_label: 'douyin',
|
||
client_region: '北京',
|
||
bytes: 335243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'douyin',
|
||
client_region: '天津',
|
||
bytes: 235243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'douyin',
|
||
client_region: '河北',
|
||
bytes: 135243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'douyin',
|
||
client_region: '河南',
|
||
bytes: 125243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'douyin',
|
||
client_region: '福建',
|
||
bytes: 135243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'wechat',
|
||
client_region: '北京',
|
||
bytes: 325243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'wechat',
|
||
client_region: '四川',
|
||
bytes: 265243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'wechat',
|
||
client_region: '重庆',
|
||
bytes: 145243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'wechat',
|
||
client_region: '河南',
|
||
bytes: 115243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'wechat',
|
||
client_region: '安徽',
|
||
bytes: 145243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'aaaa',
|
||
client_region: '北京',
|
||
bytes: 345243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'aaaa',
|
||
client_region: '四川',
|
||
bytes: 245243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'aaaa',
|
||
client_region: '重庆',
|
||
bytes: 125243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'aaaa',
|
||
client_region: '湖南',
|
||
bytes: 165243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
common_app_label: 'aaaa',
|
||
client_region: '安徽',
|
||
bytes: 145243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
}
|
||
]
|
||
|
||
/** 数据 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 currentRange7 = document.getElementById('currentRange7')
|
||
var prevRange7 = document.getElementById('prevRange7')
|
||
var currentRange8 = document.getElementById('currentRange8')
|
||
var prevRange8 = document.getElementById('prevRange8')
|
||
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
|
||
currentRange7.innerText = currentRangeStr
|
||
prevRange7.innerText = prevRangeStr
|
||
currentRange8.innerText = currentRangeStr
|
||
prevRange8.innerText = prevRangeStr
|
||
}
|
||
|
||
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.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 unit2 = 'KB'
|
||
var categoryData2 = overallAppTraffic.map(t => t.common_app_label)
|
||
var barSeriesData2 = overallAppTraffic.map(t => t.bytes)
|
||
var copyBarSeriesData2 = [...barSeriesData2]
|
||
var lineSeriesData2 = overallAppTraffic.map(t => {
|
||
var findData = prevOverallAppTraffic.find(pt => pt.common_app_label === t.common_app_label)
|
||
if (findData) {
|
||
return parseFloat(((t.bytes - findData.bytes) / parseFloat(findData.bytes) * 100).toFixed(2))
|
||
} else {
|
||
return 0
|
||
}
|
||
})
|
||
var copyLineSeriesData2 = [...lineSeriesData2]
|
||
copyLineSeriesData2.sort((a, b) => a - b)
|
||
copyBarSeriesData2.sort((a, b) => a - b)
|
||
var barMax2 = copyBarSeriesData2[copyBarSeriesData2.length - 1]
|
||
var lineMin2 = copyLineSeriesData2[0]
|
||
var lineMax2 = copyLineSeriesData2[copyLineSeriesData2.length - 1]
|
||
if (lineMin2 == 0 && lineMin2 == lineMax2) {
|
||
lineMin2 = -4
|
||
lineMax2 = 1
|
||
} else {
|
||
var tempLineMin2 = lineMin2
|
||
lineMin2 = lineMin2 - 2 * (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: barSeriesData2,
|
||
type: 'bar',
|
||
barMinHeight: 5,
|
||
barWidth: 40,
|
||
label: {
|
||
show: true,
|
||
formatter: function (param) {
|
||
return unitConvert(param.value, unitTypes.byte, unit2).join('')
|
||
},
|
||
color: 'rgb(59,162,201)',
|
||
textBorderColor: 'white',
|
||
textBorderWidth: 3,
|
||
position: 'top'
|
||
},
|
||
itemStyle: {
|
||
color: 'rgb(59,162,201)'
|
||
}
|
||
},
|
||
{
|
||
yAxisIndex: 1,
|
||
name: '环比',
|
||
data: lineSeriesData2,
|
||
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)
|
||
document.getElementById('imgCanvas2').src = myChart.getDataURL({pixelRatio: 1})
|
||
}
|
||
|
||
// 业务流量排名折线图
|
||
var unit3 = 'KB'
|
||
var categoryData3 = top10ProvinceTraffic.map(t => t.client_province)
|
||
var barSeriesData3 = top10ProvinceTraffic.map(t => t.bytes)
|
||
var lineSeriesData3 = top10ProvinceTraffic.map(t => {
|
||
var findData = prevTop10ProvinceTraffic.find(pt => pt.client_province === t.client_province)
|
||
if (findData) {
|
||
return parseFloat(((t.bytes - findData.bytes) / parseFloat(findData.bytes) * 100).toFixed(2))
|
||
} else {
|
||
return 0
|
||
}
|
||
})
|
||
var copyLineSeriesData3 = [...lineSeriesData3]
|
||
var copyBarSeriesData3 = [...barSeriesData3]
|
||
copyLineSeriesData3.sort((a, b) => a - b)
|
||
copyBarSeriesData3.sort((a, b) => a - b)
|
||
var barMax3 = copyBarSeriesData3[copyBarSeriesData3.length - 1]
|
||
var lineMin3 = copyLineSeriesData3[0]
|
||
var lineMax3 = copyLineSeriesData3[copyLineSeriesData3.length - 1]
|
||
if (lineMin3 == 0 && lineMin3 == lineMax3) {
|
||
lineMin3 = -4
|
||
lineMax3 = 1
|
||
} else {
|
||
var tempLineMin3 = lineMin3
|
||
lineMin3 = lineMin3 - 2 * (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: barSeriesData3,
|
||
barMinHeight: 5,
|
||
type: 'bar',
|
||
barWidth: 40,
|
||
label: {
|
||
show: true,
|
||
formatter: function (param) {
|
||
return unitConvert(param.value, unitTypes.byte, unit3).join('')
|
||
},
|
||
color: 'rgb(59,162,201)',
|
||
textBorderColor: 'white',
|
||
textBorderWidth: 3,
|
||
position: 'top'
|
||
},
|
||
itemStyle: {
|
||
color: 'rgb(59,162,201)'
|
||
}
|
||
},
|
||
{
|
||
yAxisIndex: 1,
|
||
name: '环比',
|
||
data: lineSeriesData3,
|
||
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)
|
||
document.getElementById('imgCanvas3').src = myChart.getDataURL({pixelRatio: 1})
|
||
}
|
||
|
||
var unit4 = 'KB'
|
||
var province4 = totalTop3ProvinceTraffic[0]
|
||
var categoryData4 = []
|
||
var seriesData4 = []
|
||
var prevSeriesData4 = []
|
||
if (province4) {
|
||
var prevProvince4 = prevTotalTop3ProvinceTraffic.find(t => t.client_province === province4.client_province)
|
||
top3ProvinceAppTraffic.forEach(d => {
|
||
if (d.client_province === province4.client_province) {
|
||
categoryData4.push(d.common_app_label)
|
||
seriesData4.push(d.bytes / province4.bytes)
|
||
var prevApp = prevTop3ProvinceAppTraffic.find(p => p.common_app_label === d.common_app_label && p.client_province === d.client_province)
|
||
if (prevApp) {
|
||
prevSeriesData4.push(prevApp.bytes / prevProvince4.bytes)
|
||
} else {
|
||
prevSeriesData4.push(0)
|
||
}
|
||
}
|
||
})
|
||
}
|
||
function initEcharts4 () {
|
||
var myChart = echarts.init(document.getElementById('canvas4'))
|
||
var option = {
|
||
animation: false,
|
||
color: [chartColor[1], chartColor[6]],
|
||
grid: {
|
||
top: 30,
|
||
bottom: 35,
|
||
right: 20,
|
||
left: 70
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: categoryData4,
|
||
axisLabel: {
|
||
interval: 0,
|
||
rotate: 20,
|
||
fontSize: 12
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter (value) {
|
||
return unitConvert(value, unitTypes.percent).join('')
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
data: seriesData4,
|
||
type: 'bar',
|
||
barWidth: 14,
|
||
barMinHeight: 2
|
||
},
|
||
{
|
||
data: prevSeriesData4,
|
||
type: 'bar',
|
||
barWidth: 14,
|
||
barMinHeight: 2
|
||
}
|
||
]
|
||
}
|
||
myChart.setOption(option)
|
||
document.getElementById('imgCanvas4').src = myChart.getDataURL({pixelRatio: 1})
|
||
}
|
||
|
||
var province5 = totalTop3ProvinceTraffic[1]
|
||
var categoryData5 = []
|
||
var seriesData5 = []
|
||
var prevSeriesData5 = []
|
||
if (province5) {
|
||
var prevProvince5 = prevTotalTop3ProvinceTraffic.find(t => t.client_province === province5.client_province)
|
||
top3ProvinceAppTraffic.forEach(d => {
|
||
if (d.client_province === province5.client_province) {
|
||
categoryData5.push(d.common_app_label)
|
||
seriesData5.push(d.bytes / province5.bytes)
|
||
var prevApp = prevTop3ProvinceAppTraffic.find(p => p.common_app_label === d.common_app_label && p.client_province === d.client_province)
|
||
if (prevApp) {
|
||
prevSeriesData5.push(prevApp.bytes / prevProvince5.bytes)
|
||
} else {
|
||
prevSeriesData5.push(0)
|
||
}
|
||
}
|
||
})
|
||
}
|
||
function initEcharts5 () {
|
||
var myChart = echarts.init(document.getElementById('canvas5'))
|
||
var option = {
|
||
animation: false,
|
||
color: [chartColor[1], chartColor[6]],
|
||
grid: {
|
||
top: 30,
|
||
bottom: 35,
|
||
right: 20,
|
||
left: 70
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: categoryData5,
|
||
axisLabel: {
|
||
interval: 0,
|
||
rotate: 20,
|
||
fontSize: 12
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter (value) {
|
||
return unitConvert(value, unitTypes.percent).join('')
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
data: seriesData5,
|
||
type: 'bar',
|
||
barWidth: 14,
|
||
barMinHeight: 2
|
||
},
|
||
{
|
||
data: prevSeriesData5,
|
||
type: 'bar',
|
||
barWidth: 14,
|
||
barMinHeight: 2
|
||
}
|
||
]
|
||
}
|
||
myChart.setOption(option)
|
||
document.getElementById('imgCanvas5').src = myChart.getDataURL({pixelRatio: 1})
|
||
}
|
||
|
||
var province6 = totalTop3ProvinceTraffic[2]
|
||
var categoryData6 = []
|
||
var seriesData6 = []
|
||
var prevSeriesData6 = []
|
||
if (province6) {
|
||
var prevProvince6 = prevTotalTop3ProvinceTraffic.find(t => t.client_province === province6.client_province)
|
||
top3ProvinceAppTraffic.forEach(d => {
|
||
if (d.client_province === province6.client_province) {
|
||
categoryData6.push(d.common_app_label)
|
||
seriesData6.push(d.bytes / province6.bytes)
|
||
var prevApp = prevTop3ProvinceAppTraffic.find(p => p.common_app_label === d.common_app_label && p.client_province === d.client_province)
|
||
if (prevApp) {
|
||
prevSeriesData6.push(prevApp.bytes / prevProvince6.bytes)
|
||
} else {
|
||
prevSeriesData6.push(0)
|
||
}
|
||
}
|
||
})
|
||
}
|
||
function initEcharts6 () {
|
||
var myChart = echarts.init(document.getElementById('canvas6'))
|
||
var option = {
|
||
animation: false,
|
||
color: [chartColor[1], chartColor[6]],
|
||
grid: {
|
||
top: 30,
|
||
bottom: 35,
|
||
right: 20,
|
||
left: 70
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: categoryData6,
|
||
axisLabel: {
|
||
interval: 0,
|
||
rotate: 20,
|
||
fontSize: 12
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter (value) {
|
||
return unitConvert(value, unitTypes.percent).join('')
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
data: seriesData6,
|
||
type: 'bar',
|
||
barWidth: 14,
|
||
barMinHeight: 2
|
||
},
|
||
{
|
||
data: prevSeriesData6,
|
||
type: 'bar',
|
||
barWidth: 14,
|
||
barMinHeight: 2
|
||
}
|
||
]
|
||
}
|
||
myChart.setOption(option)
|
||
document.getElementById('imgCanvas6').src = myChart.getDataURL({pixelRatio: 1})
|
||
}
|
||
|
||
var app7 = totalTop3AppProvinceTraffic[0]
|
||
var categoryData7 = []
|
||
var seriesData7 = []
|
||
var prevSeriesData7 = []
|
||
if (app7) {
|
||
var prevApp7 = prevTotalTop3AppProvinceTraffic.find(t => t.common_app_label === app7.common_app_label)
|
||
top3AppProvinceTraffic.forEach(d => {
|
||
if (d.common_app_label === app7.common_app_label) {
|
||
categoryData7.push(d.client_province)
|
||
seriesData7.push(d.bytes / app7.bytes)
|
||
var prevApp = prevTop3AppProvinceTraffic.find(p => p.client_province === d.client_province && p.common_app_label === d.common_app_label)
|
||
if (prevApp) {
|
||
prevSeriesData7.push(prevApp.bytes / prevApp7.bytes)
|
||
} else {
|
||
prevSeriesData7.push(0)
|
||
}
|
||
}
|
||
})
|
||
}
|
||
function initEcharts7 () {
|
||
var myChart = echarts.init(document.getElementById('canvas7'))
|
||
var option = {
|
||
animation: false,
|
||
color: [chartColor[1], chartColor[6]],
|
||
grid: {
|
||
top: 30,
|
||
bottom: 35,
|
||
right: 20,
|
||
left: 70
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: categoryData7,
|
||
axisLabel: {
|
||
interval: 0,
|
||
rotate: 20,
|
||
fontSize: 12
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter (value) {
|
||
return unitConvert(value, unitTypes.percent).join('')
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
data: seriesData7,
|
||
type: 'bar',
|
||
barWidth: 14,
|
||
barMinHeight: 2
|
||
},
|
||
{
|
||
data: prevSeriesData7,
|
||
type: 'bar',
|
||
barWidth: 14,
|
||
barMinHeight: 2
|
||
}
|
||
]
|
||
}
|
||
myChart.setOption(option)
|
||
document.getElementById('imgCanvas7').src = myChart.getDataURL({pixelRatio: 1})
|
||
}
|
||
|
||
var app8 = totalTop3AppProvinceTraffic[1]
|
||
var categoryData8 = []
|
||
var seriesData8 = []
|
||
var prevSeriesData8 = []
|
||
if (app8) {
|
||
var prevApp8 = prevTotalTop3AppProvinceTraffic.find(t => t.common_app_label === app8.common_app_label)
|
||
top3AppProvinceTraffic.forEach(d => {
|
||
if (d.common_app_label === app8.common_app_label) {
|
||
categoryData8.push(d.client_province)
|
||
seriesData8.push(d.bytes / app8.bytes)
|
||
var prevApp = prevTop3AppProvinceTraffic.find(p => p.common_app_label === d.common_app_label && p.client_province === d.client_province)
|
||
if (prevApp) {
|
||
prevSeriesData8.push(prevApp.bytes / prevApp8.bytes)
|
||
} else {
|
||
prevSeriesData8.push(0)
|
||
}
|
||
}
|
||
})
|
||
}
|
||
function initEcharts8 () {
|
||
var myChart = echarts.init(document.getElementById('canvas8'))
|
||
var option = {
|
||
animation: false,
|
||
color: [chartColor[1], chartColor[6]],
|
||
grid: {
|
||
top: 30,
|
||
bottom: 35,
|
||
right: 20,
|
||
left: 70
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: categoryData8,
|
||
axisLabel: {
|
||
interval: 0,
|
||
rotate: 20,
|
||
fontSize: 12
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter (value) {
|
||
return unitConvert(value, unitTypes.percent).join('')
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
data: seriesData8,
|
||
type: 'bar',
|
||
barWidth: 14,
|
||
barMinHeight: 2
|
||
},
|
||
{
|
||
data: prevSeriesData8,
|
||
type: 'bar',
|
||
barWidth: 14,
|
||
barMinHeight: 2
|
||
}
|
||
]
|
||
}
|
||
myChart.setOption(option)
|
||
document.getElementById('imgCanvas8').src = myChart.getDataURL({pixelRatio: 1})
|
||
}
|
||
|
||
var app9 = totalTop3AppProvinceTraffic[2]
|
||
var categoryData9 = []
|
||
var seriesData9 = []
|
||
var prevSeriesData9 = []
|
||
if (app9) {
|
||
var prevApp9 = prevTotalTop3AppProvinceTraffic.find(t => t.common_app_label === app9.common_app_label)
|
||
top3AppProvinceTraffic.forEach(d => {
|
||
if (d.common_app_label === app9.common_app_label) {
|
||
categoryData9.push(d.client_province)
|
||
seriesData9.push(d.bytes / app9.bytes)
|
||
var prevApp = prevTop3AppProvinceTraffic.find(p => p.common_app_label === d.common_app_label && p.client_province === d.client_province)
|
||
if (prevApp) {
|
||
prevSeriesData9.push(prevApp.bytes / prevApp9.bytes)
|
||
} else {
|
||
prevSeriesData9.push(0)
|
||
}
|
||
}
|
||
})
|
||
}
|
||
function initEcharts9 () {
|
||
var myChart = echarts.init(document.getElementById('canvas9'))
|
||
var option = {
|
||
animation: false,
|
||
color: [chartColor[1], chartColor[6]],
|
||
grid: {
|
||
top: 30,
|
||
bottom: 35,
|
||
right: 20,
|
||
left: 70
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: categoryData9,
|
||
axisLabel: {
|
||
interval: 0,
|
||
rotate: 20,
|
||
fontSize: 12
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter (value) {
|
||
return unitConvert(value, unitTypes.percent).join('')
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
data: seriesData9,
|
||
type: 'bar',
|
||
barWidth: 14,
|
||
barMinHeight: 2
|
||
},
|
||
{
|
||
data: prevSeriesData9,
|
||
type: 'bar',
|
||
barWidth: 14,
|
||
barMinHeight: 2
|
||
}
|
||
]
|
||
}
|
||
myChart.setOption(option)
|
||
document.getElementById('imgCanvas9').src = myChart.getDataURL({pixelRatio: 1})
|
||
}
|
||
|
||
// 业务流量排名折线图
|
||
var unit10 = 'KB'
|
||
var categoryData10 = top10CityTraffic.map(t => t.client_region)
|
||
var barSeriesData10 = top10CityTraffic.map(t => t.bytes)
|
||
var lineSeriesData10 = top10CityTraffic.map(t => {
|
||
var findData = prevTop10CityTraffic.find(pt => pt.client_region === t.client_region)
|
||
if (findData) {
|
||
return parseFloat(((t.bytes - findData.bytes) / parseFloat(findData.bytes) * 100).toFixed(2))
|
||
} else {
|
||
return 0
|
||
}
|
||
})
|
||
var copyLineSeriesData10 = [...lineSeriesData10]
|
||
var copyBarSeriesData10 = [...barSeriesData10]
|
||
copyLineSeriesData10.sort((a, b) => a - b)
|
||
copyBarSeriesData10.sort((a, b) => a - b)
|
||
var barMax10 = copyBarSeriesData10[copyBarSeriesData10.length - 1]
|
||
var lineMin10 = copyLineSeriesData10[0]
|
||
var lineMax10 = copyLineSeriesData10[copyLineSeriesData10.length - 1]
|
||
if (lineMin10 == 0 && lineMin10 == lineMax10) {
|
||
lineMin10 = -4
|
||
lineMax10 = 1
|
||
} else {
|
||
var tempLineMin10 = lineMin10
|
||
lineMin10 = lineMin10 - 2 * (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: barSeriesData10,
|
||
type: 'bar',
|
||
barWidth: 40,
|
||
label: {
|
||
show: true,
|
||
formatter: function (param) {
|
||
return unitConvert(param.value, unitTypes.byte, unit10).join('')
|
||
},
|
||
color: 'rgb(59,162,201)',
|
||
textBorderColor: 'white',
|
||
textBorderWidth: 3,
|
||
position: 'top'
|
||
},
|
||
itemStyle: {
|
||
color: 'rgb(59,162,201)'
|
||
}
|
||
},
|
||
{
|
||
yAxisIndex: 1,
|
||
name: '环比',
|
||
data: lineSeriesData10,
|
||
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)
|
||
document.getElementById('imgCanvas10').src = myChart.getDataURL({pixelRatio: 1})
|
||
}
|
||
|
||
|
||
var city11 = totalTop3CityTraffic[0]
|
||
var categoryData11 = []
|
||
var seriesData11 = []
|
||
var prevSeriesData11 = []
|
||
if (city11) {
|
||
var prevCity11 = prevTotalTop3CityTraffic.find(t => t.client_region === city11.client_region)
|
||
top3CityAppTraffic.forEach(d => {
|
||
if (d.client_region === city11.client_region) {
|
||
categoryData11.push(d.common_app_label)
|
||
seriesData11.push(d.bytes / city11.bytes)
|
||
var prevApp = prevTop3CityAppTraffic.find(p => p.common_app_label === d.common_app_label && p.client_region === d.client_region)
|
||
if (prevApp) {
|
||
prevSeriesData11.push(prevApp.bytes / prevCity11.bytes)
|
||
} else {
|
||
prevSeriesData11.push(0)
|
||
}
|
||
}
|
||
})
|
||
}
|
||
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: categoryData11,
|
||
axisLabel: {
|
||
interval: 0,
|
||
rotate: 20,
|
||
fontSize: 12
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter (value) {
|
||
return unitConvert(value, unitTypes.percent).join('')
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
data: seriesData11,
|
||
type: 'bar',
|
||
barWidth: 14,
|
||
barMinHeight: 2
|
||
},
|
||
{
|
||
data: prevSeriesData11,
|
||
type: 'bar',
|
||
barWidth: 14,
|
||
barMinHeight: 2
|
||
}
|
||
]
|
||
}
|
||
myChart.setOption(option)
|
||
document.getElementById('imgCanvas11').src = myChart.getDataURL({pixelRatio: 1})
|
||
}
|
||
|
||
var city12 = totalTop3CityTraffic[1]
|
||
var categoryData12 = []
|
||
var seriesData12 = []
|
||
var prevSeriesData12 = []
|
||
if (city12) {
|
||
var prevCity12 = prevTotalTop3CityTraffic.find(t => t.client_region === city12.client_region)
|
||
top3CityAppTraffic.forEach(d => {
|
||
if (d.client_region === city12.client_region) {
|
||
categoryData12.push(d.common_app_label)
|
||
seriesData12.push(d.bytes / city12.bytes)
|
||
var prevApp = prevTop3CityAppTraffic.find(p => p.common_app_label === d.common_app_label && p.client_region === d.client_region)
|
||
if (prevApp) {
|
||
prevSeriesData12.push(prevApp.bytes / prevCity12.bytes)
|
||
} else {
|
||
prevSeriesData12.push(0)
|
||
}
|
||
}
|
||
})
|
||
}
|
||
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: categoryData12,
|
||
axisLabel: {
|
||
interval: 0,
|
||
rotate: 20,
|
||
fontSize: 12
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter (value) {
|
||
return unitConvert(value, unitTypes.percent).join('')
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
data: seriesData12,
|
||
type: 'bar',
|
||
barWidth: 14,
|
||
barMinHeight: 2
|
||
},
|
||
{
|
||
data: prevSeriesData12,
|
||
type: 'bar',
|
||
barWidth: 14,
|
||
barMinHeight: 2
|
||
}
|
||
]
|
||
}
|
||
myChart.setOption(option)
|
||
document.getElementById('imgCanvas12').src = myChart.getDataURL({pixelRatio: 1})
|
||
}
|
||
|
||
var city13 = totalTop3CityTraffic[2]
|
||
var categoryData13 = []
|
||
var seriesData13 = []
|
||
var prevSeriesData13 = []
|
||
if (city13) {
|
||
var prevCity13 = prevTotalTop3CityTraffic.find(t => t.client_region === city13.client_region)
|
||
top3CityAppTraffic.forEach(d => {
|
||
if (d.client_region === city13.client_region) {
|
||
categoryData13.push(d.common_app_label)
|
||
seriesData13.push(d.bytes / city13.bytes)
|
||
var prevApp = prevTop3CityAppTraffic.find(p => p.common_app_label === d.common_app_label && p.client_region === d.client_region)
|
||
if (prevApp) {
|
||
prevSeriesData13.push(prevApp.bytes / prevCity13.bytes)
|
||
} else {
|
||
prevSeriesData13.push(0)
|
||
}
|
||
}
|
||
})
|
||
}
|
||
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: categoryData13,
|
||
axisLabel: {
|
||
interval: 0,
|
||
rotate: 20,
|
||
fontSize: 12
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter (value) {
|
||
return unitConvert(value, unitTypes.percent).join('')
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
data: seriesData13,
|
||
type: 'bar',
|
||
barWidth: 14,
|
||
barMinHeight: 2
|
||
},
|
||
{
|
||
data: prevSeriesData13,
|
||
type: 'bar',
|
||
barWidth: 14,
|
||
barMinHeight: 2
|
||
}
|
||
]
|
||
}
|
||
myChart.setOption(option)
|
||
document.getElementById('imgCanvas13').src = myChart.getDataURL({pixelRatio: 1})
|
||
}
|
||
|
||
|
||
var app14 = totalTop3AppCityTraffic[0]
|
||
var categoryData14 = []
|
||
var seriesData14 = []
|
||
var prevSeriesData14 = []
|
||
if (app14) {
|
||
var prevApp14 = prevTotalTop3AppCityTraffic.find(t => t.common_app_label === app14.common_app_label)
|
||
top3AppCityTraffic.forEach(d => {
|
||
if (d.common_app_label === app14.common_app_label) {
|
||
categoryData14.push(d.client_region)
|
||
seriesData14.push(d.bytes / app14.bytes)
|
||
var prevApp = prevTop3AppCityTraffic.find(p => p.common_app_label === d.common_app_label && p.client_region === d.client_region)
|
||
if (prevApp) {
|
||
prevSeriesData14.push(prevApp.bytes / prevApp14.bytes)
|
||
} else {
|
||
prevSeriesData14.push(0)
|
||
}
|
||
}
|
||
})
|
||
}
|
||
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: categoryData14,
|
||
axisLabel: {
|
||
interval: 0,
|
||
rotate: 20,
|
||
fontSize: 12
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter (value) {
|
||
return unitConvert(value, unitTypes.percent).join('')
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
data: seriesData14,
|
||
type: 'bar',
|
||
barWidth: 14,
|
||
barMinHeight: 2
|
||
},
|
||
{
|
||
data: prevSeriesData14,
|
||
type: 'bar',
|
||
barWidth: 14,
|
||
barMinHeight: 2
|
||
}
|
||
]
|
||
}
|
||
myChart.setOption(option)
|
||
document.getElementById('imgCanvas14').src = myChart.getDataURL({pixelRatio: 1})
|
||
}
|
||
|
||
var app15 = totalTop3AppCityTraffic[1]
|
||
var categoryData15 = []
|
||
var seriesData15 = []
|
||
var prevSeriesData15 = []
|
||
if (app15) {
|
||
var prevApp15 = prevTotalTop3AppCityTraffic.find(t => t.common_app_label === app15.common_app_label)
|
||
top3AppCityTraffic.forEach(d => {
|
||
if (d.common_app_label === app15.common_app_label) {
|
||
categoryData15.push(d.client_region)
|
||
seriesData15.push(d.bytes / app15.bytes)
|
||
var prevApp = prevTop3AppCityTraffic.find(p => p.common_app_label === d.common_app_label && p.client_region === d.client_region)
|
||
if (prevApp) {
|
||
prevSeriesData15.push(prevApp.bytes / prevApp15.bytes)
|
||
} else {
|
||
prevSeriesData15.push(0)
|
||
}
|
||
}
|
||
})
|
||
}
|
||
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: categoryData15,
|
||
axisLabel: {
|
||
interval: 0,
|
||
rotate: 20,
|
||
fontSize: 12
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter (value) {
|
||
return unitConvert(value, unitTypes.percent).join('')
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
data: seriesData15,
|
||
type: 'bar',
|
||
barWidth: 14,
|
||
barMinHeight: 2
|
||
},
|
||
{
|
||
data: prevSeriesData15,
|
||
type: 'bar',
|
||
barWidth: 14,
|
||
barMinHeight: 2
|
||
}
|
||
]
|
||
}
|
||
myChart.setOption(option)
|
||
document.getElementById('imgCanvas15').src = myChart.getDataURL({pixelRatio: 1})
|
||
}
|
||
|
||
var app16 = totalTop3AppCityTraffic[1]
|
||
var categoryData16 = []
|
||
var seriesData16 = []
|
||
var prevSeriesData16 = []
|
||
if (app16) {
|
||
var prevApp16 = prevTotalTop3AppCityTraffic.find(t => t.common_app_label === app16.common_app_label)
|
||
top3AppCityTraffic.forEach(d => {
|
||
if (d.common_app_label === app16.common_app_label) {
|
||
categoryData16.push(d.client_region)
|
||
seriesData16.push(d.bytes / app16.bytes)
|
||
var prevApp = prevTop3AppCityTraffic.find(p => p.common_app_label === d.common_app_label && p.client_region === d.client_region)
|
||
if (prevApp) {
|
||
prevSeriesData16.push(prevApp.bytes / prevApp16.bytes)
|
||
} else {
|
||
prevSeriesData16.push(0)
|
||
}
|
||
}
|
||
})
|
||
}
|
||
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: categoryData16,
|
||
axisLabel: {
|
||
interval: 0,
|
||
rotate: 20,
|
||
fontSize: 12
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter (value) {
|
||
return unitConvert(value, unitTypes.percent).join('')
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
data: seriesData16,
|
||
type: 'bar',
|
||
barWidth: 14,
|
||
barMinHeight: 2
|
||
},
|
||
{
|
||
data: prevSeriesData16,
|
||
type: 'bar',
|
||
barWidth: 14,
|
||
barMinHeight: 2
|
||
}
|
||
]
|
||
}
|
||
myChart.setOption(option)
|
||
document.getElementById('imgCanvas16').src = myChart.getDataURL({pixelRatio: 1})
|
||
}
|
||
|
||
|
||
initEcharts1()
|
||
initEcharts2()
|
||
initEcharts3()
|
||
initEcharts4()
|
||
initEcharts5()
|
||
initEcharts6()
|
||
initEcharts7()
|
||
initEcharts8()
|
||
initEcharts9()
|
||
initEcharts10()
|
||
initEcharts11()
|
||
initEcharts12()
|
||
initEcharts13()
|
||
initEcharts14()
|
||
initEcharts15()
|
||
initEcharts16()
|
||
initTimeRange()
|
||
</script>
|
||
|
||
</html>
|