2735 lines
81 KiB
HTML
2735 lines
81 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Title</title>
|
||
<script src="http://192.168.44.54/assets/echarts.min.js"></script>
|
||
<style>
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
body {
|
||
width: 1200px;
|
||
margin: auto;
|
||
padding-bottom: 50px;
|
||
}
|
||
.indent-3 {
|
||
padding-left: 50px;
|
||
padding-right: 50px;
|
||
}
|
||
.header1, .header2, .header3, .header4 {
|
||
font-weight: bold;
|
||
}
|
||
.header1 {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
height: 100px;
|
||
color: white;
|
||
background-color: rgb(0,116,159);
|
||
font-size: 34px;
|
||
}
|
||
.header1 .header1__time {
|
||
padding-top: 6px;
|
||
padding-left: 30px;
|
||
font-size: 18px;
|
||
font-weight: normal;
|
||
font-style: italic;
|
||
}
|
||
.header2 {
|
||
margin: 30px 0 20px;
|
||
padding: 0 30px;
|
||
color: rgb(51,51,51);
|
||
font-size: 20px;
|
||
}
|
||
.header3 {
|
||
margin: 20px 0;
|
||
padding: 0 43px;
|
||
color: rgb(0,116,159);
|
||
font-size: 18px;
|
||
}
|
||
.header4 {
|
||
margin-bottom: 10px;
|
||
padding-left: 10px;
|
||
font-size: 14px;
|
||
color: rgba(0,0,0,0.85);;
|
||
}
|
||
.text {
|
||
color: rgb(74,74,74);
|
||
font-size: 16px;
|
||
line-height: 24px;
|
||
text-indent: 32px;
|
||
}
|
||
.text .fill {
|
||
color: black;
|
||
padding: 0 3px;
|
||
}
|
||
|
||
.table-box {
|
||
padding-top: 10px;
|
||
padding-bottom: 10px;
|
||
}
|
||
.table__title {
|
||
font-size: 14px;
|
||
color: rgba(0,0,0,0.85);
|
||
padding-bottom: 10px;
|
||
text-align: center;
|
||
}
|
||
.table {
|
||
width: 100%;
|
||
text-align: center;
|
||
border: 1px solid rgb(222,222,222);
|
||
border-radius: 4px;
|
||
border-collapse: collapse;
|
||
}
|
||
.table__td {
|
||
border: 1px solid rgb(222,222,222);
|
||
color: rgb(38,38,38);
|
||
font-size: 16px;
|
||
padding: 8px 0;
|
||
}
|
||
.font-size-14 .table__td {
|
||
font-size: 14px;
|
||
}
|
||
.td__quantile-group {
|
||
padding: 8px 0;
|
||
display: table;
|
||
width: 100%;
|
||
}
|
||
.td__quantile-group .td__quantile {
|
||
/*display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex: 0 0 200px;*/
|
||
display: table-row;
|
||
}
|
||
.td__quantile-group .td__quantile:last-of-type {
|
||
border-bottom: none;
|
||
}
|
||
.quantile__label {
|
||
display: table-cell;
|
||
color: rgb(122,122,122);
|
||
font-size: 14px;
|
||
width: 50%;
|
||
}
|
||
.quantile__value {
|
||
display: table-cell;
|
||
width: 50%;
|
||
font-size: 14px;
|
||
text-align: left;
|
||
vertical-align: middle;
|
||
}
|
||
.quantile__label .quantile__point {
|
||
margin-right: 10px;
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
}
|
||
.label-box {
|
||
display: flex;
|
||
justify-content: right;
|
||
align-items: center;
|
||
padding-right: 15px;
|
||
}
|
||
.quantile__point.quantile__point--p50 {
|
||
background-color: rgb(35,191,154);
|
||
}
|
||
.quantile__point.quantile__point--p90 {
|
||
background-color: rgb(255,162,0);
|
||
}
|
||
.quantile__point.quantile__point--p99 {
|
||
background-color: rgb(236,127,106);
|
||
}
|
||
.table__th {
|
||
height: 47px;
|
||
border: 1px solid rgb(222,222,222);
|
||
background-color: rgb(250,250,250);
|
||
color: rgb(102,102,102);
|
||
font-weight: normal;
|
||
font-size: 14px;
|
||
}
|
||
.table__footer {
|
||
display: flex;
|
||
font-size: 14px;
|
||
color: rgb(102,102,102);
|
||
}
|
||
.table__footer .footer__label {
|
||
color: rgb(51,51,51);
|
||
}
|
||
.table.table-contain-echarts {
|
||
margin-top: 20px;
|
||
margin-bottom: 4px;
|
||
}
|
||
.table.table-contain-echarts .echarts-box {
|
||
height: 200px;
|
||
}
|
||
.table.table-contain-echarts .echarts__canvas {
|
||
height: 100%;
|
||
}
|
||
|
||
.echarts-box {
|
||
display: flex;
|
||
}
|
||
.echarts {
|
||
flex: 1;
|
||
}
|
||
.echarts__legends {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-bottom: 5px;
|
||
}
|
||
.echarts__legend {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.echarts__legend:first-of-type {
|
||
margin-right: 10px;
|
||
}
|
||
.color-block {
|
||
width: 16px;
|
||
height: 8px;
|
||
border-radius: 2px;
|
||
margin-right: 4px;
|
||
}
|
||
.color-block.blue {
|
||
background-color: rgb(88,176,209);
|
||
}
|
||
.color-block.green {
|
||
background-color: rgb(140,206,213);
|
||
}
|
||
.legend-text {
|
||
font-size: 12px;
|
||
color: rgb(102,102,102);
|
||
}
|
||
.echarts__title {
|
||
font-size: 14px;
|
||
color: rgba(0,0,0,0.85);
|
||
padding-bottom: 10px;
|
||
text-align: center;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="header1">网络服务质量监测报告 (精简版)<span class="header1__time" id="currentRange0"></span></div>
|
||
<div class="header2">一.整体流量概况</div>
|
||
<div class="header3">1.流量规模</div>
|
||
<div class="table-box indent-3">
|
||
<div class="table__title">表1 整体流量概况</div>
|
||
<table class="table">
|
||
<thead class="table__header">
|
||
<tr class="table__tr">
|
||
<th class="table__th">速率均值</th>
|
||
<th class="table__th">速率谷值</th>
|
||
<th class="table__th">速率分位值</th>
|
||
<th class="table__th">速率峰值</th>
|
||
<th class="table__th">速率均值环比</th>
|
||
<th class="table__th">总流量</th>
|
||
<th class="table__th">总流量环比</th>
|
||
</tr>
|
||
</thead>
|
||
<tr class="table__tr">
|
||
<td class="table__td">451.24 Gbps</td>
|
||
<td class="table__td">83.98 Gbps</td>
|
||
<td class="table__td">
|
||
<div class="td__quantile-group">
|
||
<div class="td__quantile">
|
||
<div class="quantile__label">
|
||
<div class="label-box">
|
||
<div class="quantile__point quantile__point--p50"></div>
|
||
<div>P50</div>
|
||
</div>
|
||
</div>
|
||
<div class="quantile__value">9.31 Gbps</div>
|
||
</div>
|
||
<div class="td__quantile">
|
||
<div class="quantile__label">
|
||
<div class="label-box">
|
||
<div class="quantile__point quantile__point--p90"></div>
|
||
<div>P90</div>
|
||
</div>
|
||
</div>
|
||
<div class="quantile__value">7856.09 Gbps</div>
|
||
</div>
|
||
<div class="td__quantile">
|
||
<div class="quantile__label">
|
||
<div class="label-box">
|
||
<div class="quantile__point quantile__point--p99"></div>
|
||
<div>P99</div>
|
||
</div>
|
||
</div>
|
||
<div class="quantile__value">902.70 Gbps</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="table__td">1.02 Tbps</td>
|
||
<td class="table__td">0.05%</td>
|
||
<td class="table__td">1.02 Tbps</td>
|
||
<td class="table__td">0.05%</td>
|
||
</tr>
|
||
</table>
|
||
<div class="table__footer" style="margin-top: 20px;">
|
||
<div class="footer__label">* 流量速率分位值计算方式：</div>以5分钟为时间粒度计算平均流量速率vi，取观测时间范围内的{v1, v2, v3……vn}的分位值，下同。
|
||
</div>
|
||
<div class="table__footer">
|
||
<div class="footer__label">* 环比计算方式：</div>计算当前统计值与上一个统计周期（一天前）的统计值相比的变化率，下同。
|
||
</div>
|
||
</div>
|
||
<div class="echarts-box indent-3">
|
||
<div class="echarts">
|
||
<div class="echarts__canvas" id="canvas1" style="width: 1100px; height: 400px; display: none;"></div>
|
||
<img height="400" width="1100" id="imgCanvas1"/>
|
||
<div class="echarts__title">图1 当日流量变化曲线</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="header3">2.域内地市流量构成</div>
|
||
<div class="table-box indent-3">
|
||
<div class="table__title">表2 域内用户访问域外服务TOP10客户端地区流量分布</div>
|
||
<table class="table">
|
||
<thead class="table__header">
|
||
<tr class="table__tr">
|
||
<th class="table__th">客户端所在域内地区</th>
|
||
<th class="table__th">速率峰值</th>
|
||
<th class="table__th">速率均值</th>
|
||
<th class="table__th">速率分位值</th>
|
||
<th class="table__th">总流量</th>
|
||
<th class="table__th">总流量占比</th>
|
||
<th class="table__th">总流量环比</th>
|
||
</tr>
|
||
</thead>
|
||
<tr class="table__tr">
|
||
<td class="table__td">HTTP</td>
|
||
<td class="table__td">1.57 PB</td>
|
||
<td class="table__td">36.30</td>
|
||
<td class="table__td">
|
||
<div class="td__quantile-group">
|
||
<div class="td__quantile">
|
||
<div class="quantile__label">
|
||
<div class="label-box">
|
||
<div class="quantile__point quantile__point--p50"></div>
|
||
<div>P50</div>
|
||
</div>
|
||
</div>
|
||
<div class="quantile__value">499.31 Gbps</div>
|
||
</div>
|
||
<div class="td__quantile">
|
||
<div class="quantile__label">
|
||
<div class="label-box">
|
||
<div class="quantile__point quantile__point--p90"></div>
|
||
<div>P90</div>
|
||
</div>
|
||
</div>
|
||
<div class="quantile__value">786.09 Gbps</div>
|
||
</div>
|
||
<div class="td__quantile">
|
||
<div class="quantile__label">
|
||
<div class="label-box">
|
||
<div class="quantile__point quantile__point--p99"></div>
|
||
<div>P99</div>
|
||
</div>
|
||
</div>
|
||
<div class="quantile__value">902.70 Gbps</div>
|
||
</div>
|
||
</div>
|
||
<td class="table__td">902.42 PB</td>
|
||
<td class="table__td">36.30%</td>
|
||
<td class="table__td">8.14%</td>
|
||
</tr>
|
||
<tr class="table__tr">
|
||
<td class="table__td">HTTP</td>
|
||
<td class="table__td">1.57 PB</td>
|
||
<td class="table__td">36.30</td>
|
||
<td class="table__td">
|
||
<div class="td__quantile-group">
|
||
<div class="td__quantile">
|
||
<div class="quantile__label">
|
||
<div class="label-box">
|
||
<div class="quantile__point quantile__point--p50"></div>
|
||
<div>P50</div>
|
||
</div>
|
||
</div>
|
||
<div class="quantile__value">499.31 Gbps</div>
|
||
</div>
|
||
<div class="td__quantile">
|
||
<div class="quantile__label">
|
||
<div class="label-box">
|
||
<div class="quantile__point quantile__point--p90"></div>
|
||
<div>P90</div>
|
||
</div>
|
||
</div>
|
||
<div class="quantile__value">786.09 Gbps</div>
|
||
</div>
|
||
<div class="td__quantile">
|
||
<div class="quantile__label">
|
||
<div class="label-box">
|
||
<div class="quantile__point quantile__point--p99"></div>
|
||
<div>P99</div>
|
||
</div>
|
||
</div>
|
||
<div class="quantile__value">902.70 Gbps</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="table__td">902.42 PB</td>
|
||
<td class="table__td">36.30%</td>
|
||
<td class="table__td">8.14%</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="header3">3.服务质量概况</div>
|
||
<div class="table-box indent-3">
|
||
<div class="table__title">表3 域内访问域外流量的服务质量</div>
|
||
<table class="table">
|
||
<thead class="table__header">
|
||
<tr class="table__tr">
|
||
<th class="table__th">服务质量指标</th>
|
||
<th class="table__th">分位值</th>
|
||
<th class="table__th">峰值</th>
|
||
<th class="table__th">均值</th>
|
||
<th class="table__th">均值环比</th>
|
||
</tr>
|
||
</thead>
|
||
<tr class="table__tr">
|
||
<td class="table__td">TCP会话创建延迟(ms)</td>
|
||
<td class="table__td">
|
||
<div class="td__quantile-group">
|
||
<div class="td__quantile">
|
||
<div class="quantile__label">
|
||
<div class="label-box">
|
||
<div class="quantile__point quantile__point--p50"></div>
|
||
<div>P50</div>
|
||
</div>
|
||
</div>
|
||
<div class="quantile__value">499.31 Gbps</div>
|
||
</div>
|
||
<div class="td__quantile">
|
||
<div class="quantile__label">
|
||
<div class="label-box">
|
||
<div class="quantile__point quantile__point--p90"></div>
|
||
<div>P90</div>
|
||
</div>
|
||
</div>
|
||
<div class="quantile__value">786.09 Gbps</div>
|
||
</div>
|
||
<div class="td__quantile">
|
||
<div class="quantile__label">
|
||
<div class="label-box">
|
||
<div class="quantile__point quantile__point--p99"></div>
|
||
<div>P99</div>
|
||
</div>
|
||
</div>
|
||
<div class="quantile__value">902.70 Gbps</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="table__td">902.42 PB</td>
|
||
<td class="table__td">36.30 PB</td>
|
||
<td class="table__td">8.14%</td>
|
||
</tr>
|
||
<tr class="table__tr">
|
||
<td class="table__td">缺包率</td>
|
||
<td class="table__td">
|
||
<div class="td__quantile-group">
|
||
<div class="td__quantile">
|
||
<div class="quantile__label">
|
||
<div class="label-box">
|
||
<div class="quantile__point quantile__point--p50"></div>
|
||
<div>P50</div>
|
||
</div>
|
||
</div>
|
||
<div class="quantile__value">499.31 Gbps</div>
|
||
</div>
|
||
<div class="td__quantile">
|
||
<div class="quantile__label">
|
||
<div class="label-box">
|
||
<div class="quantile__point quantile__point--p90"></div>
|
||
<div>P90</div>
|
||
</div>
|
||
</div>
|
||
<div class="quantile__value">786.09 Gbps</div>
|
||
</div>
|
||
<div class="td__quantile">
|
||
<div class="quantile__label">
|
||
<div class="label-box">
|
||
<div class="quantile__point quantile__point--p99"></div>
|
||
<div>P99</div>
|
||
</div>
|
||
</div>
|
||
<div class="quantile__value">902.70 Gbps</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="table__td">902.42 PB</td>
|
||
<td class="table__td">36.30 PB</td>
|
||
<td class="table__td">8.14%</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
<div class="table-box indent-3">
|
||
<div class="table__title">表4 域外访问域内流量的服务质量</div>
|
||
<table class="table">
|
||
<thead class="table__header">
|
||
<tr class="table__tr">
|
||
<th class="table__th">服务质量指标</th>
|
||
<th class="table__th">分位值</th>
|
||
<th class="table__th">峰值</th>
|
||
<th class="table__th">均值</th>
|
||
<th class="table__th">均值环比</th>
|
||
</tr>
|
||
</thead>
|
||
<tr class="table__tr">
|
||
<td class="table__td">TCP会话创建延迟(ms)</td>
|
||
<td class="table__td">
|
||
<div class="td__quantile-group">
|
||
<div class="td__quantile">
|
||
<div class="quantile__label">
|
||
<div class="label-box">
|
||
<div class="quantile__point quantile__point--p50"></div>
|
||
<div>P50</div>
|
||
</div>
|
||
</div>
|
||
<div class="quantile__value">499.31 Gbps</div>
|
||
</div>
|
||
<div class="td__quantile">
|
||
<div class="quantile__label">
|
||
<div class="label-box">
|
||
<div class="quantile__point quantile__point--p90"></div>
|
||
<div>P90</div>
|
||
</div>
|
||
</div>
|
||
<div class="quantile__value">786.09 Gbps</div>
|
||
</div>
|
||
<div class="td__quantile">
|
||
<div class="quantile__label">
|
||
<div class="label-box">
|
||
<div class="quantile__point quantile__point--p99"></div>
|
||
<div>P99</div>
|
||
</div>
|
||
</div>
|
||
<div class="quantile__value">902.70 Gbps</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="table__td">902.42 PB</td>
|
||
<td class="table__td">36.30 PB</td>
|
||
<td class="table__td">8.14%</td>
|
||
</tr>
|
||
<tr class="table__tr">
|
||
<td class="table__td">缺包率</td>
|
||
<td class="table__td">
|
||
<div class="td__quantile-group">
|
||
<div class="td__quantile">
|
||
<div class="quantile__label">
|
||
<div class="label-box">
|
||
<div class="quantile__point quantile__point--p50"></div>
|
||
<div>P50</div>
|
||
</div>
|
||
</div>
|
||
<div class="quantile__value">499.31 Gbps</div>
|
||
</div>
|
||
<div class="td__quantile">
|
||
<div class="quantile__label">
|
||
<div class="label-box">
|
||
<div class="quantile__point quantile__point--p90"></div>
|
||
<div>P90</div>
|
||
</div>
|
||
</div>
|
||
<div class="quantile__value">786.09 Gbps</div>
|
||
</div>
|
||
<div class="td__quantile">
|
||
<div class="quantile__label">
|
||
<div class="label-box">
|
||
<div class="quantile__point quantile__point--p99"></div>
|
||
<div>P99</div>
|
||
</div>
|
||
</div>
|
||
<div class="quantile__value">902.70 Gbps</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="table__td">902.42 PB</td>
|
||
<td class="table__td">36.30 PB</td>
|
||
<td class="table__td">8.14%</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="header2">二.业务排名表</div>
|
||
<div class="header3">1.整体业务排名</div>
|
||
|
||
<div class="echarts-box indent-3">
|
||
<div class="echarts">
|
||
<div class="echarts__canvas" id="canvas17" style="width: 1100px; height: 400px;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="table-box indent-3">
|
||
<table class="table">
|
||
<thead class="table__header">
|
||
<tr class="table__tr">
|
||
<th class="table__th">APP流量速率</th>
|
||
<th class="table__th">douyin</th>
|
||
<th class="table__th">wechart</th>
|
||
<th class="table__th">aerawerae</th>
|
||
<th class="table__th">ccc</th>
|
||
<th class="table__th">douyin2</th>
|
||
<th class="table__th">douyin3</th>
|
||
<th class="table__th">douyin4</th>
|
||
<th class="table__th">douyin5</th>
|
||
<th class="table__th">douyin6</th>
|
||
<th class="table__th">douyin7</th>
|
||
</tr>
|
||
</thead>
|
||
<tr class="table__tr font-size-14">
|
||
<td class="table__td">P50</td>
|
||
<td class="table__td">55.63 Gbps</td>
|
||
<td class="table__td">27.60 Gbps</td>
|
||
<td class="table__td">27.60 Gbps</td>
|
||
<td class="table__td">55.63 Gbps</td>
|
||
<td class="table__td">27.60 Gbps</td>
|
||
<td class="table__td">55.63 Gbps</td>
|
||
<td class="table__td">27.60 Gbps</td>
|
||
<td class="table__td">55.63 Gbps</td>
|
||
<td class="table__td">27.60 Gbps</td>
|
||
<td class="table__td">55.63 Gbps</td>
|
||
</tr>
|
||
<tr class="table__tr font-size-14">
|
||
<td class="table__td">P90</td>
|
||
<td class="table__td">55.63 Gbps</td>
|
||
<td class="table__td">27.60 Gbps</td>
|
||
<td class="table__td">55.63 Gbps</td>
|
||
<td class="table__td">27.60 Gbps</td>
|
||
<td class="table__td">55.63 Gbps</td>
|
||
<td class="table__td">27.60 Gbps</td>
|
||
<td class="table__td">27.60 Gbps</td>
|
||
<td class="table__td">55.63 Gbps</td>
|
||
<td class="table__td">27.60 Gbps</td>
|
||
<td class="table__td">55.63 Gbps</td>
|
||
</tr>
|
||
<tr class="table__tr font-size-14">
|
||
<td class="table__td">P99</td>
|
||
<td class="table__td">55.63 Gbps</td>
|
||
<td class="table__td">27.60 Gbps</td>
|
||
<td class="table__td">55.63 Gbps</td>
|
||
<td class="table__td">27.60 Gbps</td>
|
||
<td class="table__td">55.63 Gbps</td>
|
||
<td class="table__td">27.60 Gbps</td>
|
||
<td class="table__td">55.63 Gbps</td>
|
||
<td class="table__td">27.60 Gbps</td>
|
||
<td class="table__td">27.60 Gbps</td>
|
||
<td class="table__td">55.63 Gbps</td>
|
||
</tr>
|
||
<tr class="table__tr font-size-14">
|
||
<td class="table__td">峰值</td>
|
||
<td class="table__td">55.63 Gbps</td>
|
||
<td class="table__td">27.60 Gbps</td>
|
||
<td class="table__td">55.63 Gbps</td>
|
||
<td class="table__td">27.60 Gbps</td>
|
||
<td class="table__td">55.63 Gbps</td>
|
||
<td class="table__td">55.63 Gbps</td>
|
||
<td class="table__td">27.60 Gbps</td>
|
||
<td class="table__td">55.63 Gbps</td>
|
||
<td class="table__td">27.60 Gbps</td>
|
||
<td class="table__td">55.63 Gbps</td>
|
||
</tr>
|
||
<tr class="table__tr font-size-14">
|
||
<td class="table__td">均值</td>
|
||
<td class="table__td">55.63 Gbps</td>
|
||
<td class="table__td">27.60 Gbps</td>
|
||
<td class="table__td">55.63 Gbps</td>
|
||
<td class="table__td">27.60 Gbps</td>
|
||
<td class="table__td">27.60 Gbps</td>
|
||
<td class="table__td">55.63 Gbps</td>
|
||
<td class="table__td">27.60 Gbps</td>
|
||
<td class="table__td">55.63 Gbps</td>
|
||
<td class="table__td">27.60 Gbps</td>
|
||
<td class="table__td">55.63 Gbps</td>
|
||
</tr>
|
||
</table>
|
||
<div class="echarts__title" style="padding-top: 10px;">图2 活跃APP流量情况</div>
|
||
</div>
|
||
|
||
<div class="header3">2.省内外业务排名</div>
|
||
<div class="echarts-box indent-3">
|
||
<div class="echarts">
|
||
<div class="echarts__canvas" id="canvas2" style="width: 550px; height: 280px;"></div>
|
||
<div class="echarts__title">图3 域内用户访问域外服务的APP流量占比</div>
|
||
</div>
|
||
<div class="echarts">
|
||
<div class="echarts__canvas" id="canvas3" style="width: 550px; height: 280px;"></div>
|
||
<div class="echarts__title">图4 域外用户访问域内服端的APP流量占比</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="header2">三.业务质量排名表</div>
|
||
<div class="table-box indent-3">
|
||
<div class="table__title">表5 活跃APP流量情况</div>
|
||
<table class="table">
|
||
<thead class="table__header">
|
||
<tr class="table__tr">
|
||
<th rowspan="2" class="table__th">APP</th>
|
||
<th rowspan="2" class="table__th">流量占比</th>
|
||
<th colspan="3" class="table__th">TCP会话延迟(ms)</th>
|
||
<th colspan="3" class="table__th">缺包率</th>
|
||
</tr>
|
||
<tr class="table__tr">
|
||
<th class="table__th">P50 P90 P99</th>
|
||
<th class="table__th">均值</th>
|
||
<th class="table__th">均值环比</th>
|
||
<th class="table__th">P50 P90 P99</th>
|
||
<th class="table__th">均值</th>
|
||
<th class="table__th">均值环比</th>
|
||
</tr>
|
||
</thead>
|
||
<tr class="table__tr">
|
||
<td class="table__td">douyin</td>
|
||
<td class="table__td">6.12%</td>
|
||
<td class="table__td">
|
||
<div class="td__quantile-group">
|
||
<div class="td__quantile">
|
||
<div class="quantile__label">
|
||
<div class="label-box">
|
||
<div class="quantile__point quantile__point--p50"></div>
|
||
<div>P50</div>
|
||
</div>
|
||
</div>
|
||
<div class="quantile__value">124</div>
|
||
</div>
|
||
<div class="td__quantile">
|
||
<div class="quantile__label">
|
||
<div class="label-box">
|
||
<div class="quantile__point quantile__point--p90"></div>
|
||
<div>P90</div>
|
||
</div>
|
||
</div>
|
||
<div class="quantile__value">143</div>
|
||
</div>
|
||
<div class="td__quantile">
|
||
<div class="quantile__label">
|
||
<div class="label-box">
|
||
<div class="quantile__point quantile__point--p99"></div>
|
||
<div>P99</div>
|
||
</div>
|
||
</div>
|
||
<div class="quantile__value">15</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="table__td">27.60</td>
|
||
<td class="table__td">2.10%</td>
|
||
<td class="table__td">
|
||
<div class="td__quantile-group">
|
||
<div class="td__quantile">
|
||
<div class="quantile__label">
|
||
<div class="label-box">
|
||
<div class="quantile__point quantile__point--p50"></div>
|
||
<div>P50</div>
|
||
</div>
|
||
</div>
|
||
<div class="quantile__value">0.01%</div>
|
||
</div>
|
||
<div class="td__quantile">
|
||
<div class="quantile__label">
|
||
<div class="label-box">
|
||
<div class="quantile__point quantile__point--p90"></div>
|
||
<div>P90</div>
|
||
</div>
|
||
</div>
|
||
<div class="quantile__value">0.01%</div>
|
||
</div>
|
||
<div class="td__quantile">
|
||
<div class="quantile__label">
|
||
<div class="label-box">
|
||
<div class="quantile__point quantile__point--p99"></div>
|
||
<div>P99</div>
|
||
</div>
|
||
</div>
|
||
<div class="quantile__value">0.02%</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="table__td">0.05%</td>
|
||
<td class="table__td">-0.05%</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="header2">四.链路方向流量构成</div>
|
||
<div class="echarts-box indent-3">
|
||
<div class="echarts">
|
||
<div class="echarts__canvas" id="canvas4" style="width: 1100px;height: 450px;"></div>
|
||
<div class="echarts__title">图5 域内用户访问域外服务流量流向图</div>
|
||
</div>
|
||
</div>
|
||
<div class="table-box indent-3">
|
||
<table class="table table-contain-echarts">
|
||
<thead class="table__header">
|
||
<tr class="table__tr">
|
||
<th class="table__th" style="width: 100px;"></th>
|
||
<th class="table__th" style="width: 280px">西宁</th>
|
||
<th class="table__th" style="width: 280px;">太原</th>
|
||
<th class="table__th" style="width: 280px;">西安</th>
|
||
</tr>
|
||
</thead>
|
||
<tr class="table__tr">
|
||
<td class="table__td">下行链路</td>
|
||
<td class="table__td">
|
||
<div class="echarts-box">
|
||
<div class="echarts">
|
||
<div class="echarts__canvas" id="canvas5"></div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="table__td">
|
||
<div class="echarts-box">
|
||
<div class="echarts">
|
||
<div class="echarts__canvas" id="canvas6"></div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="table__td">
|
||
<div class="echarts-box">
|
||
<div class="echarts">
|
||
<div class="echarts__canvas" id="canvas7"></div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr class="table__tr">
|
||
<td class="table__td">上行链路</td>
|
||
<td class="table__td">
|
||
<div class="echarts-box">
|
||
<div class="echarts">
|
||
<div class="echarts__canvas" id="canvas8"></div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="table__td">
|
||
<div class="echarts-box">
|
||
<div class="echarts">
|
||
<div class="echarts__canvas" id="canvas9"></div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="table__td">
|
||
<div class="echarts-box">
|
||
<div class="echarts">
|
||
<div class="echarts__canvas" id="canvas10"></div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
<div class="echarts__title">图6 域内用户访问域外服务各链路TOP5APP流量占比</div>
|
||
<div class="table-box indent-3">
|
||
<table class="table table-contain-echarts">
|
||
<thead class="table__header">
|
||
<tr class="table__tr">
|
||
<th class="table__th" style="width: 100px;"></th>
|
||
<th class="table__th" style="width: 280px;">西宁</th>
|
||
<th class="table__th" style="width: 280px;">太原</th>
|
||
<th class="table__th" style="width: 280px;">西安</th>
|
||
</tr>
|
||
</thead>
|
||
<tr class="table__tr">
|
||
<td class="table__td">下行链路</td>
|
||
<td class="table__td">
|
||
<div class="echarts-box">
|
||
<div class="echarts">
|
||
<div class="echarts__canvas" id="canvas11"></div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="table__td">
|
||
<div class="echarts-box">
|
||
<div class="echarts">
|
||
<div class="echarts__canvas" id="canvas12"></div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="table__td">
|
||
<div class="echarts-box">
|
||
<div class="echarts">
|
||
<div class="echarts__canvas" id="canvas13"></div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr class="table__tr">
|
||
<td class="table__td">上行链路</td>
|
||
<td class="table__td">
|
||
<div class="echarts-box">
|
||
<div class="echarts">
|
||
<div class="echarts__canvas" id="canvas14"></div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="table__td">
|
||
<div class="echarts-box">
|
||
<div class="echarts">
|
||
<div class="echarts__canvas" id="canvas15"></div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="table__td">
|
||
<div class="echarts-box">
|
||
<div class="echarts">
|
||
<div class="echarts__canvas" id="canvas16"></div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
<div class="echarts__legends">
|
||
<div class="echarts__legend">
|
||
<div class="color-block blue"></div>
|
||
<div class="legend-text" id="currentRange6"></div>
|
||
</div>
|
||
<div class="echarts__legend">
|
||
<div class="color-block green"></div>
|
||
<div class="legend-text" id="prevRange6"></div>
|
||
</div>
|
||
</div>
|
||
<div class="echarts__title">图7 域内用户访问域外服务各链路访问的服务端所在Top5省份流量</div>
|
||
</body>
|
||
<script>
|
||
/** 数据 begin */
|
||
// 时间区间
|
||
var timeRange = [1648742400, 1648828800]
|
||
var seriesData1 = [[1646323200000,772532872894],[1646323500000,737472933103],[1646323800000,718003693762],[1646324100000,787275787118],[1646324400000,675091838555],[1646324700000,665907987145],[1646325000000,663995345084],[1646325300000,673263448146],[1646325600000,623024467477],[1646325900000,607518328769],[1646326200000,595596692291],[1646326500000,576685657915],[1646326800000,563125388840],[1646327100000,536629805389],[1646327400000,512064513301],[1646327700000,500112361755],[1646328000000,483313489075],[1646328300000,529000513941],[1646328600000,434706003334],[1646328900000,420330833357],[1646329200000,412221073080],[1646329500000,381581636955],[1646329800000,368380772263],[1646330100000,355612050222],[1646330400000,346546307434],[1646330700000,351106970704],[1646331000000,306402436164],[1646331300000,307549388296],[1646331600000,289914454618],[1646331900000,269914427899],[1646332200000,265810006551],[1646332500000,325605447693],[1646332800000,228689729283],[1646333100000,221380076104],[1646333400000,214688315185],[1646333700000,207430475082],[1646334000000,228531765558],[1646334300000,218633588553],[1646334600000,177510090490],[1646334900000,172114088332],[1646335200000,167588261185],[1646335500000,160522955738],[1646335800000,158616961652],[1646336100000,157404547208],[1646336400000,146780416292],[1646336700000,142851201793],[1646337000000,143891943824],[1646337300000,144832687528],[1646337600000,134942949909],[1646337900000,126263388287],[1646338200000,130563200859],[1646338500000,124184387098],[1646338800000,116545272633],[1646339100000,121405570250],[1646339400000,114561101206],[1646339700000,110468589545],[1646340000000,113104811845],[1646340300000,112646490470],[1646340600000,111953785239],[1646340900000,102888018727],[1646341200000,102796512378],[1646341500000,101049996649],[1646341800000,96283941675],[1646342100000,95502450781],[1646342400000,91188952241],[1646342700000,91720190187],[1646343000000,93628795245],[1646343300000,86417843281],[1646343600000,86166292795],[1646343900000,83983490611],[1646344200000,87798450663],[1646344500000,88662331578],[1646344800000,87145266635],[1646345100000,87856564892],[1646345400000,91884802839],[1646345700000,90421909864],[1646346000000,90618563208],[1646346300000,88114179946],[1646346600000,88056019830],[1646346900000,89552706480],[1646347200000,94847380620],[1646347500000,92714721441],[1646347800000,90831666011],[1646348100000,117785027484],[1646348400000,95847207702],[1646348700000,96714010066],[1646349000000,95093327595],[1646349300000,105594955186],[1646349600000,106301457552],[1646349900000,112033934697],[1646350200000,110924049081],[1646350500000,117038870948],[1646350800000,122285968342],[1646351100000,129225537263],[1646351400000,135303008087],[1646351700000,144618274688],[1646352000000,160191289955],[1646352300000,174804633925],[1646352600000,169371000210],[1646352900000,185220468936],[1646353200000,188625450543],[1646353500000,203201591624],[1646353800000,229816839313],[1646354100000,218415543727],[1646354400000,227099952017],[1646354700000,235943215456],[1646355000000,247778577722],[1646355300000,261692796377],[1646355600000,271103332032],[1646355900000,281777626596],[1646356200000,298629680799],[1646356500000,294071950673],[1646356800000,307591643611],[1646357100000,314096020387],[1646357400000,322787548616],[1646357700000,326521884163],[1646358000000,336418677250],[1646358300000,345710499037],[1646358600000,347096385973],[1646358900000,353403522514],[1646359200000,368144445750],[1646359500000,371593197939],[1646359800000,376720441131],[1646360100000,384921440707],[1646360400000,384856278322],[1646360700000,390655320977],[1646361000000,393831467047],[1646361300000,397622731052],[1646361600000,407859512345],[1646361900000,409459764011],[1646362200000,409923219718],[1646362500000,417388328374],[1646362800000,421081337847],[1646363100000,425995051530],[1646363400000,482837867511],[1646363700000,425714780866],[1646364000000,423099990656],[1646364300000,430364721344],[1646364600000,436598213078],[1646364900000,440885401830],[1646365200000,454553393946],[1646365500000,452835614814],[1646365800000,456484123399],[1646366100000,457290438810],[1646366400000,465870786741],[1646366700000,468488230914],[1646367000000,473969109825],[1646367300000,474162132998],[1646367600000,479733893487],[1646367900000,490254608588],[1646368200000,492288519732],[1646368500000,493088178908],[1646368800000,491006146192],[1646369100000,494753570234],[1646369400000,497863023455],[1646369700000,532366285263],[1646370000000,490041427553],[1646370300000,494902680280],[1646370600000,498125874014],[1646370900000,505359743295],[1646371200000,504338218695],[1646371500000,505417771401],[1646371800000,509034977314],[1646372100000,511892791322],[1646372400000,516100206671],[1646372700000,523280635042],[1646373000000,533498235909],[1646373300000,536796333516],[1646373600000,551749048332],[1646373900000,555131083787],[1646374200000,566073763029],[1646374500000,572503869450],[1646374800000,581731981613],[1646375100000,587988292609],[1646375400000,600557395255],[1646375700000,605807729086],[1646376000000,692732845270],[1646376300000,564507238172],[1646376600000,564951524109],[1646376900000,565687332976],[1646377200000,609399687934],[1646377500000,538156993674],[1646377800000,540328705623],[1646378100000,532195464380],[1646378400000,521074412796],[1646378700000,516827990470],[1646379000000,516573361943],[1646379300000,511874422203],[1646379600000,508645651472],[1646379900000,506269721953],[1646380200000,506317818150],[1646380500000,505808996974],[1646380800000,501538854606],[1646381100000,507010826102],[1646381400000,548333571481],[1646381700000,489024700765],[1646382000000,493991292211],[1646382300000,502385633763],[1646382600000,502402704141],[1646382900000,502259888550],[1646383200000,519948206893],[1646383500000,506239688156],[1646383800000,543347948433],[1646384100000,498511959066],[1646384400000,512642317007],[1646384700000,512932141312],[1646385000000,513112952130],[1646385300000,525054894052],[1646385600000,520325935700],[1646385900000,527240474168],[1646386200000,523617937557],[1646386500000,529364687794],[1646386800000,535594151283],[1646387100000,532570628846],[1646387400000,529527878395],[1646387700000,529929031523],[1646388000000,527900296600],[1646388300000,527541592058],[1646388600000,529046251110],[1646388900000,545756964174],[1646389200000,536604796869],[1646389500000,541063045749],[1646389800000,544931242676],[1646390100000,551184984349],[1646390400000,555122992220],[1646390700000,577249146584],[1646391000000,573953265498],[1646391300000,563624187481],[1646391600000,579499417800],[1646391900000,574808833840],[1646392200000,571952935514],[1646392500000,583361001294],[1646392800000,585485310090],[1646393100000,595694314567],[1646393400000,594423439642],[1646393700000,605240653345],[1646394000000,610218412423],[1646394300000,609736256632],[1646394600000,625699016259],[1646394900000,628300934891],[1646395200000,632089061066],[1646395500000,644450648756],[1646395800000,651920826942],[1646396100000,656231274059],[1646396400000,674012331354],[1646396700000,671956613128],[1646397000000,683940816363],[1646397300000,683340014775],[1646397600000,679486462327],[1646397900000,688855536686],[1646398200000,699511886641],[1646398500000,712946834507],[1646398800000,722430075071],[1646399100000,727410447518],[1646399400000,734104909319],[1646399700000,754513406782],[1646400000000,762098029749],[1646400300000,765969642914],[1646400600000,763326584440],[1646400900000,788479131162],[1646401200000,785584677446],[1646401500000,788441495121],[1646401800000,815279057900],[1646402100000,808788386447],[1646402400000,844383983384],[1646402700000,829771825399],[1646403000000,836759193214],[1646403300000,844231456933],[1646403600000,850022414566],[1646403900000,861044947245],[1646404200000,864475664031],[1646404500000,862578363480],[1646404800000,880442618138],[1646405100000,883893550796],[1646405400000,887163599665],[1646405700000,890597233508],[1646406000000,902523833111],[1646406300000,905550838362],[1646406600000,903859297382],[1646406900000,1017118927323],[1646407200000,861804321876],[1646407500000,864349855668],[1646407800000,867948911157],[1646408100000,857509874184],[1646408400000,859059627284],[1646408700000,857721722642],[1646409000000,846061427500],[1646409300000,857208596245]]
|
||
var quantile1 = {
|
||
p50: 536130030141,
|
||
p90: 844057710428,
|
||
p99: 969266744524
|
||
}
|
||
var totalTraffic1 = 587946516246
|
||
var seriesData2 = [
|
||
{
|
||
name: 'douyin',
|
||
value: 56165187441
|
||
},
|
||
{
|
||
name: 'wechat',
|
||
value: 46165187441
|
||
},
|
||
{
|
||
name: 'kuaishou',
|
||
value: 40165187441
|
||
},
|
||
{
|
||
name: 'qq',
|
||
value: 16165187441
|
||
},
|
||
{
|
||
name: 'qq_web',
|
||
value: 6165187441
|
||
}
|
||
]
|
||
var seriesData3 = [
|
||
{
|
||
name: 'douyin',
|
||
value: 56165187441
|
||
},
|
||
{
|
||
name: 'wechat',
|
||
value: 46165187441
|
||
},
|
||
{
|
||
name: 'kuaishou',
|
||
value: 40165187441
|
||
},
|
||
{
|
||
name: 'qq',
|
||
value: 16165187441
|
||
},
|
||
{
|
||
name: 'qq_web',
|
||
value: 6165187441
|
||
}
|
||
]
|
||
|
||
/* 2.1 app整体流量排名 */
|
||
var overallAppTraffic = [
|
||
{
|
||
app_company: 'douyin',
|
||
bytes: 345243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
app_company: 'wechat',
|
||
bytes: 245243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
app_company: 'aleskrhalwkei',
|
||
bytes: 145243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
app_company: 'ccc',
|
||
bytes: 140243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
app_company: 'douyin2',
|
||
bytes: 115243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
app_company: 'douyin3',
|
||
bytes: 114243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
app_company: 'douyin4',
|
||
bytes: 75243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
app_company: 'douyin5',
|
||
bytes: 55243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
app_company: 'douyin6',
|
||
bytes: 45243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
app_company: 'douyin7',
|
||
bytes: 15243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
}
|
||
]
|
||
var prevOverallAppTraffic = [
|
||
{
|
||
app_company: 'douyin',
|
||
bytes: 305243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
app_company: 'wechat',
|
||
bytes: 205243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
app_company: 'aleskrhalwkei',
|
||
bytes: 185243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
app_company: 'ccc',
|
||
bytes: 190243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
app_company: 'douyin2',
|
||
bytes: 105243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
app_company: 'douyin3',
|
||
bytes: 104243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
app_company: 'douyin4',
|
||
bytes: 45243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
app_company: 'douyin5',
|
||
bytes: 35243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
app_company: 'douyin6',
|
||
bytes: 45243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
},
|
||
{
|
||
app_company: 'douyin7',
|
||
bytes: 25243240041,
|
||
rate50: 885454,
|
||
rate90: 1987332,
|
||
rate99: 2503297,
|
||
rate_avg: 984710,
|
||
rate_max: 2503297,
|
||
rate_min: 108410
|
||
}
|
||
]
|
||
|
||
/* 4.1 流量流向图 */
|
||
var data4 = [{ egress_link_direction: "xi'an", ingress_link_direction: 'taiyuan', bytes: 1234232456 }, { egress_link_direction: "taiyuan", ingress_link_direction: "xi'an", bytes: 5121311222 }, { egress_link_direction: "xi'an", ingress_link_direction: 'xining', bytes: 3365771234 }]
|
||
|
||
/* 4.2 */
|
||
// 总流量
|
||
var totalEgressTraffic = [
|
||
{
|
||
egress_link_direction: '西宁',
|
||
egress_bytes: 6549687641365
|
||
},
|
||
{
|
||
egress_link_direction: '太原',
|
||
egress_bytes: 4549687641365
|
||
},
|
||
{
|
||
egress_link_direction: '西安',
|
||
egress_bytes: 3549687641365
|
||
}
|
||
]
|
||
var totalIngressTraffic = [
|
||
{
|
||
ingress_link_direction: '西宁',
|
||
ingress_bytes: 6549687641365
|
||
},
|
||
{
|
||
ingress_link_direction: '太原',
|
||
ingress_bytes: 4549687641365
|
||
},
|
||
{
|
||
ingress_link_direction: '西安',
|
||
ingress_bytes: 3549687641365
|
||
}
|
||
]
|
||
// 西宁top5 app 上行
|
||
var xiningEgressTop5AppTraffic = [
|
||
{
|
||
app_label: 'douyin',
|
||
egress_bytes: 65498796845
|
||
},
|
||
{
|
||
app_label: 'kuaishou',
|
||
egress_bytes: 55498796845
|
||
},
|
||
{
|
||
app_label: 'wechat',
|
||
egress_bytes: 52498796845
|
||
},
|
||
{
|
||
app_label: 'qq',
|
||
egress_bytes: 45498796845
|
||
},
|
||
{
|
||
app_label: 'baidu',
|
||
egress_bytes: 25498796845
|
||
}
|
||
]
|
||
// 太原top5 app 上行
|
||
var taiyuanEgressTop5AppTraffic = [
|
||
{
|
||
app_label: 'douyin',
|
||
egress_bytes: 65498796845
|
||
},
|
||
{
|
||
app_label: 'kuaishou',
|
||
egress_bytes: 55498796845
|
||
},
|
||
{
|
||
app_label: 'wechat',
|
||
egress_bytes: 52498796845
|
||
},
|
||
{
|
||
app_label: 'qq',
|
||
egress_bytes: 45498796845
|
||
},
|
||
{
|
||
app_label: 'baidu',
|
||
egress_bytes: 25498796845
|
||
}
|
||
]
|
||
// 西安top5 app 上行
|
||
var xianEgressTop5AppTraffic = [
|
||
{
|
||
app_label: 'douyin',
|
||
egress_bytes: 65498796845
|
||
},
|
||
{
|
||
app_label: 'kuaishou',
|
||
egress_bytes: 55498796845
|
||
},
|
||
{
|
||
app_label: 'wechat',
|
||
egress_bytes: 52498796845
|
||
},
|
||
{
|
||
app_label: 'qq',
|
||
egress_bytes: 45498796845
|
||
},
|
||
{
|
||
app_label: 'baidu',
|
||
egress_bytes: 25498796845
|
||
}
|
||
]
|
||
// 西宁top5 app 下行
|
||
var xiningIngressTop5AppTraffic = [
|
||
{
|
||
app_label: 'douyin',
|
||
ingress_bytes: 65498796845
|
||
},
|
||
{
|
||
app_label: 'kuaishou',
|
||
ingress_bytes: 55498796845
|
||
},
|
||
{
|
||
app_label: 'wechat',
|
||
ingress_bytes: 52498796845
|
||
},
|
||
{
|
||
app_label: 'qq',
|
||
ingress_bytes: 45498796845
|
||
},
|
||
{
|
||
app_label: 'baidu',
|
||
ingress_bytes: 25498796845
|
||
}
|
||
]
|
||
// 太原top5 app 下行
|
||
var taiyuanIngressTop5AppTraffic = [
|
||
{
|
||
app_label: 'douyin',
|
||
ingress_bytes: 65498796845
|
||
},
|
||
{
|
||
app_label: 'kuaishou',
|
||
ingress_bytes: 55498796845
|
||
},
|
||
{
|
||
app_label: 'wechat',
|
||
ingress_bytes: 52498796845
|
||
},
|
||
{
|
||
app_label: 'qq',
|
||
ingress_bytes: 45498796845
|
||
},
|
||
{
|
||
app_label: 'baidu',
|
||
ingress_bytes: 25498796845
|
||
}
|
||
]
|
||
// 西安top5 app 下行
|
||
var xianIngressTop5AppTraffic = [
|
||
{
|
||
app_label: 'douyin',
|
||
ingress_bytes: 65498796845
|
||
},
|
||
{
|
||
app_label: 'kuaishou',
|
||
ingress_bytes: 55498796845
|
||
},
|
||
{
|
||
app_label: 'wechat',
|
||
ingress_bytes: 52498796845
|
||
},
|
||
{
|
||
app_label: 'qq',
|
||
ingress_bytes: 45498796845
|
||
},
|
||
{
|
||
app_label: 'baidu',
|
||
ingress_bytes: 25498796845
|
||
}
|
||
]
|
||
|
||
/* 4.3 */
|
||
// 上一周期上行总流量
|
||
var prevTotalEgressTraffic2 = [
|
||
{
|
||
egress_link_direction: '西宁',
|
||
egress_bytes: 8549876465
|
||
},
|
||
{
|
||
egress_link_direction: '太原',
|
||
egress_bytes: 7549876465
|
||
},
|
||
{
|
||
egress_link_direction: '西安',
|
||
egress_bytes: 6549876465
|
||
}
|
||
]
|
||
// 当前周期上行总流量
|
||
var totalEgressTraffic2 = [
|
||
{
|
||
egress_link_direction: '西宁',
|
||
egress_bytes: 7549876465
|
||
},
|
||
{
|
||
egress_link_direction: '太原',
|
||
egress_bytes: 6549876465
|
||
},
|
||
{
|
||
egress_link_direction: '西安',
|
||
egress_bytes: 5549876465
|
||
}
|
||
]
|
||
// 上一周期下行总流量
|
||
var prevTotalIngressTraffic2 = [
|
||
{
|
||
ingress_link_direction: '西宁',
|
||
ingress_bytes: 6549687641365
|
||
},
|
||
{
|
||
ingress_link_direction: '太原',
|
||
ingress_bytes: 4549687641365
|
||
},
|
||
{
|
||
ingress_link_direction: '西安',
|
||
ingress_bytes: 3549687641365
|
||
}
|
||
]
|
||
// 当前周期下行总流量
|
||
var totalIngressTraffic2 = [
|
||
{
|
||
ingress_link_direction: '西宁',
|
||
ingress_bytes: 5549687641365
|
||
},
|
||
{
|
||
ingress_link_direction: '太原',
|
||
ingress_bytes: 3549687641365
|
||
},
|
||
{
|
||
ingress_link_direction: '西安',
|
||
ingress_bytes: 2549687641365
|
||
}
|
||
]
|
||
// 上一周期西宁上行总流量
|
||
var prevXiningEgressTraffic2 = [
|
||
{
|
||
server_province: '福建',
|
||
egress_bytes: 654687894551
|
||
},
|
||
{
|
||
server_province: '江西',
|
||
egress_bytes: 554687894551
|
||
},
|
||
{
|
||
server_province: '北京',
|
||
egress_bytes: 504687894551
|
||
},
|
||
{
|
||
server_province: '海南',
|
||
egress_bytes: 254687894551
|
||
},
|
||
{
|
||
server_province: '河南',
|
||
egress_bytes: 154687894551
|
||
}
|
||
]
|
||
// 当前周期西宁上行总流量
|
||
var xiningEgressTraffic2 = [
|
||
{
|
||
server_province: '福建',
|
||
egress_bytes: 654687894551
|
||
},
|
||
{
|
||
server_province: '江西',
|
||
egress_bytes: 554687894551
|
||
},
|
||
{
|
||
server_province: '北京',
|
||
egress_bytes: 504687894551
|
||
},
|
||
{
|
||
server_province: '海南',
|
||
egress_bytes: 254687894551
|
||
},
|
||
{
|
||
server_province: '河南',
|
||
egress_bytes: 154687894551
|
||
}
|
||
]
|
||
// 上一周期太原上行总流量
|
||
var prevTaiyuanEgressTraffic2 = [
|
||
{
|
||
server_province: '福建',
|
||
egress_bytes: 654687894551
|
||
},
|
||
{
|
||
server_province: '江西',
|
||
egress_bytes: 554687894551
|
||
},
|
||
{
|
||
server_province: '北京',
|
||
egress_bytes: 504687894551
|
||
},
|
||
{
|
||
server_province: '海南',
|
||
egress_bytes: 254687894551
|
||
},
|
||
{
|
||
server_province: '河南',
|
||
egress_bytes: 154687894551
|
||
}
|
||
]
|
||
// 当前周期太原上行总流量
|
||
var taiyuanEgressTraffic2 = [
|
||
{
|
||
server_province: '福建',
|
||
egress_bytes: 654687894551
|
||
},
|
||
{
|
||
server_province: '江西',
|
||
egress_bytes: 554687894551
|
||
},
|
||
{
|
||
server_province: '北京',
|
||
egress_bytes: 504687894551
|
||
},
|
||
{
|
||
server_province: '海南',
|
||
egress_bytes: 254687894551
|
||
},
|
||
{
|
||
server_province: '河南',
|
||
egress_bytes: 154687894551
|
||
}
|
||
]
|
||
// 上一周期西安上行总流量
|
||
var prevXianEgressTraffic2 = [
|
||
{
|
||
server_province: '福建',
|
||
egress_bytes: 654687894551
|
||
},
|
||
{
|
||
server_province: '江西',
|
||
egress_bytes: 554687894551
|
||
},
|
||
{
|
||
server_province: '北京',
|
||
egress_bytes: 504687894551
|
||
},
|
||
{
|
||
server_province: '海南',
|
||
egress_bytes: 254687894551
|
||
},
|
||
{
|
||
server_province: '河南',
|
||
egress_bytes: 154687894551
|
||
}
|
||
]
|
||
// 当前周期西安上行总流量
|
||
var xianEgressTraffic2 = [
|
||
{
|
||
server_province: '福建',
|
||
egress_bytes: 654687894551
|
||
},
|
||
{
|
||
server_province: '江西',
|
||
egress_bytes: 554687894551
|
||
},
|
||
{
|
||
server_province: '北京',
|
||
egress_bytes: 504687894551
|
||
},
|
||
{
|
||
server_province: '海南',
|
||
egress_bytes: 254687894551
|
||
},
|
||
{
|
||
server_province: '河南',
|
||
egress_bytes: 154687894551
|
||
}
|
||
]
|
||
// 上一周期西宁下行总流量
|
||
var prevXiningIngressTraffic2 = [
|
||
{
|
||
server_province: '福建',
|
||
ingress_bytes: 654687894551
|
||
},
|
||
{
|
||
server_province: '江西',
|
||
ingress_bytes: 554687894551
|
||
},
|
||
{
|
||
server_province: '北京',
|
||
ingress_bytes: 504687894551
|
||
},
|
||
{
|
||
server_province: '海南',
|
||
ingress_bytes: 254687894551
|
||
},
|
||
{
|
||
server_province: '河南',
|
||
ingress_bytes: 154687894551
|
||
}
|
||
]
|
||
// 当前周期西宁下行总流量
|
||
var xiningIngressTraffic2 = [
|
||
{
|
||
server_province: '福建',
|
||
ingress_bytes: 654687894551
|
||
},
|
||
{
|
||
server_province: '江西',
|
||
ingress_bytes: 554687894551
|
||
},
|
||
{
|
||
server_province: '北京',
|
||
ingress_bytes: 504687894551
|
||
},
|
||
{
|
||
server_province: '海南',
|
||
ingress_bytes: 254687894551
|
||
},
|
||
{
|
||
server_province: '河南',
|
||
ingress_bytes: 154687894551
|
||
}
|
||
]
|
||
// 上一周期太原下行总流量
|
||
var prevTaiyuanIngressTraffic2 = [
|
||
{
|
||
server_province: '福建',
|
||
ingress_bytes: 654687894551
|
||
},
|
||
{
|
||
server_province: '江西',
|
||
ingress_bytes: 554687894551
|
||
},
|
||
{
|
||
server_province: '北京',
|
||
ingress_bytes: 504687894551
|
||
},
|
||
{
|
||
server_province: '海南',
|
||
ingress_bytes: 254687894551
|
||
},
|
||
{
|
||
server_province: '河南',
|
||
ingress_bytes: 154687894551
|
||
}
|
||
]
|
||
// 当前周期太原下行总流量
|
||
var taiyuanIngressTraffic2 = [
|
||
{
|
||
server_province: '福建',
|
||
ingress_bytes: 654687894551
|
||
},
|
||
{
|
||
server_province: '江西',
|
||
ingress_bytes: 554687894551
|
||
},
|
||
{
|
||
server_province: '北京',
|
||
ingress_bytes: 504687894551
|
||
},
|
||
{
|
||
server_province: '海南',
|
||
ingress_bytes: 254687894551
|
||
},
|
||
{
|
||
server_province: '河南',
|
||
ingress_bytes: 154687894551
|
||
}
|
||
]
|
||
// 上一周期西安下行总流量
|
||
var prevXianIngressTraffic2 = [
|
||
{
|
||
server_province: '福建',
|
||
ingress_bytes: 654687894551
|
||
},
|
||
{
|
||
server_province: '江西',
|
||
ingress_bytes: 554687894551
|
||
},
|
||
{
|
||
server_province: '北京',
|
||
ingress_bytes: 504687894551
|
||
},
|
||
{
|
||
server_province: '海南',
|
||
ingress_bytes: 254687894551
|
||
},
|
||
{
|
||
server_province: '河南',
|
||
ingress_bytes: 154687894551
|
||
}
|
||
]
|
||
// 当前周期西安下行总流量
|
||
var xianIngressTraffic2 = [
|
||
{
|
||
server_province: '福建',
|
||
ingress_bytes: 654687894551
|
||
},
|
||
{
|
||
server_province: '江西',
|
||
ingress_bytes: 554687894551
|
||
},
|
||
{
|
||
server_province: '北京',
|
||
ingress_bytes: 504687894551
|
||
},
|
||
{
|
||
server_province: '海南',
|
||
ingress_bytes: 254687894551
|
||
},
|
||
{
|
||
server_province: '河南',
|
||
ingress_bytes: 154687894551
|
||
}
|
||
]
|
||
/** 数据 end */
|
||
|
||
|
||
/** 内置js begin */
|
||
/* 由于js的number精度最多到8PB-1，而实际流量达百PB级,
|
||
所以对于byte类型数据，在java(freemarker)中除以1024后再处理；时间、数量、百分比等其他类型不变。
|
||
*/
|
||
/*var chartColor = ['rgb(83,112,198)', 'rgb(144,204,166)', 'rgb(250,200,88)', 'rgb(238,102,102)',
|
||
'rgb(115,191,222)', 'rgb(59,161,114)', 'rgb(252,132,82)', 'rgb(233,124,204)',
|
||
'rgb(153,96,180)', 'rgb(254,166,158)', 'rgb(87,203,172)', 'rgb(99,182,172)']*/
|
||
var chartColor = ['rgb(132,202,230)', 'rgb(88,176,209)', 'rgb(133,221,214)', 'rgb(245,184,136)',
|
||
'rgb(235,198,90)', 'rgb(237,157,138)', 'rgb(140,206,213)', 'rgb(174,214,222)',
|
||
'rgb(153,96,180)', 'rgb(254,166,158)', 'rgb(87,203,172)', 'rgb(99,182,172)']
|
||
var unitTypes = {
|
||
time: 'time',
|
||
number: 'number',
|
||
byte: 'byte',
|
||
bps: 'bps',
|
||
string: 'string',
|
||
percent: 'percent'
|
||
}
|
||
|
||
var numberUnit = ['', 'K', 'M', 'G', 'T', 'P', 'E']
|
||
var byteUnit = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB']
|
||
var bpsUnit = ['bps', 'Kbps', 'Mbps', 'Gbps', 'Tbps', 'Pbps', 'Ebps']
|
||
var timeUnit = [ // 时间单位步进倍数，以ms为基数
|
||
{ unit: 'ms', step: 1 },
|
||
{ unit: 's', step: 1000 },
|
||
{ unit: 'm', step: 60 },
|
||
{ unit: 'h', step: 60 },
|
||
{ unit: 'd', step: 24 }
|
||
]
|
||
function asciiCompute (num, offset = 0, ascii = 1000, units, dot = 2) {
|
||
if (!num && num !== 0 && num !== '0') {
|
||
return ['', '']
|
||
}
|
||
num = Number(num)
|
||
var carry = 0
|
||
if (num > 1) {
|
||
var log = Math.log(num) / Math.log(ascii)
|
||
carry = parseInt(log)
|
||
num = num / Math.pow(ascii, carry)
|
||
}
|
||
if (Number.isInteger(num)) {
|
||
return [num, units[carry + offset]]
|
||
} else {
|
||
return [num.toFixed(dot), units[carry + offset]]
|
||
}
|
||
}
|
||
function numberUnitConvert (value, sourceUnit = '', targetUnit, dot = 2) {
|
||
return asciiCompute(value, numberUnit.indexOf(sourceUnit), 1000, numberUnit, dot)
|
||
}
|
||
function byteUnitConvert (value, sourceUnit = 'B', targetUnit, dot = 2) {
|
||
return asciiCompute(value, byteUnit.indexOf(sourceUnit), 1024, byteUnit, dot)
|
||
}
|
||
function bpsUnitConvert (value, sourceUnit = 'bps', targetUnit, dot = 2) {
|
||
return asciiCompute(value, bpsUnit.indexOf(sourceUnit), 1000, bpsUnit, dot)
|
||
}
|
||
function timeUnitFormatter (time, sourceUnit = 'ms', targetUnit, dot = 2) {
|
||
if (time === '' || time instanceof Array || isNaN(time)) {
|
||
return [0, sourceUnit]
|
||
}
|
||
var sourceIndex = -1
|
||
var targetIndex = -1
|
||
timeUnit.forEach((t, i) => {
|
||
sourceUnit === t.unit && (sourceIndex = i)
|
||
targetUnit && targetUnit === t.unit && (targetIndex = i)
|
||
})
|
||
var multi = 1
|
||
var result = parseFloat(time)
|
||
if (targetIndex < 0) {
|
||
while (sourceIndex < timeUnit.length - 1 && result > timeUnit[sourceIndex + 1].step) {
|
||
sourceIndex++
|
||
multi = timeUnit[sourceIndex].step
|
||
result /= multi
|
||
}
|
||
return [multi === 1 ? result : result.toFixed(dot), timeUnit[sourceIndex].unit]
|
||
} else {
|
||
timeUnit.forEach((s, i) => {
|
||
if (i <= targetIndex) {
|
||
multi *= s.step
|
||
}
|
||
})
|
||
result /= multi
|
||
return [result.toFixed(dot), targetUnit]
|
||
}
|
||
}
|
||
function unitConvert (value, unitType, sourceUnit, targetUnit, dot = 2) {
|
||
if (unitType === unitTypes.string) {
|
||
if (value) {
|
||
if (typeof value === 'string') {
|
||
return [value, '']
|
||
} else {
|
||
return ['-', '']
|
||
}
|
||
} else {
|
||
return ['-', '']
|
||
}
|
||
}
|
||
if (!value && value !== 0) {
|
||
return ['-', '']
|
||
} else {
|
||
switch (unitType) {
|
||
case unitTypes.time: {
|
||
return timeUnitFormatter(value, sourceUnit, targetUnit, dot)
|
||
}
|
||
case unitTypes.percent: {
|
||
return [(Number(value) * 100).toFixed(dot), '%']
|
||
}
|
||
case unitTypes.number: {
|
||
return numberUnitConvert(value, sourceUnit, targetUnit, dot)
|
||
}
|
||
case unitTypes.byte: {
|
||
return byteUnitConvert(value, sourceUnit, targetUnit, dot)
|
||
}
|
||
case unitTypes.bps: {
|
||
return bpsUnitConvert(value, sourceUnit, targetUnit, dot)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
function getUnitType (column) {
|
||
if (column) {
|
||
switch (column.toLowerCase()) {
|
||
case 'time': {
|
||
return unitTypes.time
|
||
}
|
||
case 'bytes': {
|
||
return unitTypes.byte
|
||
}
|
||
case 'sessions':
|
||
default: {
|
||
return unitTypes.number
|
||
}
|
||
}
|
||
} else {
|
||
return unitTypes.number
|
||
}
|
||
}
|
||
function valueToRangeValue (value, unitType) {
|
||
var values = unitConvert(value, unitType)
|
||
if (values[0] || values[0] === 0) {
|
||
switch (unitType) {
|
||
case unitTypes.time: {
|
||
if (values[0] < 1) {
|
||
return ['<1', 'ms']
|
||
}
|
||
break
|
||
}
|
||
case unitTypes.percent: {
|
||
if (values[0] < 0.01) {
|
||
return ['<0.01', '%']
|
||
}
|
||
break
|
||
}
|
||
default: break
|
||
}
|
||
}
|
||
return values
|
||
}
|
||
// 十位数的时间戳
|
||
function timestampToStr (timestamp) {
|
||
var time = new Date(timestamp * 1000)
|
||
var year = time.getFullYear(),
|
||
month = time.getMonth() + 1 , //月份是从0开始的
|
||
day = time.getDate(),
|
||
hour = time.getHours(),
|
||
minute = time.getMinutes(),
|
||
second = time.getSeconds()
|
||
return year + '-' + add0(month) + '-' + add0(day) + ' ' + add0(hour) + ':' + add0(minute)
|
||
}
|
||
function add0 (m) {
|
||
return m < 10 ? '0' + m: m
|
||
}
|
||
function isWholeDay (_timeRange) {
|
||
var _timeRangeStrStart = timestampToStr(_timeRange[0])
|
||
var _timeOffset = _timeRange[1] - _timeRange[0]
|
||
return (_timeOffset === 86400 || _timeOffset === 86399) && _timeRangeStrStart.indexOf('00:00') > -1
|
||
}
|
||
/** 内置js end */
|
||
|
||
|
||
// 计算出前三个周期的时间戳范围
|
||
var timeOffset = timeRange[1] - timeRange[0]
|
||
var wholeTimeOffset = [60 * 60 - 1, 60 * 60 * 24 - 1, 60 * 60 * 24 * 7 - 1]
|
||
if (wholeTimeOffset.indexOf(timeOffset) > -1) {
|
||
timeOffset++
|
||
}
|
||
var prevTimeRange = [timeRange[0] - timeOffset, timeRange[1] - timeOffset]
|
||
var pprevTimeRange = [prevTimeRange[0] - timeOffset, prevTimeRange[1] - timeOffset]
|
||
var ppprevTimeRange = [pprevTimeRange[0] - timeOffset, pprevTimeRange[1] - timeOffset]
|
||
// 填充时间
|
||
function initTimeRange () {
|
||
var currentRange0 = document.getElementById('currentRange0')
|
||
var currentRange6 = document.getElementById('currentRange6')
|
||
var prevRange6 = document.getElementById('prevRange6')
|
||
var currentRangeStr = ''
|
||
var prevRangeStr = ''
|
||
if (isWholeDay(timeRange)) {
|
||
currentRangeStr = timestampToStr(timeRange[0]).substring(0, 10)
|
||
prevRangeStr = timestampToStr(prevTimeRange[0]).substring(0, 10)
|
||
} else {
|
||
currentRangeStr = timestampToStr(timeRange[0]) + ' -- ' + timestampToStr(timeRange[1])
|
||
prevRangeStr = timestampToStr(prevTimeRange[0]) + ' -- ' + timestampToStr(prevTimeRange[1])
|
||
}
|
||
currentRange0.innerText = currentRangeStr
|
||
currentRange6.innerText = currentRangeStr
|
||
prevRange6.innerText = prevRangeStr
|
||
}
|
||
|
||
var unit1 = 'Kbps'
|
||
function initEcharts1 () {
|
||
var myChart = echarts.init(document.getElementById('canvas1'))
|
||
var option = {
|
||
color: chartColor,
|
||
animation: false,
|
||
grid: {
|
||
left: 100,
|
||
right: 120,
|
||
bottom: 25,
|
||
top: 40
|
||
},
|
||
xAxis: {
|
||
type: 'time',
|
||
maxInterval: 3600000,
|
||
axisLabel: {
|
||
formatter: '{HH}:{mm}'
|
||
}
|
||
},
|
||
yAxis: {
|
||
splitLine: { show: false },
|
||
offset: 10,
|
||
axisLabel: {
|
||
formatter (params) {
|
||
return unitConvert(params, unitTypes.bps, unit1).join(' ')
|
||
}
|
||
}
|
||
},
|
||
visualMap: {
|
||
show: false,
|
||
pieces: [
|
||
{
|
||
gt: 0,
|
||
lte: quantile1.p50,
|
||
color: 'rgb(251,219,15)'
|
||
},
|
||
{
|
||
gt: quantile1.p50,
|
||
lte: quantile1.p90,
|
||
color: 'rgb(252,125,2)'
|
||
},
|
||
{
|
||
gt: quantile1.p90,
|
||
lte: quantile1.p99,
|
||
color: 'rgb(253,1,0)'
|
||
},
|
||
{
|
||
gt: quantile1.p99,
|
||
color: 'rgb(170,6,159)'
|
||
}
|
||
],
|
||
outOfRange: {
|
||
color: 'rgb(153,153,153)'
|
||
}
|
||
},
|
||
series: {
|
||
type: 'line',
|
||
symbol: 'none',
|
||
data: seriesData1,
|
||
markLine: {
|
||
silent: true,
|
||
lineStyle: {
|
||
color: 'rgb(153,153,153)'
|
||
},
|
||
symbol: 'none',
|
||
label: {
|
||
formatter (params) {
|
||
var arr = unitConvert(params.value, unitTypes.bps, unit1).join(' ')
|
||
var desc = ''
|
||
switch (params.dataIndex) {
|
||
case 0: {
|
||
desc = 'P50'
|
||
break
|
||
}
|
||
case 1: {
|
||
desc = 'P90'
|
||
break
|
||
}
|
||
case 2: {
|
||
desc = 'P99'
|
||
break
|
||
}
|
||
default: break
|
||
}
|
||
return arr + ' (' + desc + ')'
|
||
}
|
||
},
|
||
data: [
|
||
{
|
||
yAxis: quantile1.p50
|
||
},
|
||
{
|
||
yAxis: quantile1.p90
|
||
},
|
||
{
|
||
yAxis: quantile1.p99
|
||
}
|
||
]
|
||
}
|
||
}
|
||
}
|
||
myChart.setOption(option)
|
||
document.getElementById('imgCanvas1').src = myChart.getDataURL({pixelRatio: 1})
|
||
}
|
||
|
||
var topNTotalTraffic2 = 0
|
||
seriesData2.forEach(d => { topNTotalTraffic2 += d.value })
|
||
seriesData2.push(
|
||
{
|
||
name: 'Others',
|
||
value: totalTraffic1 - topNTotalTraffic2
|
||
}
|
||
)
|
||
function initEcharts2 () {
|
||
var myChart = echarts.init(document.getElementById('canvas2'))
|
||
var option = {
|
||
legend: {
|
||
show: false
|
||
},
|
||
color: chartColor,
|
||
animation: false,
|
||
series: [
|
||
{
|
||
type: 'pie',
|
||
radius: [60, 100],
|
||
data: seriesData2,
|
||
label: {
|
||
formatter: '{b} {d}%',
|
||
fontSize: 12
|
||
},
|
||
itemStyle: {
|
||
borderWidth: 1,
|
||
borderColor: 'white'
|
||
}
|
||
}
|
||
]
|
||
}
|
||
myChart.setOption(option)
|
||
}
|
||
|
||
var topNTotalTraffic3 = 0
|
||
seriesData3.forEach(d => { topNTotalTraffic3 += d.value })
|
||
seriesData3.push(
|
||
{
|
||
name: 'Others',
|
||
value: totalTraffic1 - topNTotalTraffic3
|
||
}
|
||
)
|
||
function initEcharts3 () {
|
||
var myChart = echarts.init(document.getElementById('canvas3'))
|
||
var option = {
|
||
legend: {
|
||
show: false
|
||
},
|
||
color: chartColor,
|
||
animation: false,
|
||
series: [
|
||
{
|
||
type: 'pie',
|
||
radius: [60, 100],
|
||
data: seriesData3,
|
||
label: {
|
||
formatter: '{b} {d}%',
|
||
fontSize: 12
|
||
},
|
||
itemStyle: {
|
||
borderWidth: 1,
|
||
borderColor: 'white'
|
||
}
|
||
}
|
||
]
|
||
}
|
||
myChart.setOption(option)
|
||
}
|
||
var seriesData4 = []
|
||
var linksData4 = []
|
||
data4.forEach(d => {
|
||
var hasEgress = seriesData4.some(d4 => d4.name === 'Egress-' + d.egress_link_direction)
|
||
var hasIngress = seriesData4.some(d4 => d4.name === 'Ingress-' + d.ingress_link_direction)
|
||
if (!hasEgress) {
|
||
seriesData4.push({ name: 'Egress-' + d.egress_link_direction })
|
||
}
|
||
if (!hasIngress) {
|
||
seriesData4.push({ name: 'Ingress-' + d.ingress_link_direction })
|
||
}
|
||
linksData4.push({
|
||
source: 'Egress-' + d.egress_link_direction,
|
||
target: 'Ingress-' + d.ingress_link_direction,
|
||
value: d.bytes
|
||
})
|
||
})
|
||
function initEcharts4 () {
|
||
var myChart = echarts.init(document.getElementById('canvas4'))
|
||
var option = {
|
||
animation: false,
|
||
series: [
|
||
{
|
||
type: 'sankey',
|
||
data: seriesData4,
|
||
links: linksData4,
|
||
top: 3,
|
||
bottom: 3,
|
||
right: 100,
|
||
left: 5,
|
||
label: {
|
||
position: 'right'
|
||
},
|
||
levels: [
|
||
{
|
||
depth: 0,
|
||
itemStyle: {
|
||
color: chartColor[0]
|
||
},
|
||
lineStyle: {
|
||
color: 'gradient'
|
||
}
|
||
}, {
|
||
depth: 1,
|
||
itemStyle: {
|
||
color: chartColor[3]
|
||
},
|
||
lineStyle: {
|
||
color: 'gradient'
|
||
}
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
myChart.setOption(option)
|
||
}
|
||
// 西宁下行
|
||
function initEcharts5 () {
|
||
var myChart = echarts.init(document.getElementById('canvas5'))
|
||
var option = {
|
||
animation: false,
|
||
grid: {
|
||
top: 30,
|
||
bottom: 35,
|
||
right: 20,
|
||
left: 70
|
||
},
|
||
color: ['rgb(115,191,222)'],
|
||
xAxis: {
|
||
type: 'category',
|
||
data: xiningIngressTop5AppTraffic.map(d => d.app_label),
|
||
axisLabel: {
|
||
interval: 0,
|
||
rotate: 20,
|
||
fontSize: 12
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter (value) {
|
||
return unitConvert(value, unitTypes.percent).join('')
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
data: xiningIngressTop5AppTraffic.map(d => d.ingress_bytes / totalIngressTraffic.find(t => t.ingress_link_direction === '西宁').ingress_bytes),
|
||
type: 'bar',
|
||
barWidth: 28
|
||
}
|
||
]
|
||
}
|
||
myChart.setOption(option)
|
||
}
|
||
// 太原下行
|
||
function initEcharts6 () {
|
||
var myChart = echarts.init(document.getElementById('canvas6'))
|
||
var option = {
|
||
animation: false,
|
||
grid: {
|
||
top: 30,
|
||
bottom: 35,
|
||
right: 20,
|
||
left: 70
|
||
},
|
||
color: ['rgb(115,191,222)'],
|
||
xAxis: {
|
||
type: 'category',
|
||
data: taiyuanIngressTop5AppTraffic.map(d => d.app_label),
|
||
axisLabel: {
|
||
interval: 0,
|
||
rotate: 20,
|
||
fontSize: 12
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter (value) {
|
||
return unitConvert(value, unitTypes.percent).join('')
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
data: taiyuanIngressTop5AppTraffic.map(d => d.ingress_bytes / totalIngressTraffic.find(t => t.ingress_link_direction === '太原').ingress_bytes),
|
||
type: 'bar',
|
||
barWidth: 28
|
||
}
|
||
]
|
||
}
|
||
myChart.setOption(option)
|
||
}
|
||
// 西安下行
|
||
function initEcharts7 () {
|
||
var myChart = echarts.init(document.getElementById('canvas7'))
|
||
var option = {
|
||
animation: false,
|
||
grid: {
|
||
top: 30,
|
||
bottom: 35,
|
||
right: 20,
|
||
left: 70
|
||
},
|
||
color: ['rgb(115,191,222)'],
|
||
xAxis: {
|
||
type: 'category',
|
||
data: xianIngressTop5AppTraffic.map(d => d.app_label),
|
||
axisLabel: {
|
||
interval: 0,
|
||
rotate: 20,
|
||
fontSize: 12
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter (value) {
|
||
return unitConvert(value, unitTypes.percent).join('')
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
data: xianIngressTop5AppTraffic.map(d => d.ingress_bytes / totalIngressTraffic.find(t => t.ingress_link_direction === '西安').ingress_bytes),
|
||
type: 'bar',
|
||
barWidth: 28
|
||
}
|
||
]
|
||
}
|
||
myChart.setOption(option)
|
||
}
|
||
// 西宁上行
|
||
function initEcharts8 () {
|
||
var myChart = echarts.init(document.getElementById('canvas8'))
|
||
var option = {
|
||
animation: false,
|
||
grid: {
|
||
top: 30,
|
||
bottom: 35,
|
||
right: 20,
|
||
left: 70
|
||
},
|
||
color: ['rgb(115,191,222)'],
|
||
xAxis: {
|
||
type: 'category',
|
||
data: xiningEgressTop5AppTraffic.map(d => d.app_label),
|
||
axisLabel: {
|
||
interval: 0,
|
||
rotate: 20,
|
||
fontSize: 12
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter (value) {
|
||
return unitConvert(value, unitTypes.percent).join('')
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
data: xiningEgressTop5AppTraffic.map(d => d.egress_bytes / totalEgressTraffic.find(t => t.egress_link_direction === '西宁').egress_bytes),
|
||
type: 'bar',
|
||
barWidth: 28
|
||
}
|
||
]
|
||
}
|
||
myChart.setOption(option)
|
||
}
|
||
// 太原上行
|
||
function initEcharts9 () {
|
||
var myChart = echarts.init(document.getElementById('canvas9'))
|
||
var option = {
|
||
animation: false,
|
||
color: ['rgb(115,191,222)'],
|
||
grid: {
|
||
top: 30,
|
||
bottom: 35,
|
||
right: 20,
|
||
left: 70
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: taiyuanEgressTop5AppTraffic.map(d => d.app_label),
|
||
axisLabel: {
|
||
interval: 0,
|
||
rotate: 20,
|
||
fontSize: 12
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter (value) {
|
||
return unitConvert(value, unitTypes.percent).join('')
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
data: taiyuanEgressTop5AppTraffic.map(d => d.egress_bytes / totalEgressTraffic.find(t => t.egress_link_direction === '太原').egress_bytes),
|
||
type: 'bar',
|
||
barWidth: 28
|
||
}
|
||
]
|
||
}
|
||
myChart.setOption(option)
|
||
}
|
||
// 西安上行
|
||
function initEcharts10 () {
|
||
var myChart = echarts.init(document.getElementById('canvas10'))
|
||
var option = {
|
||
animation: false,
|
||
color: ['rgb(115,191,222)'],
|
||
grid: {
|
||
top: 30,
|
||
bottom: 35,
|
||
right: 20,
|
||
left: 70
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: xianEgressTop5AppTraffic.map(d => d.app_label),
|
||
axisLabel: {
|
||
interval: 0,
|
||
rotate: 20,
|
||
fontSize: 12
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter (value) {
|
||
return unitConvert(value, unitTypes.percent).join('')
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
data: xianEgressTop5AppTraffic.map(d => d.egress_bytes / totalEgressTraffic.find(t => t.egress_link_direction === '西安').egress_bytes),
|
||
type: 'bar',
|
||
barWidth: 28
|
||
}
|
||
]
|
||
}
|
||
myChart.setOption(option)
|
||
}
|
||
// 西宁下行
|
||
function initEcharts11 () {
|
||
var myChart = echarts.init(document.getElementById('canvas11'))
|
||
var option = {
|
||
animation: false,
|
||
color: [chartColor[1], chartColor[6]],
|
||
grid: {
|
||
top: 30,
|
||
bottom: 35,
|
||
right: 20,
|
||
left: 70
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: xiningIngressTraffic2.map(d => d.server_province),
|
||
axisLabel: {
|
||
interval: 0,
|
||
rotate: 20,
|
||
fontSize: 12
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter (value) {
|
||
return unitConvert(value, unitTypes.percent).join('')
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
data: xiningIngressTraffic2.map(d => d.ingress_bytes / totalIngressTraffic2.find(t => t.ingress_link_direction === '西宁').ingress_bytes),
|
||
type: 'bar',
|
||
barWidth: 14
|
||
},
|
||
{
|
||
data: prevXiningIngressTraffic2.map(d => d.ingress_bytes / prevTotalIngressTraffic2.find(t => t.ingress_link_direction === '西宁').ingress_bytes),
|
||
type: 'bar',
|
||
barWidth: 14
|
||
}
|
||
]
|
||
}
|
||
myChart.setOption(option)
|
||
}
|
||
// 太原下行
|
||
function initEcharts12 () {
|
||
var myChart = echarts.init(document.getElementById('canvas12'))
|
||
var option = {
|
||
animation: false,
|
||
color: [chartColor[1], chartColor[6]],
|
||
grid: {
|
||
top: 30,
|
||
bottom: 35,
|
||
right: 20,
|
||
left: 70
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: taiyuanIngressTraffic2.map(d => d.server_province),
|
||
axisLabel: {
|
||
interval: 0,
|
||
rotate: 20,
|
||
fontSize: 12
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter (value) {
|
||
return unitConvert(value, unitTypes.percent).join('')
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
data: taiyuanIngressTraffic2.map(d => d.ingress_bytes / totalIngressTraffic2.find(t => t.ingress_link_direction === '太原').ingress_bytes),
|
||
type: 'bar',
|
||
barWidth: 14
|
||
},
|
||
{
|
||
data: prevTaiyuanIngressTraffic2.map(d => d.ingress_bytes / prevTotalIngressTraffic2.find(t => t.ingress_link_direction === '太原').ingress_bytes),
|
||
type: 'bar',
|
||
barWidth: 14
|
||
}
|
||
]
|
||
}
|
||
myChart.setOption(option)
|
||
}
|
||
// 西安下行
|
||
function initEcharts13 () {
|
||
var myChart = echarts.init(document.getElementById('canvas13'))
|
||
var option = {
|
||
animation: false,
|
||
color: [chartColor[1], chartColor[6]],
|
||
grid: {
|
||
top: 30,
|
||
bottom: 35,
|
||
right: 20,
|
||
left: 70
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: xianIngressTraffic2.map(d => d.server_province),
|
||
axisLabel: {
|
||
interval: 0,
|
||
rotate: 20,
|
||
fontSize: 12
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter (value) {
|
||
return unitConvert(value, unitTypes.percent).join('')
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
data: xianIngressTraffic2.map(d => d.ingress_bytes / totalIngressTraffic2.find(t => t.ingress_link_direction === '西安').ingress_bytes),
|
||
type: 'bar',
|
||
barWidth: 14
|
||
},
|
||
{
|
||
data: prevXianIngressTraffic2.map(d => d.ingress_bytes / prevTotalIngressTraffic2.find(t => t.ingress_link_direction === '西安').ingress_bytes),
|
||
type: 'bar',
|
||
barWidth: 14
|
||
}
|
||
]
|
||
}
|
||
myChart.setOption(option)
|
||
}
|
||
// 西宁上行
|
||
function initEcharts14 () {
|
||
var myChart = echarts.init(document.getElementById('canvas14'))
|
||
var option = {
|
||
animation: false,
|
||
color: [chartColor[1], chartColor[6]],
|
||
grid: {
|
||
top: 30,
|
||
bottom: 35,
|
||
right: 20,
|
||
left: 70
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: xiningEgressTraffic2.map(d => d.server_province),
|
||
axisLabel: {
|
||
interval: 0,
|
||
rotate: 20,
|
||
fontSize: 12
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter (value) {
|
||
return unitConvert(value, unitTypes.percent).join('')
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
data: xiningEgressTraffic2.map(d => d.egress_bytes / totalEgressTraffic2.find(t => t.egress_link_direction === '西宁').egress_bytes),
|
||
type: 'bar',
|
||
barWidth: 14
|
||
},
|
||
{
|
||
data: prevXiningEgressTraffic2.map(d => d.egress_bytes / prevTotalEgressTraffic2.find(t => t.egress_link_direction === '西宁').egress_bytes),
|
||
type: 'bar',
|
||
barWidth: 14
|
||
}
|
||
]
|
||
}
|
||
myChart.setOption(option)
|
||
}
|
||
// 太原上行
|
||
function initEcharts15 () {
|
||
var myChart = echarts.init(document.getElementById('canvas15'))
|
||
var option = {
|
||
animation: false,
|
||
color: [chartColor[1], chartColor[6]],
|
||
grid: {
|
||
top: 30,
|
||
bottom: 35,
|
||
right: 20,
|
||
left: 70
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: taiyuanEgressTraffic2.map(d => d.server_province),
|
||
axisLabel: {
|
||
interval: 0,
|
||
rotate: 20,
|
||
fontSize: 12
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter (value) {
|
||
return unitConvert(value, unitTypes.percent).join('')
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
data: taiyuanEgressTraffic2.map(d => d.egress_bytes / totalEgressTraffic2.find(t => t.egress_link_direction === '太原').egress_bytes),
|
||
type: 'bar',
|
||
barWidth: 14
|
||
},
|
||
{
|
||
data: prevTaiyuanEgressTraffic2.map(d => d.egress_bytes / prevTotalEgressTraffic2.find(t => t.egress_link_direction === '太原').egress_bytes),
|
||
type: 'bar',
|
||
barWidth: 14
|
||
}
|
||
]
|
||
}
|
||
myChart.setOption(option)
|
||
}
|
||
// 西宁上行
|
||
function initEcharts16 () {
|
||
var myChart = echarts.init(document.getElementById('canvas16'))
|
||
var option = {
|
||
animation: false,
|
||
color: [chartColor[1], chartColor[6]],
|
||
grid: {
|
||
top: 30,
|
||
bottom: 35,
|
||
right: 20,
|
||
left: 70
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: xianEgressTraffic2.map(d => d.server_province),
|
||
axisLabel: {
|
||
interval: 0,
|
||
rotate: 20,
|
||
fontSize: 12
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter (value) {
|
||
return unitConvert(value, unitTypes.percent).join('')
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
data: xianEgressTraffic2.map(d => d.egress_bytes / totalEgressTraffic2.find(t => t.egress_link_direction === '西安').egress_bytes),
|
||
type: 'bar',
|
||
barWidth: 14
|
||
},
|
||
{
|
||
data: prevXianEgressTraffic2.map(d => d.egress_bytes / prevTotalEgressTraffic2.find(t => t.egress_link_direction === '西安').egress_bytes),
|
||
type: 'bar',
|
||
barWidth: 14
|
||
}
|
||
]
|
||
}
|
||
myChart.setOption(option)
|
||
}
|
||
// APP流量情况折线图
|
||
var categoryData17 = overallAppTraffic.map(t => t.app_company)
|
||
var barSeriesData17 = overallAppTraffic.map(t => t.bytes)
|
||
var lineSeriesData17 = overallAppTraffic.map(t => {
|
||
var findData = prevOverallAppTraffic.find(pt => pt.app_company === t.app_company)
|
||
if (findData) {
|
||
return parseFloat(((t.bytes - findData.bytes) / parseFloat(findData.bytes) * 100).toFixed(2))
|
||
} else {
|
||
return 0
|
||
}
|
||
})
|
||
var copyLineSeriesData17 = [...lineSeriesData17]
|
||
copyLineSeriesData17.sort((a, b) => a - b)
|
||
var lineMin17 = copyLineSeriesData17[0]
|
||
var lineMax17 = copyLineSeriesData17[copyLineSeriesData17.length - 1]
|
||
function initEcharts17 () {
|
||
var myChart = echarts.init(document.getElementById('canvas17'))
|
||
var option = {
|
||
animation: false,
|
||
grid: {
|
||
top: 50,
|
||
bottom: 25,
|
||
right: 40,
|
||
left: 70
|
||
},
|
||
legend: {
|
||
show: true,
|
||
top: 'top',
|
||
left: 'left'
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: categoryData17,
|
||
axisLabel: {
|
||
interval: 0,
|
||
fontSize: 12
|
||
}
|
||
},
|
||
yAxis: [
|
||
{
|
||
name: '流量',
|
||
nameTextStyle: {
|
||
color: 'transparent'
|
||
},
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter (value) {
|
||
return unitConvert(value, unitTypes.byte).join('')
|
||
}
|
||
}
|
||
},
|
||
{
|
||
show: false,
|
||
name: '环比',
|
||
type: 'value',
|
||
min: lineMin17 - (lineMax17 - lineMin17),
|
||
max: lineMax17 + (lineMax17 - lineMin17)
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '流量',
|
||
data: barSeriesData17,
|
||
type: 'bar',
|
||
barWidth: 40,
|
||
label: {
|
||
show: true,
|
||
formatter: function (param) {
|
||
return unitConvert(param.value, unitTypes.byte).join('')
|
||
},
|
||
color: 'rgb(59,162,201)',
|
||
textBorderColor: 'white',
|
||
textBorderWidth: 3,
|
||
position: 'top'
|
||
},
|
||
itemStyle: {
|
||
color: 'rgb(59,162,201)'
|
||
}
|
||
},
|
||
{
|
||
yAxisIndex: 1,
|
||
name: '环比',
|
||
data: lineSeriesData17,
|
||
type: 'line',
|
||
label: {
|
||
show: true,
|
||
formatter: function (param) {
|
||
return param.value.toFixed(2) + '%'
|
||
},
|
||
textBorderColor: 'white',
|
||
textBorderWidth: 3,
|
||
color: 'rgb(99,182,172)'
|
||
},
|
||
lineStyle: {
|
||
type: 'dashed'
|
||
},
|
||
itemStyle: {
|
||
color: 'rgb(99,182,172)'
|
||
}
|
||
}
|
||
]
|
||
}
|
||
myChart.setOption(option)
|
||
}
|
||
|
||
initEcharts1()
|
||
initEcharts2()
|
||
initEcharts3()
|
||
initEcharts4()
|
||
initEcharts5()
|
||
initEcharts6()
|
||
initEcharts7()
|
||
initEcharts8()
|
||
initEcharts9()
|
||
initEcharts10()
|
||
initEcharts11()
|
||
initEcharts12()
|
||
initEcharts13()
|
||
initEcharts14()
|
||
initEcharts15()
|
||
initEcharts16()
|
||
initEcharts17()
|
||
initTimeRange()
|
||
</script>
|
||
|
||
</html>
|