temp: 临时示例
This commit is contained in:
chenjinsong
@@ -49,11 +49,11 @@ const routes = [
|
|||||||
{
|
{
|
||||||
path: '/chart',
|
path: '/chart',
|
||||||
component: () => import('@/views/settings/Chart')
|
component: () => import('@/views/settings/Chart')
|
||||||
}/* ,
|
},
|
||||||
{
|
{
|
||||||
path: '/temp',
|
path: '/temp',
|
||||||
component: () => import('@/views/Temp')
|
component: () => import('@/views/Temp')
|
||||||
} */
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|||||||
113
src/views/Temp.vue
Normal file
113
src/views/Temp.vue
Normal file
@@ -0,0 +1,113 @@
|
|||||||
|
<template>
|
||||||
|
<div style="overflow: auto;height: 100%;">
|
||||||
|
<div style="height: 8000px; overflow: auto; width: 100%; display: flex; flex-direction: column; align-content: center; background-color: white;">
|
||||||
|
<!-- <div style="padding-left: 30px; font-size: 18px; font-weight: bold; color: #666;">session/s</div>
|
||||||
|
<div id="lineCanvas1" style="margin-bottom: 100px; height: 500px; width: 100%;"></div>
|
||||||
|
<div style="padding-left: 30px; font-size: 18px; font-weight: bold; color: #666;">bytes</div>
|
||||||
|
<div id="lineCanvas2" style="margin-bottom: 100px; height: 500px; width: 100%;"></div>
|
||||||
|
<div style="padding-left: 30px; font-size: 18px; font-weight: bold; color: #666;">rate</div>
|
||||||
|
<div id="lineCanvas3" style="margin-bottom: 100px; height: 500px; width: 100%;"></div>
|
||||||
|
<div style="padding-left: 30px; font-size: 18px; font-weight: bold; color: #666;">行程卡流量数据 rate</div>
|
||||||
|
<div id="lineCanvas6" style="margin-bottom: 100px; height: 500px; width: 100%;"></div>-->
|
||||||
|
<div style="padding-left: 30px; font-size: 18px; font-weight: bold; color: #666;">流量变化曲线</div>
|
||||||
|
<div id="lineCanvas" style="margin-bottom: 100px; height: 500px; width: 100%;"></div>
|
||||||
|
<!-- <div style="padding-left: 30px; font-size: 18px; font-weight: bold; color: #666;">协议占比</div>
|
||||||
|
<div id="pieCanvas0" style="margin-bottom: 100px; height: 500px; width: 100%;"></div>
|
||||||
|
<div style="padding-left: 30px; font-size: 18px; font-weight: bold; color: #666;">APP占比</div>
|
||||||
|
<div id="pieCanvas1" style="margin-bottom: 100px; height: 500px; width: 100%;"></div>
|
||||||
|
<div style="padding-left: 30px; font-size: 18px; font-weight: bold; color: #666;">域名占比</div>
|
||||||
|
<div id="pieCanvas2" style="margin-bottom: 100px; height: 500px; width: 100%;"></div>
|
||||||
|
<div style="padding-left: 30px; font-size: 18px; font-weight: bold; color: #666;">IP占比</div>
|
||||||
|
<div id="pieCanvas3" style="margin-bottom: 100px; height: 500px; width: 100%;"></div>
|
||||||
|
<div style="padding-left: 30px; font-size: 18px; font-weight: bold; color: #666;">出占比</div>
|
||||||
|
<div id="pieCanvas4" style="margin-bottom: 100px; height: 500px; width: 100%;"></div>
|
||||||
|
<div style="padding-left: 30px; font-size: 18px; font-weight: bold; color: #666;">入占比</div>
|
||||||
|
<div id="pieCanvas5" style="margin-bottom: 100px; height: 500px; width: 100%;"></div>-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { lineData, lineOption } from './testData'
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
import { getMillisecond } from '@/utils/date-util'
|
||||||
|
import unitConvert from '@/utils/unit-convert'
|
||||||
|
import { unitTypes } from '@/utils/constants'
|
||||||
|
export default {
|
||||||
|
name: 'Temp',
|
||||||
|
methods: {
|
||||||
|
/*initLine (lineData, index) {
|
||||||
|
const data = lineData.map(d => {
|
||||||
|
return [getMillisecond(new Date(d[0]).getTime()), d[index]]
|
||||||
|
})
|
||||||
|
const option = this.$_.cloneDeep(lineOption2)
|
||||||
|
option.series.data = data
|
||||||
|
if (index === 1) {
|
||||||
|
option.yAxis.axisLabel.formatter = function (params) {
|
||||||
|
return unitConvert(params, unitTypes.number).join(' ')
|
||||||
|
}
|
||||||
|
} else if (index === 2) {
|
||||||
|
option.yAxis.axisLabel.formatter = function (params) {
|
||||||
|
return unitConvert(params, unitTypes.byte).join(' ')
|
||||||
|
}
|
||||||
|
} else if (index === 3) {
|
||||||
|
option.yAxis.axisLabel.formatter = function (params) {
|
||||||
|
const arr = unitConvert(params, unitTypes.byte).join(' ')
|
||||||
|
return arr.replace(/B/g, 'bps')
|
||||||
|
}
|
||||||
|
} else if (index === 6) {
|
||||||
|
option.yAxis.axisLabel.formatter = function (params) {
|
||||||
|
const arr = unitConvert(params, unitTypes.byte).join(' ')
|
||||||
|
return arr.replace(/B/g, 'Mbps')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const dom = document.getElementById(`lineCanvas${index}`)
|
||||||
|
const lineChart = echarts.init(dom)
|
||||||
|
this.$nextTick(() => {
|
||||||
|
lineChart.setOption(option)
|
||||||
|
})
|
||||||
|
},*/
|
||||||
|
initLineChart () {
|
||||||
|
// 数据转为需要的格式：[[timestamp, value]]
|
||||||
|
const data = lineData.map(d => {
|
||||||
|
return [getMillisecond(new Date(d[2]).getTime()), d[1]]
|
||||||
|
})
|
||||||
|
const option = this.$_.cloneDeep(lineOption)
|
||||||
|
option.series.data = data
|
||||||
|
const dom = document.getElementById('lineCanvas')
|
||||||
|
const lineChart = echarts.init(dom)
|
||||||
|
this.$nextTick(() => {
|
||||||
|
lineChart.setOption(option)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/* initPie (index) {
|
||||||
|
const data = pieData[index].map(p => {
|
||||||
|
return {
|
||||||
|
value: parseFloat(p[1].replace('%', '')).toFixed(2),
|
||||||
|
name: p[0]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const option = this.$_.cloneDeep(pieOption)
|
||||||
|
option.series[0].data = data
|
||||||
|
const dom = document.getElementById(`pieCanvas${index}`)
|
||||||
|
const pieChart = echarts.init(dom)
|
||||||
|
this.$nextTick(() => {
|
||||||
|
pieChart.setOption(option)
|
||||||
|
})
|
||||||
|
} */
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
/*this.initLine(lineData2, 1)
|
||||||
|
this.initLine(lineData2, 2)
|
||||||
|
this.initLine(lineData2, 3)
|
||||||
|
this.initLine(lineData3, 6)*/
|
||||||
|
this.initLineChart()
|
||||||
|
/* this.initPie(0)
|
||||||
|
this.initPie(1)
|
||||||
|
this.initPie(2)
|
||||||
|
this.initPie(3)
|
||||||
|
this.initPie(4)
|
||||||
|
this.initPie(5) */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
515
src/views/testData.js
Normal file
515
src/views/testData.js
Normal file
@@ -0,0 +1,515 @@
|
|||||||
|
import unitConvert from '@/utils/unit-convert'
|
||||||
|
import { unitTypes } from '@/utils/constants'
|
||||||
|
const chartColor = ['#5370C6', '#90CC74', '#FAC858', '#EE6666',
|
||||||
|
'#73BFDE', '#3BA172', '#FC8452', '#E97CCC',
|
||||||
|
'#9960B4', '#FEA69E', '#57CBAC', '#63B6AC']
|
||||||
|
export const lineData = [
|
||||||
|
[28969982733514,772532872894,"2022-03-04 00:00:00"],
|
||||||
|
[27655234991362,737472933103,"2022-03-04 00:05:00"],
|
||||||
|
[26925138516067,718003693762,"2022-03-04 00:10:00"],
|
||||||
|
[29522842016923,787275787118,"2022-03-04 00:15:00"],
|
||||||
|
[25315943945800,675091838555,"2022-03-04 00:20:00"],
|
||||||
|
[24971549517943,665907987145,"2022-03-04 00:25:00"],
|
||||||
|
[24899825440652,663995345084,"2022-03-04 00:30:00"],
|
||||||
|
[25247379305464,673263448146,"2022-03-04 00:35:00"],
|
||||||
|
[23363417530377,623024467477,"2022-03-04 00:40:00"],
|
||||||
|
[22781937328826,607518328769,"2022-03-04 00:45:00"],
|
||||||
|
[22334875960906,595596692291,"2022-03-04 00:50:00"],
|
||||||
|
[21625712171831,576685657915,"2022-03-04 00:55:00"],
|
||||||
|
[21117202081518,563125388840,"2022-03-04 01:00:00"],
|
||||||
|
[20123617702070,536629805389,"2022-03-04 01:05:00"],
|
||||||
|
[19202419248804,512064513301,"2022-03-04 01:10:00"],
|
||||||
|
[18754213565825,500112361755,"2022-03-04 01:15:00"],
|
||||||
|
[18124255840306,483313489075,"2022-03-04 01:20:00"],
|
||||||
|
[19837519272799,529000513941,"2022-03-04 01:25:00"],
|
||||||
|
[16301475125024,434706003334,"2022-03-04 01:30:00"],
|
||||||
|
[15762406250887,420330833357,"2022-03-04 01:35:00"],
|
||||||
|
[15458290240500,412221073080,"2022-03-04 01:40:00"],
|
||||||
|
[14309311385826,381581636955,"2022-03-04 01:45:00"],
|
||||||
|
[13814278959849,368380772263,"2022-03-04 01:50:00"],
|
||||||
|
[13335451883308,355612050222,"2022-03-04 01:55:00"],
|
||||||
|
[12995486528765,346546307434,"2022-03-04 02:00:00"],
|
||||||
|
[13166511401387,351106970704,"2022-03-04 02:05:00"],
|
||||||
|
[11490091356144,306402436164,"2022-03-04 02:10:00"],
|
||||||
|
[11533102061117,307549388296,"2022-03-04 02:15:00"],
|
||||||
|
[10871792048158,289914454618,"2022-03-04 02:20:00"],
|
||||||
|
[10121791046211,269914427899,"2022-03-04 02:25:00"],
|
||||||
|
[9967875245668,265810006551,"2022-03-04 02:30:00"],
|
||||||
|
[12210204288490,325605447693,"2022-03-04 02:35:00"],
|
||||||
|
[8575864848104,228689729283,"2022-03-04 02:40:00"],
|
||||||
|
[8301752853884,221380076104,"2022-03-04 02:45:00"],
|
||||||
|
[8050811819445,214688315185,"2022-03-04 02:50:00"],
|
||||||
|
[7778642815575,207430475082,"2022-03-04 02:55:00"],
|
||||||
|
[8569941208437,228531765558,"2022-03-04 03:00:00"],
|
||||||
|
[8198759570750,218633588553,"2022-03-04 03:05:00"],
|
||||||
|
[6656628393357,177510090490,"2022-03-04 03:10:00"],
|
||||||
|
[6454278312443,172114088332,"2022-03-04 03:15:00"],
|
||||||
|
[6284559794438,167588261185,"2022-03-04 03:20:00"],
|
||||||
|
[6019610840169,160522955738,"2022-03-04 03:25:00"],
|
||||||
|
[5948136061943,158616961652,"2022-03-04 03:30:00"],
|
||||||
|
[5902670520287,157404547208,"2022-03-04 03:35:00"],
|
||||||
|
[5504265610957,146780416292,"2022-03-04 03:40:00"],
|
||||||
|
[5356920067248,142851201793,"2022-03-04 03:45:00"],
|
||||||
|
[5395947893404,143891943824,"2022-03-04 03:50:00"],
|
||||||
|
[5431225782305,144832687528,"2022-03-04 03:55:00"],
|
||||||
|
[5060360621581,134942949909,"2022-03-04 04:00:00"],
|
||||||
|
[4734877060777,126263388287,"2022-03-04 04:05:00"],
|
||||||
|
[4896120032211,130563200859,"2022-03-04 04:10:00"],
|
||||||
|
[4656914516166,124184387098,"2022-03-04 04:15:00"],
|
||||||
|
[4370447723752,116545272633,"2022-03-04 04:20:00"],
|
||||||
|
[4552708884362,121405570250,"2022-03-04 04:25:00"],
|
||||||
|
[4296041295231,114561101206,"2022-03-04 04:30:00"],
|
||||||
|
[4142572107934,110468589545,"2022-03-04 04:35:00"],
|
||||||
|
[4241430444184,113104811845,"2022-03-04 04:40:00"],
|
||||||
|
[4224243392620,112646490470,"2022-03-04 04:45:00"],
|
||||||
|
[4198266946467,111953785239,"2022-03-04 04:50:00"],
|
||||||
|
[3858300702268,102888018727,"2022-03-04 04:55:00"],
|
||||||
|
[3854869214167,102796512378,"2022-03-04 05:00:00"],
|
||||||
|
[3789374874342,101049996649,"2022-03-04 05:05:00"],
|
||||||
|
[3610647812809,96283941675,"2022-03-04 05:10:00"],
|
||||||
|
[3581341904272,95502450781,"2022-03-04 05:15:00"],
|
||||||
|
[3419585709043,91188952241,"2022-03-04 05:20:00"],
|
||||||
|
[3439507132019,91720190187,"2022-03-04 05:25:00"],
|
||||||
|
[3511079821680,93628795245,"2022-03-04 05:30:00"],
|
||||||
|
[3240669123023,86417843281,"2022-03-04 05:35:00"],
|
||||||
|
[3231235979808,86166292795,"2022-03-04 05:40:00"],
|
||||||
|
[3149380897927,83983490611,"2022-03-04 05:45:00"],
|
||||||
|
[3292441899857,87798450663,"2022-03-04 05:50:00"],
|
||||||
|
[3324837434174,88662331578,"2022-03-04 05:55:00"],
|
||||||
|
[3267947498799,87145266635,"2022-03-04 06:00:00"],
|
||||||
|
[3294621183448,87856564892,"2022-03-04 06:05:00"],
|
||||||
|
[3445680106467,91884802839,"2022-03-04 06:10:00"],
|
||||||
|
[3390821619902,90421909864,"2022-03-04 06:15:00"],
|
||||||
|
[3398196120285,90618563208,"2022-03-04 06:20:00"],
|
||||||
|
[3304281747967,88114179946,"2022-03-04 06:25:00"],
|
||||||
|
[3302100743607,88056019830,"2022-03-04 06:30:00"],
|
||||||
|
[3358226493011,89552706480,"2022-03-04 06:35:00"],
|
||||||
|
[3556776773250,94847380620,"2022-03-04 06:40:00"],
|
||||||
|
[3476802054030,92714721441,"2022-03-04 06:45:00"],
|
||||||
|
[3406187475416,90831666011,"2022-03-04 06:50:00"],
|
||||||
|
[4416938530654,117785027484,"2022-03-04 06:55:00"],
|
||||||
|
[3594270288815,95847207702,"2022-03-04 07:00:00"],
|
||||||
|
[3626775377470,96714010066,"2022-03-04 07:05:00"],
|
||||||
|
[3565999784799,95093327595,"2022-03-04 07:10:00"],
|
||||||
|
[3959810819463,105594955186,"2022-03-04 07:15:00"],
|
||||||
|
[3986304658215,106301457552,"2022-03-04 07:20:00"],
|
||||||
|
[4201272551124,112033934697,"2022-03-04 07:25:00"],
|
||||||
|
[4159651840527,110924049081,"2022-03-04 07:30:00"],
|
||||||
|
[4388957660565,117038870948,"2022-03-04 07:35:00"],
|
||||||
|
[4585723812812,122285968342,"2022-03-04 07:40:00"],
|
||||||
|
[4845957647361,129225537263,"2022-03-04 07:45:00"],
|
||||||
|
[5073862803258,135303008087,"2022-03-04 07:50:00"],
|
||||||
|
[5423185300814,144618274688,"2022-03-04 07:55:00"],
|
||||||
|
[6007173373329,160191289955,"2022-03-04 08:00:00"],
|
||||||
|
[6555173772201,174804633925,"2022-03-04 08:05:00"],
|
||||||
|
[6351412507869,169371000210,"2022-03-04 08:10:00"],
|
||||||
|
[6945767585118,185220468936,"2022-03-04 08:15:00"],
|
||||||
|
[7073454395363,188625450543,"2022-03-04 08:20:00"],
|
||||||
|
[7620059685888,203201591624,"2022-03-04 08:25:00"],
|
||||||
|
[8618131474251,229816839313,"2022-03-04 08:30:00"],
|
||||||
|
[8190582889750,218415543727,"2022-03-04 08:35:00"],
|
||||||
|
[8516248200631,227099952017,"2022-03-04 08:40:00"],
|
||||||
|
[8847870579615,235943215456,"2022-03-04 08:45:00"],
|
||||||
|
[9291696664567,247778577722,"2022-03-04 08:50:00"],
|
||||||
|
[9813479864123,261692796377,"2022-03-04 08:55:00"],
|
||||||
|
[10166374951215,271103332032,"2022-03-04 09:00:00"],
|
||||||
|
[10566660997360,281777626596,"2022-03-04 09:05:00"],
|
||||||
|
[11198613029954,298629680799,"2022-03-04 09:10:00"],
|
||||||
|
[11027698150233,294071950673,"2022-03-04 09:15:00"],
|
||||||
|
[11534686635398,307591643611,"2022-03-04 09:20:00"],
|
||||||
|
[11778600764516,314096020387,"2022-03-04 09:25:00"],
|
||||||
|
[12104533073099,322787548616,"2022-03-04 09:30:00"],
|
||||||
|
[12244570656108,326521884163,"2022-03-04 09:35:00"],
|
||||||
|
[12615700396885,336418677250,"2022-03-04 09:40:00"],
|
||||||
|
[12964143713872,345710499037,"2022-03-04 09:45:00"],
|
||||||
|
[13016114473998,347096385973,"2022-03-04 09:50:00"],
|
||||||
|
[13252632094282,353403522514,"2022-03-04 09:55:00"],
|
||||||
|
[13805416715607,368144445750,"2022-03-04 10:00:00"],
|
||||||
|
[13934744922725,371593197939,"2022-03-04 10:05:00"],
|
||||||
|
[14127016542407,376720441131,"2022-03-04 10:10:00"],
|
||||||
|
[14434554026516,384921440707,"2022-03-04 10:15:00"],
|
||||||
|
[14432110437071,384856278322,"2022-03-04 10:20:00"],
|
||||||
|
[14649574536632,390655320977,"2022-03-04 10:25:00"],
|
||||||
|
[14768680014249,393831467047,"2022-03-04 10:30:00"],
|
||||||
|
[14910852414432,397622731052,"2022-03-04 10:35:00"],
|
||||||
|
[15294731712930,407859512345,"2022-03-04 10:40:00"],
|
||||||
|
[15354741150417,409459764011,"2022-03-04 10:45:00"],
|
||||||
|
[15372120739418,409923219718,"2022-03-04 10:50:00"],
|
||||||
|
[15652062314015,417388328374,"2022-03-04 10:55:00"],
|
||||||
|
[15790550169279,421081337847,"2022-03-04 11:00:00"],
|
||||||
|
[15974814432383,425995051530,"2022-03-04 11:05:00"],
|
||||||
|
[18106420031673,482837867511,"2022-03-04 11:10:00"],
|
||||||
|
[15964304282474,425714780866,"2022-03-04 11:15:00"],
|
||||||
|
[15866249649602,423099990656,"2022-03-04 11:20:00"],
|
||||||
|
[16138677050405,430364721344,"2022-03-04 11:25:00"],
|
||||||
|
[16372432990421,436598213078,"2022-03-04 11:30:00"],
|
||||||
|
[16533202568615,440885401830,"2022-03-04 11:35:00"],
|
||||||
|
[17045752272964,454553393946,"2022-03-04 11:40:00"],
|
||||||
|
[16981335555512,452835614814,"2022-03-04 11:45:00"],
|
||||||
|
[17118154627460,456484123399,"2022-03-04 11:50:00"],
|
||||||
|
[17148391455384,457290438810,"2022-03-04 11:55:00"],
|
||||||
|
[17470154502790,465870786741,"2022-03-04 12:00:00"],
|
||||||
|
[17568308659292,468488230914,"2022-03-04 12:05:00"],
|
||||||
|
[17773841618441,473969109825,"2022-03-04 12:10:00"],
|
||||||
|
[17781079987430,474162132998,"2022-03-04 12:15:00"],
|
||||||
|
[17990021005772,479733893487,"2022-03-04 12:20:00"],
|
||||||
|
[18384547822059,490254608588,"2022-03-04 12:25:00"],
|
||||||
|
[18460819489936,492288519732,"2022-03-04 12:30:00"],
|
||||||
|
[18490806709057,493088178908,"2022-03-04 12:35:00"],
|
||||||
|
[18412730482192,491006146192,"2022-03-04 12:40:00"],
|
||||||
|
[18553258883770,494753570234,"2022-03-04 12:45:00"],
|
||||||
|
[18669863379552,497863023455,"2022-03-04 12:50:00"],
|
||||||
|
[19963735697348,532366285263,"2022-03-04 12:55:00"],
|
||||||
|
[18376553533228,490041427553,"2022-03-04 13:00:00"],
|
||||||
|
[18558850510486,494902680280,"2022-03-04 13:05:00"],
|
||||||
|
[18679720275525,498125874014,"2022-03-04 13:10:00"],
|
||||||
|
[18950990373556,505359743295,"2022-03-04 13:15:00"],
|
||||||
|
[18912683201075,504338218695,"2022-03-04 13:20:00"],
|
||||||
|
[18953166427540,505417771401,"2022-03-04 13:25:00"],
|
||||||
|
[19088811649287,509034977314,"2022-03-04 13:30:00"],
|
||||||
|
[19195979674584,511892791322,"2022-03-04 13:35:00"],
|
||||||
|
[19353757750157,516100206671,"2022-03-04 13:40:00"],
|
||||||
|
[19623023814087,523280635042,"2022-03-04 13:45:00"],
|
||||||
|
[20006183846599,533498235909,"2022-03-04 13:50:00"],
|
||||||
|
[20129862506855,536796333516,"2022-03-04 13:55:00"],
|
||||||
|
[20690589312453,551749048332,"2022-03-04 14:00:00"],
|
||||||
|
[20817415642015,555131083787,"2022-03-04 14:05:00"],
|
||||||
|
[21227766113590,566073763029,"2022-03-04 14:10:00"],
|
||||||
|
[21468895104362,572503869450,"2022-03-04 14:15:00"],
|
||||||
|
[21814949310487,581731981613,"2022-03-04 14:20:00"],
|
||||||
|
[22049560972841,587988292609,"2022-03-04 14:25:00"],
|
||||||
|
[22520902322071,600557395255,"2022-03-04 14:30:00"],
|
||||||
|
[22717789840723,605807729086,"2022-03-04 14:35:00"],
|
||||||
|
[25977481697643,692732845270,"2022-03-04 14:40:00"],
|
||||||
|
[21169021431468,564507238172,"2022-03-04 14:45:00"],
|
||||||
|
[21185682154079,564951524109,"2022-03-04 14:50:00"],
|
||||||
|
[21213274986598,565687332976,"2022-03-04 14:55:00"],
|
||||||
|
[22852488297521,609399687934,"2022-03-04 15:00:00"],
|
||||||
|
[20180887262764,538156993674,"2022-03-04 15:05:00"],
|
||||||
|
[20262326460868,540328705623,"2022-03-04 15:10:00"],
|
||||||
|
[19957329914253,532195464380,"2022-03-04 15:15:00"],
|
||||||
|
[19540290479846,521074412796,"2022-03-04 15:20:00"],
|
||||||
|
[19381049642638,516827990470,"2022-03-04 15:25:00"],
|
||||||
|
[19371501072878,516573361943,"2022-03-04 15:30:00"],
|
||||||
|
[19195290832621,511874422203,"2022-03-04 15:35:00"],
|
||||||
|
[19074211930206,508645651472,"2022-03-04 15:40:00"],
|
||||||
|
[18985114573233,506269721953,"2022-03-04 15:45:00"],
|
||||||
|
[18986918180614,506317818150,"2022-03-04 15:50:00"],
|
||||||
|
[18967837386524,505808996974,"2022-03-04 15:55:00"],
|
||||||
|
[18807707047729,501538854606,"2022-03-04 16:00:00"],
|
||||||
|
[19012905978812,507010826102,"2022-03-04 16:05:00"],
|
||||||
|
[20562508930526,548333571481,"2022-03-04 16:10:00"],
|
||||||
|
[18338426278704,489024700765,"2022-03-04 16:15:00"],
|
||||||
|
[18524673457921,493991292211,"2022-03-04 16:20:00"],
|
||||||
|
[18839461266122,502385633763,"2022-03-04 16:25:00"],
|
||||||
|
[18840101405285,502402704141,"2022-03-04 16:30:00"],
|
||||||
|
[18834745820616,502259888550,"2022-03-04 16:35:00"],
|
||||||
|
[19498057758493,519948206893,"2022-03-04 16:40:00"],
|
||||||
|
[18983988305868,506239688156,"2022-03-04 16:45:00"],
|
||||||
|
[20375548066233,543347948433,"2022-03-04 16:50:00"],
|
||||||
|
[18694198464973,498511959066,"2022-03-04 16:55:00"],
|
||||||
|
[19224086887778,512642317007,"2022-03-04 17:00:00"],
|
||||||
|
[19234955299191,512932141312,"2022-03-04 17:05:00"],
|
||||||
|
[19241735704890,513112952130,"2022-03-04 17:10:00"],
|
||||||
|
[19689558526944,525054894052,"2022-03-04 17:15:00"],
|
||||||
|
[19512222588749,520325935700,"2022-03-04 17:20:00"],
|
||||||
|
[19771517781318,527240474168,"2022-03-04 17:25:00"],
|
||||||
|
[19635672658400,523617937557,"2022-03-04 17:30:00"],
|
||||||
|
[19851175792287,529364687794,"2022-03-04 17:35:00"],
|
||||||
|
[20084780673112,535594151283,"2022-03-04 17:40:00"],
|
||||||
|
[19971398581725,532570628846,"2022-03-04 17:45:00"],
|
||||||
|
[19857295439822,529527878395,"2022-03-04 17:50:00"],
|
||||||
|
[19872338682121,529929031523,"2022-03-04 17:55:00"],
|
||||||
|
[19796261122491,527900296600,"2022-03-04 18:00:00"],
|
||||||
|
[19782809702179,527541592058,"2022-03-04 18:05:00"],
|
||||||
|
[19839234416622,529046251110,"2022-03-04 18:10:00"],
|
||||||
|
[20465886156507,545756964174,"2022-03-04 18:15:00"],
|
||||||
|
[20122679882572,536604796869,"2022-03-04 18:20:00"],
|
||||||
|
[20289864215593,541063045749,"2022-03-04 18:25:00"],
|
||||||
|
[20434921600336,544931242676,"2022-03-04 18:30:00"],
|
||||||
|
[20669436913095,551184984349,"2022-03-04 18:35:00"],
|
||||||
|
[20817112208239,555122992220,"2022-03-04 18:40:00"],
|
||||||
|
[21646842996895,577249146584,"2022-03-04 18:45:00"],
|
||||||
|
[21523247456176,573953265498,"2022-03-04 18:50:00"],
|
||||||
|
[21135907030527,563624187481,"2022-03-04 18:55:00"],
|
||||||
|
[21731228167496,579499417800,"2022-03-04 19:00:00"],
|
||||||
|
[21555331268992,574808833840,"2022-03-04 19:05:00"],
|
||||||
|
[21448235081778,571952935514,"2022-03-04 19:10:00"],
|
||||||
|
[21876037548520,583361001294,"2022-03-04 19:15:00"],
|
||||||
|
[21955699128376,585485310090,"2022-03-04 19:20:00"],
|
||||||
|
[22338536796271,595694314567,"2022-03-04 19:25:00"],
|
||||||
|
[22290878986561,594423439642,"2022-03-04 19:30:00"],
|
||||||
|
[22696524500427,605240653345,"2022-03-04 19:35:00"],
|
||||||
|
[22883190465854,610218412423,"2022-03-04 19:40:00"],
|
||||||
|
[22865109623699,609736256632,"2022-03-04 19:45:00"],
|
||||||
|
[23463713109730,625699016259,"2022-03-04 19:50:00"],
|
||||||
|
[23561285058428,628300934891,"2022-03-04 19:55:00"],
|
||||||
|
[23703339789957,632089061066,"2022-03-04 20:00:00"],
|
||||||
|
[24166899328339,644450648756,"2022-03-04 20:05:00"],
|
||||||
|
[24447031010328,651920826942,"2022-03-04 20:10:00"],
|
||||||
|
[24608672777197,656231274059,"2022-03-04 20:15:00"],
|
||||||
|
[25275462425767,674012331354,"2022-03-04 20:20:00"],
|
||||||
|
[25198372992317,671956613128,"2022-03-04 20:25:00"],
|
||||||
|
[25647780613614,683940816363,"2022-03-04 20:30:00"],
|
||||||
|
[25625250554055,683340014775,"2022-03-04 20:35:00"],
|
||||||
|
[25480742337277,679486462327,"2022-03-04 20:40:00"],
|
||||||
|
[25832082625742,688855536686,"2022-03-04 20:45:00"],
|
||||||
|
[26231695749025,699511886641,"2022-03-04 20:50:00"],
|
||||||
|
[26735506293998,712946834507,"2022-03-04 20:55:00"],
|
||||||
|
[27091127815174,722430075071,"2022-03-04 21:00:00"],
|
||||||
|
[27277891781922,727410447518,"2022-03-04 21:05:00"],
|
||||||
|
[27528934099470,734104909319,"2022-03-04 21:10:00"],
|
||||||
|
[28294252754307,754513406782,"2022-03-04 21:15:00"],
|
||||||
|
[28578676115585,762098029749,"2022-03-04 21:20:00"],
|
||||||
|
[28723861609291,765969642914,"2022-03-04 21:25:00"],
|
||||||
|
[28624746916514,763326584440,"2022-03-04 21:30:00"],
|
||||||
|
[29567967418560,788479131162,"2022-03-04 21:35:00"],
|
||||||
|
[29459425404208,785584677446,"2022-03-04 21:40:00"],
|
||||||
|
[29566556067019,788441495121,"2022-03-04 21:45:00"],
|
||||||
|
[30572964671261,815279057900,"2022-03-04 21:50:00"],
|
||||||
|
[30329564491753,808788386447,"2022-03-04 21:55:00"],
|
||||||
|
[31664399376903,844383983384,"2022-03-04 22:00:00"],
|
||||||
|
[31116443452479,829771825399,"2022-03-04 22:05:00"],
|
||||||
|
[31378469745516,836759193214,"2022-03-04 22:10:00"],
|
||||||
|
[31658679635004,844231456933,"2022-03-04 22:15:00"],
|
||||||
|
[31875840546222,850022414566,"2022-03-04 22:20:00"],
|
||||||
|
[32289185521687,861044947245,"2022-03-04 22:25:00"],
|
||||||
|
[32417837401154,864475664031,"2022-03-04 22:30:00"],
|
||||||
|
[32346688630505,862578363480,"2022-03-04 22:35:00"],
|
||||||
|
[33016598180193,880442618138,"2022-03-04 22:40:00"],
|
||||||
|
[33146008154865,883893550796,"2022-03-04 22:45:00"],
|
||||||
|
[33268634987419,887163599665,"2022-03-04 22:50:00"],
|
||||||
|
[33397396256547,890597233508,"2022-03-04 22:55:00"],
|
||||||
|
[33844643741649,902523833111,"2022-03-04 23:00:00"],
|
||||||
|
[33958156438588,905550838362,"2022-03-04 23:05:00"],
|
||||||
|
[33894723651827,903859297382,"2022-03-04 23:10:00"],
|
||||||
|
[38141959774630,1017118927323,"2022-03-04 23:15:00"],
|
||||||
|
[32317662070360,861804321876,"2022-03-04 23:20:00"],
|
||||||
|
[32413119587555,864349855668,"2022-03-04 23:25:00"],
|
||||||
|
[32548084168381,867948911157,"2022-03-04 23:30:00"],
|
||||||
|
[32156620281908,857509874184,"2022-03-04 23:35:00"],
|
||||||
|
[32214736023145,859059627284,"2022-03-04 23:40:00"],
|
||||||
|
[32164564599083,857721722642,"2022-03-04 23:45:00"],
|
||||||
|
[31727303531249,846061427500,"2022-03-04 23:50:00"],
|
||||||
|
[32145322359204,857208596245,"2022-03-04 23:55:00"]
|
||||||
|
]
|
||||||
|
export const lineData2 = []
|
||||||
|
export const lineData3 = []
|
||||||
|
export const lineOption = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis'
|
||||||
|
},
|
||||||
|
color: chartColor,
|
||||||
|
xAxis: {
|
||||||
|
type: 'time',
|
||||||
|
splitNumber: 12,
|
||||||
|
axisLabel: {
|
||||||
|
formatter: '{HH}:{mm}'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
splitLine: { show: false },
|
||||||
|
offset: 10,
|
||||||
|
axisLabel: {
|
||||||
|
formatter (params) {
|
||||||
|
const arr = unitConvert(params, unitTypes.byte).join(' ')
|
||||||
|
return arr.replace(/B/g, 'bps')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
visualMap: {
|
||||||
|
show: false,
|
||||||
|
pieces: [
|
||||||
|
{
|
||||||
|
gt: 0,
|
||||||
|
lte: 536130030141,
|
||||||
|
color: '#FBDB0F'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
gt: 536130030141,
|
||||||
|
lte: 844057710428,
|
||||||
|
color: '#FC7D02'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
gt: 844057710428,
|
||||||
|
lte: 969266744524,
|
||||||
|
color: '#FD0100'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
gt: 969266744524,
|
||||||
|
lte: 9840702500000,
|
||||||
|
color: '#AA069F'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
outOfRange: {
|
||||||
|
color: '#999'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: {
|
||||||
|
type: 'line',
|
||||||
|
symbol: 'none',
|
||||||
|
markLine: {
|
||||||
|
silent: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#999'
|
||||||
|
},
|
||||||
|
symbol: 'none',
|
||||||
|
label: {
|
||||||
|
formatter (params) {
|
||||||
|
const arr = unitConvert(params.value, unitTypes.byte).join(' ')
|
||||||
|
let desc = ''
|
||||||
|
switch (params.dataIndex) {
|
||||||
|
case 0: {
|
||||||
|
desc = 'P50'
|
||||||
|
break
|
||||||
|
}
|
||||||
|
case 1: {
|
||||||
|
desc = 'P90'
|
||||||
|
break
|
||||||
|
}
|
||||||
|
case 2: {
|
||||||
|
desc = 'P99'
|
||||||
|
break
|
||||||
|
}
|
||||||
|
default: break
|
||||||
|
}
|
||||||
|
return `${arr.replace(/B/g, 'bps')} (${desc})`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
yAxis: 536130030141
|
||||||
|
},
|
||||||
|
{
|
||||||
|
yAxis: 844057710428
|
||||||
|
},
|
||||||
|
{
|
||||||
|
yAxis: 969266744524
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export const lineOption2 = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis'
|
||||||
|
},
|
||||||
|
color: chartColor,
|
||||||
|
xAxis: {
|
||||||
|
type: 'time',
|
||||||
|
splitNumber: 12,
|
||||||
|
axisLabel: {
|
||||||
|
formatter: '{MM}-{dd} {HH}:{mm}',
|
||||||
|
rotate: 30
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
splitLine: { show: false },
|
||||||
|
offset: 10,
|
||||||
|
axisLabel: {
|
||||||
|
formatter (params) {
|
||||||
|
const arr = unitConvert(params, unitTypes.byte).join(' ')
|
||||||
|
return arr.replace(/B/g, 'bps')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: {
|
||||||
|
type: 'line',
|
||||||
|
symbol: 'none'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export const pieData = [
|
||||||
|
[
|
||||||
|
['HTTP', '36.30%'],
|
||||||
|
['HTTPS', '33.75%'],
|
||||||
|
['UNCATEGORIZED', '24.41%'],
|
||||||
|
['QUIC', '2.13%'],
|
||||||
|
['SSL', '2.04%'],
|
||||||
|
['STUN', '0.67%'],
|
||||||
|
['STUN.DTLS', '0.36%'],
|
||||||
|
['RTMP', '0.16%'],
|
||||||
|
['RTSP', '0.03%'],
|
||||||
|
['DNS', '0.03%'],
|
||||||
|
['Other', '0.13%']
|
||||||
|
],
|
||||||
|
[
|
||||||
|
['douyin', '6.12%'],
|
||||||
|
['wechat', '4.87%'],
|
||||||
|
['kuaishou', '3.18%'],
|
||||||
|
['qq', '1.86%'],
|
||||||
|
['qq_web', '1.52%'],
|
||||||
|
['http2', '1.30%'],
|
||||||
|
['youku', '0.94%'],
|
||||||
|
['bmff', '0.90%'],
|
||||||
|
['ppstream', '0.62%'],
|
||||||
|
['other', '78.69%']
|
||||||
|
],
|
||||||
|
[
|
||||||
|
['douyinvod.com', '9.18%'],
|
||||||
|
['qq.com', '1.43%'],
|
||||||
|
['kwaicdn.com', '1.37%'],
|
||||||
|
['douyincdn.com', '1.16%'],
|
||||||
|
['qpic.cn', '0.75%'],
|
||||||
|
['yximgs.com', '0.65%'],
|
||||||
|
['vivo.com.cn', '0.50%'],
|
||||||
|
['amemv.com', '0.43%'],
|
||||||
|
['heytapdownload.com', '0.34%'],
|
||||||
|
['apple.com', '0.26%'],
|
||||||
|
['other', '83.93%']
|
||||||
|
],
|
||||||
|
[
|
||||||
|
['113.200.130.0/24', '4.17%'],
|
||||||
|
['116.177.229.0/24', '1.37%'],
|
||||||
|
['116.177.224.0/24', '1.16%'],
|
||||||
|
['116.177.238.0/24', '1.14%'],
|
||||||
|
['139.170.154.0/24', '1.11%'],
|
||||||
|
['113.200.134.0/24', '1.10%'],
|
||||||
|
['116.177.239.0/24', '1.02%'],
|
||||||
|
['116.177.241.0/24', '0.94%'],
|
||||||
|
['103.251.162.0/24', '0.78%'],
|
||||||
|
['116.177.254.0/24', '0.74%'],
|
||||||
|
['other', '86.47%']
|
||||||
|
],
|
||||||
|
[
|
||||||
|
['256', '263884843187921'],
|
||||||
|
['1280', '259115014797786'],
|
||||||
|
['2304', '179350957251842'],
|
||||||
|
['2048', '146226265132311'],
|
||||||
|
['1536', '144883427788620'],
|
||||||
|
['1792', '144644004094863'],
|
||||||
|
['512', '141461036696155'],
|
||||||
|
['2816', '83886557825029'],
|
||||||
|
['1024', '78239831113846'],
|
||||||
|
['768', '62392314982139']
|
||||||
|
],
|
||||||
|
[
|
||||||
|
['2049', '244714000000000'],
|
||||||
|
['1537', '243301000000000'],
|
||||||
|
['2305', '211735000000000'],
|
||||||
|
['257', '207454000000000'],
|
||||||
|
['1281', '197125000000000'],
|
||||||
|
['513', '174418000000000'],
|
||||||
|
['1025', '78240600000000'],
|
||||||
|
['769', '75635600000000'],
|
||||||
|
['2817', '71460900000000']
|
||||||
|
]
|
||||||
|
]
|
||||||
|
|
||||||
|
export const pieOption = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
color: chartColor,
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'pie',
|
||||||
|
radius: '80%',
|
||||||
|
label: {
|
||||||
|
formatter: '{b} {d}%'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user