gfwleak/cyber-narrator-cn-reporter-template
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: html模板更改

Browse Source
This commit is contained in:
chenjinsong
2022-05-06 14:01:30 +08:00
parent 431cc6dab1
commit 5d08ffe983
2 changed files with 534 additions and 514 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
template/2022-04-28/字节跳动网络服务质量监测报告(IDC精简版)/template.html
View File

@@ -1447,7 +1447,8 @@
/** 内置js end */
// 计算出前三个周期的时间戳范围
// 计算出前三个周期的时间戳范围，填充时间
function initTimeRange () {
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) {
@@ -1456,8 +1457,7 @@
var prevTimeRange = [timeRange[0] - timeOffset, timeRange[1] - timeOffset]
var pprevTimeRange = [prevTimeRange[0] - timeOffset, prevTimeRange[1] - timeOffset]
var ppprevTimeRange = [pprevTimeRange[0] - timeOffset, pprevTimeRange[1] - timeOffset]
// 填充时间
function initTimeRange () {
var currentRange0 = document.getElementById('currentRange0')
var currentRangeStr = ''
var prevRangeStr = ''
@@ -1471,9 +1471,10 @@
currentRange0.innerText = currentRangeStr
}
function initEcharts1 () {
var seriesData1 = trafficData.map(d => [d.stat_time, d.rate])
var unit1 = 'Kbps'
function initEcharts1 () {
var myChart = echarts.init(document.getElementById('canvas1'))
var option = {
color: chartColor,
@@ -1578,6 +1579,7 @@
}
// 域外访问域内服务的Top 10省份流量分布折线图
function initEcharts2 () {
var unit2 = 'KB'
var categoryData2 = top10ProvinceOutToInTraffic.map(t => t.client_province)
var barSeriesDataUp2 = top10ProvinceOutToInTraffic.map(t => ({ value: t.egress_bytes, percent: outToInTotalTraffic === 0 ? 0 : parseFloat(t.egress_bytes) / outToInTotalTraffic }))
@@ -1604,7 +1606,7 @@
lineMin2 = lineMin2 - 2.5 * (lineMax2 - lineMin2)
lineMax2 = lineMax2 + 0.5 * (lineMax2 - tempLineMin2)
}
function initEcharts2 () {
var myChart = echarts.init(document.getElementById('canvas2'))
var option = {
animation: false,
@@ -1700,6 +1702,7 @@
}
// 域外访问域内服务的Top 10省份流量分布折线图
function initEcharts8 () {
var unit8 = 'KB'
var categoryData8 = top10ProvinceOutToInTraffic.map(t => t.client_province)
var barSeriesDataDown8 = top10ProvinceOutToInTraffic.map(t => ({ value: t.ingress_bytes, percent: outToInTotalTraffic === 0 ? 0 : parseFloat(t.ingress_bytes) / outToInTotalTraffic }))
@@ -1726,7 +1729,7 @@
lineMin8 = lineMin8 - 2.5 * (lineMax8 - lineMin8)
lineMax8 = lineMax8 + 0.5 * (lineMax8 - tempLineMin8)
}
function initEcharts8 () {
var myChart = echarts.init(document.getElementById('canvas8'))
var option = {
animation: false,
@@ -1822,6 +1825,7 @@
}
// 域内访问域外服务的Top 10省份流量分布折线图
function initEcharts3 () {
var unit3 = 'KB'
var categoryData3 = top10ProvinceInToOutTraffic.map(t => t.server_province)
var barSeriesDataUp3 = top10ProvinceInToOutTraffic.map(t => ({ value: t.egress_bytes, percent: inToOutTotalTraffic === 0 ? 0 : parseFloat(t.egress_bytes) / inToOutTotalTraffic }))
@@ -1848,7 +1852,7 @@
lineMin3 = lineMin3 - 2.5 * (lineMax3 - lineMin3)
lineMax3 = lineMax3 + 0.5 * (lineMax3 - tempLineMin3)
}
function initEcharts3 () {
var myChart = echarts.init(document.getElementById('canvas3'))
var option = {
animation: false,
@@ -1944,6 +1948,7 @@
}
// 域内访问域外服务的Top 10省份流量分布折线图
function initEcharts9 () {
var unit9 = 'KB'
var categoryData9 = top10ProvinceInToOutTraffic.map(t => t.server_province)
var barSeriesDataDown9 = top10ProvinceInToOutTraffic.map(t => ({ value: t.ingress_bytes, percent: inToOutTotalTraffic === 0 ? 0 : parseFloat(t.ingress_bytes) / inToOutTotalTraffic }))
@@ -1970,7 +1975,7 @@
lineMin9 = lineMin9 - 2.5 * (lineMax9 - lineMin9)
lineMax9 = lineMax9 + 0.5 * (lineMax9 - tempLineMin9)
}
function initEcharts9 () {
var myChart = echarts.init(document.getElementById('canvas9'))
var option = {
animation: false,
@@ -2066,6 +2071,7 @@
}
// 域外访问域内服务的Top 10省内地区流量分布折线图
function initEcharts4 () {
var unit4 = 'KB'
var categoryData4 = top10CityOutToInTraffic.map(t => t.client_region)
var barSeriesDataUp4 = top10CityOutToInTraffic.map(t => ({ value: t.egress_bytes, percent: outToInTotalTraffic === 0 ? 0 : parseFloat(t.egress_bytes) / outToInTotalTraffic }))
@@ -2092,7 +2098,7 @@
lineMin4 = lineMin4 - 2.5 * (lineMax4 - lineMin4)
lineMax4 = lineMax4 + 0.5 * (lineMax4 - tempLineMin4)
}
function initEcharts4 () {
var myChart = echarts.init(document.getElementById('canvas4'))
var option = {
animation: false,
@@ -2187,6 +2193,7 @@
}
// 域外访问域内服务的Top 10省内地区流量分布折线图
function initEcharts10 () {
var unit10 = 'KB'
var categoryData10 = top10CityOutToInTraffic.map(t => t.client_region)
var barSeriesDataDown10 = top10CityOutToInTraffic.map(t => ({ value: t.ingress_bytes, percent: outToInTotalTraffic === 0 ? 0 : parseFloat(t.ingress_bytes) / outToInTotalTraffic }))
@@ -2213,7 +2220,7 @@
lineMin10 = lineMin10 - 2.5 * (lineMax10 - lineMin10)
lineMax10 = lineMax10 + 0.5 * (lineMax10 - tempLineMin10)
}
function initEcharts10 () {
var myChart = echarts.init(document.getElementById('canvas10'))
var option = {
animation: false,
@@ -2308,6 +2315,7 @@
}
// 域内访问域外服务的TOP 10省内地区流量分布折线图
function initEcharts5 () {
var unit5 = 'KB'
var categoryData5 = top10CityInToOutTraffic.map(t => t.server_region)
var barSeriesDataUp5 = top10CityInToOutTraffic.map(t => ({ value: t.egress_bytes, percent: inToOutTotalTraffic === 0 ? 0 : parseFloat(t.egress_bytes) / inToOutTotalTraffic }))
@@ -2334,7 +2342,7 @@
lineMin5 = lineMin5 - 2.5 * (lineMax5 - lineMin5)
lineMax5 = lineMax5 + 0.5 * (lineMax5 - tempLineMin5)
}
function initEcharts5 () {
var myChart = echarts.init(document.getElementById('canvas5'))
var option = {
animation: false,
@@ -2429,6 +2437,7 @@
}
// 域内访问域外服务的TOP 10省内地区流量分布折线图
function initEcharts11 () {
var unit11 = 'KB'
var categoryData11 = top10CityInToOutTraffic.map(t => t.server_region)
var barSeriesDataDown11 = top10CityInToOutTraffic.map(t => ({ value: t.ingress_bytes, percent: inToOutTotalTraffic === 0 ? 0 : parseFloat(t.ingress_bytes) / inToOutTotalTraffic }))
@@ -2455,7 +2464,7 @@
lineMin11 = lineMin11 - 2.5 * (lineMax11 - lineMin11)
lineMax11 = lineMax11 + 0.5 * (lineMax11 - tempLineMin11)
}
function initEcharts11 () {
var myChart = echarts.init(document.getElementById('canvas11'))
var option = {
animation: false,
@@ -2549,19 +2558,6 @@
document.getElementById('imgCanvas11').src = myChart.getDataURL({pixelRatio: 1})
}
var total6 = top3S2cTotalTraffic[0]
var seriesData6 = []
var startAngle6 = 90
if (total6) {
var missedCache6 = missedCacheS2cTraffic.find(t => total6.server_idc_renter === t.client_idc_renter)
if (missedCache6) {
seriesData6.push({ name: '缓存未命中流量', value: missedCache6.received_bytes })
seriesData6.push({ name: '缓存命中流量', value: total6.received_bytes - missedCache6.received_bytes })
var halfAngle6 = (seriesData6[0].value / total6.received_bytes) * 360 / 2
startAngle6 = startAngle6 + halfAngle6 - 5
}
}
var pieOption = {
legend: {
show: false
@@ -2593,6 +2589,19 @@
]
}
function initEcharts6 () {
var total6 = top3S2cTotalTraffic[0]
var seriesData6 = []
var startAngle6 = 90
if (total6) {
var missedCache6 = missedCacheS2cTraffic.find(t => total6.server_idc_renter === t.client_idc_renter)
if (missedCache6) {
seriesData6.push({ name: '缓存未命中流量', value: missedCache6.received_bytes })
seriesData6.push({ name: '缓存命中流量', value: total6.received_bytes - missedCache6.received_bytes })
var halfAngle6 = (seriesData6[0].value / total6.received_bytes) * 360 / 2
startAngle6 = startAngle6 + halfAngle6 - 5
}
}
var myChart = echarts.init(document.getElementById('canvas6'))
var option = JSON.parse(JSON.stringify(pieOption))
option.series[0].data = seriesData6
@@ -2602,6 +2611,7 @@
document.getElementById('imgCanvas6').src = myChart.getDataURL({pixelRatio: 1})
}
function initEcharts7 () {
var total7 = top3Sessions[0]
var seriesData7 = []
var startAngle7 = 90
@@ -2614,7 +2624,7 @@
startAngle7 = startAngle7 + halfAngle7 - 5
}
}
function initEcharts7 () {
var myChart = echarts.init(document.getElementById('canvas7'))
var option = JSON.parse(JSON.stringify(pieOption))
option.series[0].data = seriesData7
@@ -2624,18 +2634,18 @@
document.getElementById('imgCanvas7').src = myChart.getDataURL({pixelRatio: 1})
}
initEcharts1()
initEcharts2()
initEcharts3()
initEcharts4()
initEcharts5()
initEcharts6()
initEcharts7()
initEcharts8()
initEcharts9()
initEcharts10()
initEcharts11()
initTimeRange()
try { initEcharts1() } catch (e) { console.error(e) }
try { initEcharts2() } catch (e) { console.error(e) }
try { initEcharts3() } catch (e) { console.error(e) }
try { initEcharts4() } catch (e) { console.error(e) }
try { initEcharts5() } catch (e) { console.error(e) }
try { initEcharts6() } catch (e) { console.error(e) }
try { initEcharts7() } catch (e) { console.error(e) }
try { initEcharts8() } catch (e) { console.error(e) }
try { initEcharts9() } catch (e) { console.error(e) }
try { initEcharts10() } catch (e) { console.error(e) }
try { initEcharts11() } catch (e) { console.error(e) }
try { initTimeRange() } catch (e) { console.error(e) }
</script>

86
template/2022-04-28/字节跳动网络服务质量监测报告(IDC精简版)/test/html/testTemplate.html
View File

@@ -1055,7 +1055,8 @@
/** 内置js end */
// 计算出前三个周期的时间戳范围
// 计算出前三个周期的时间戳范围，填充时间
function initTimeRange () {
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) {
@@ -1064,8 +1065,7 @@
var prevTimeRange = [timeRange[0] - timeOffset, timeRange[1] - timeOffset]
var pprevTimeRange = [prevTimeRange[0] - timeOffset, prevTimeRange[1] - timeOffset]
var ppprevTimeRange = [pprevTimeRange[0] - timeOffset, pprevTimeRange[1] - timeOffset]
// 填充时间
function initTimeRange () {
var currentRange0 = document.getElementById('currentRange0')
var currentRangeStr = ''
var prevRangeStr = ''
@@ -1079,9 +1079,10 @@
currentRange0.innerText = currentRangeStr
}
function initEcharts1 () {
var seriesData1 = trafficData.map(d => [d.stat_time, d.rate])
var unit1 = 'Kbps'
function initEcharts1 () {
var myChart = echarts.init(document.getElementById('canvas1'))
var option = {
color: chartColor,
@@ -1186,6 +1187,7 @@
}
// 域外访问域内服务的Top 10省份流量分布折线图
function initEcharts2 () {
var unit2 = 'KB'
var categoryData2 = top10ProvinceOutToInTraffic.map(t => t.client_province)
var barSeriesDataUp2 = top10ProvinceOutToInTraffic.map(t => ({ value: t.egress_bytes, percent: outToInTotalTraffic === 0 ? 0 : parseFloat(t.egress_bytes) / outToInTotalTraffic }))
@@ -1212,7 +1214,7 @@
lineMin2 = lineMin2 - 2.5 * (lineMax2 - lineMin2)
lineMax2 = lineMax2 + 0.5 * (lineMax2 - tempLineMin2)
}
function initEcharts2 () {
var myChart = echarts.init(document.getElementById('canvas2'))
var option = {
animation: false,
@@ -1308,6 +1310,7 @@
}
// 域外访问域内服务的Top 10省份流量分布折线图
function initEcharts8 () {
var unit8 = 'KB'
var categoryData8 = top10ProvinceOutToInTraffic.map(t => t.client_province)
var barSeriesDataDown8 = top10ProvinceOutToInTraffic.map(t => ({ value: t.ingress_bytes, percent: outToInTotalTraffic === 0 ? 0 : parseFloat(t.ingress_bytes) / outToInTotalTraffic }))
@@ -1334,7 +1337,7 @@
lineMin8 = lineMin8 - 2.5 * (lineMax8 - lineMin8)
lineMax8 = lineMax8 + 0.5 * (lineMax8 - tempLineMin8)
}
function initEcharts8 () {
var myChart = echarts.init(document.getElementById('canvas8'))
var option = {
animation: false,
@@ -1430,6 +1433,7 @@
}
// 域内访问域外服务的Top 10省份流量分布折线图
function initEcharts3 () {
var unit3 = 'KB'
var categoryData3 = top10ProvinceInToOutTraffic.map(t => t.server_province)
var barSeriesDataUp3 = top10ProvinceInToOutTraffic.map(t => ({ value: t.egress_bytes, percent: inToOutTotalTraffic === 0 ? 0 : parseFloat(t.egress_bytes) / inToOutTotalTraffic }))
@@ -1456,7 +1460,7 @@
lineMin3 = lineMin3 - 2.5 * (lineMax3 - lineMin3)
lineMax3 = lineMax3 + 0.5 * (lineMax3 - tempLineMin3)
}
function initEcharts3 () {
var myChart = echarts.init(document.getElementById('canvas3'))
var option = {
animation: false,
@@ -1552,6 +1556,7 @@
}
// 域内访问域外服务的Top 10省份流量分布折线图
function initEcharts9 () {
var unit9 = 'KB'
var categoryData9 = top10ProvinceInToOutTraffic.map(t => t.server_province)
var barSeriesDataDown9 = top10ProvinceInToOutTraffic.map(t => ({ value: t.ingress_bytes, percent: inToOutTotalTraffic === 0 ? 0 : parseFloat(t.ingress_bytes) / inToOutTotalTraffic }))
@@ -1578,7 +1583,7 @@
lineMin9 = lineMin9 - 2.5 * (lineMax9 - lineMin9)
lineMax9 = lineMax9 + 0.5 * (lineMax9 - tempLineMin9)
}
function initEcharts9 () {
var myChart = echarts.init(document.getElementById('canvas9'))
var option = {
animation: false,
@@ -1674,6 +1679,7 @@
}
// 域外访问域内服务的Top 10省内地区流量分布折线图
function initEcharts4 () {
var unit4 = 'KB'
var categoryData4 = top10CityOutToInTraffic.map(t => t.client_region)
var barSeriesDataUp4 = top10CityOutToInTraffic.map(t => ({ value: t.egress_bytes, percent: outToInTotalTraffic === 0 ? 0 : parseFloat(t.egress_bytes) / outToInTotalTraffic }))
@@ -1700,7 +1706,7 @@
lineMin4 = lineMin4 - 2.5 * (lineMax4 - lineMin4)
lineMax4 = lineMax4 + 0.5 * (lineMax4 - tempLineMin4)
}
function initEcharts4 () {
var myChart = echarts.init(document.getElementById('canvas4'))
var option = {
animation: false,
@@ -1795,6 +1801,7 @@
}
// 域外访问域内服务的Top 10省内地区流量分布折线图
function initEcharts10 () {
var unit10 = 'KB'
var categoryData10 = top10CityOutToInTraffic.map(t => t.client_region)
var barSeriesDataDown10 = top10CityOutToInTraffic.map(t => ({ value: t.ingress_bytes, percent: outToInTotalTraffic === 0 ? 0 : parseFloat(t.ingress_bytes) / outToInTotalTraffic }))
@@ -1821,7 +1828,7 @@
lineMin10 = lineMin10 - 2.5 * (lineMax10 - lineMin10)
lineMax10 = lineMax10 + 0.5 * (lineMax10 - tempLineMin10)
}
function initEcharts10 () {
var myChart = echarts.init(document.getElementById('canvas10'))
var option = {
animation: false,
@@ -1916,6 +1923,7 @@
}
// 域内访问域外服务的TOP 10省内地区流量分布折线图
function initEcharts5 () {
var unit5 = 'KB'
var categoryData5 = top10CityInToOutTraffic.map(t => t.server_region)
var barSeriesDataUp5 = top10CityInToOutTraffic.map(t => ({ value: t.egress_bytes, percent: inToOutTotalTraffic === 0 ? 0 : parseFloat(t.egress_bytes) / inToOutTotalTraffic }))
@@ -1942,7 +1950,7 @@
lineMin5 = lineMin5 - 2.5 * (lineMax5 - lineMin5)
lineMax5 = lineMax5 + 0.5 * (lineMax5 - tempLineMin5)
}
function initEcharts5 () {
var myChart = echarts.init(document.getElementById('canvas5'))
var option = {
animation: false,
@@ -2037,6 +2045,7 @@
}
// 域内访问域外服务的TOP 10省内地区流量分布折线图
function initEcharts11 () {
var unit11 = 'KB'
var categoryData11 = top10CityInToOutTraffic.map(t => t.server_region)
var barSeriesDataDown11 = top10CityInToOutTraffic.map(t => ({ value: t.ingress_bytes, percent: inToOutTotalTraffic === 0 ? 0 : parseFloat(t.ingress_bytes) / inToOutTotalTraffic }))
@@ -2063,7 +2072,7 @@
lineMin11 = lineMin11 - 2.5 * (lineMax11 - lineMin11)
lineMax11 = lineMax11 + 0.5 * (lineMax11 - tempLineMin11)
}
function initEcharts11 () {
var myChart = echarts.init(document.getElementById('canvas11'))
var option = {
animation: false,
@@ -2157,19 +2166,6 @@
document.getElementById('imgCanvas11').src = myChart.getDataURL({pixelRatio: 1})
}
var total6 = top3S2cTotalTraffic[0]
var seriesData6 = []
var startAngle6 = 90
if (total6) {
var missedCache6 = missedCacheS2cTraffic.find(t => total6.server_idc_renter === t.client_idc_renter)
if (missedCache6) {
seriesData6.push({ name: '缓存未命中流量', value: missedCache6.received_bytes })
seriesData6.push({ name: '缓存命中流量', value: total6.received_bytes - missedCache6.received_bytes })
var halfAngle6 = (seriesData6[0].value / total6.received_bytes) * 360 / 2
startAngle6 = startAngle6 + halfAngle6 - 5
}
}
var pieOption = {
legend: {
show: false
@@ -2201,6 +2197,19 @@
]
}
function initEcharts6 () {
var total6 = top3S2cTotalTraffic[0]
var seriesData6 = []
var startAngle6 = 90
if (total6) {
var missedCache6 = missedCacheS2cTraffic.find(t => total6.server_idc_renter === t.client_idc_renter)
if (missedCache6) {
seriesData6.push({ name: '缓存未命中流量', value: missedCache6.received_bytes })
seriesData6.push({ name: '缓存命中流量', value: total6.received_bytes - missedCache6.received_bytes })
var halfAngle6 = (seriesData6[0].value / total6.received_bytes) * 360 / 2
startAngle6 = startAngle6 + halfAngle6 - 5
}
}
var myChart = echarts.init(document.getElementById('canvas6'))
var option = JSON.parse(JSON.stringify(pieOption))
option.series[0].data = seriesData6
@@ -2210,6 +2219,7 @@
document.getElementById('imgCanvas6').src = myChart.getDataURL({pixelRatio: 1})
}
function initEcharts7 () {
var total7 = top3Sessions[0]
var seriesData7 = []
var startAngle7 = 90
@@ -2222,7 +2232,7 @@
startAngle7 = startAngle7 + halfAngle7 - 5
}
}
function initEcharts7 () {
var myChart = echarts.init(document.getElementById('canvas7'))
var option = JSON.parse(JSON.stringify(pieOption))
option.series[0].data = seriesData7
@@ -2232,18 +2242,18 @@
document.getElementById('imgCanvas7').src = myChart.getDataURL({pixelRatio: 1})
}
initEcharts1()
initEcharts2()
initEcharts3()
initEcharts4()
initEcharts5()
initEcharts6()
initEcharts7()
initEcharts8()
initEcharts9()
initEcharts10()
initEcharts11()
initTimeRange()
try { initEcharts1() } catch (e) { console.error(e) }
try { initEcharts2() } catch (e) { console.error(e) }
try { initEcharts3() } catch (e) { console.error(e) }
try { initEcharts4() } catch (e) { console.error(e) }
try { initEcharts5() } catch (e) { console.error(e) }
try { initEcharts6() } catch (e) { console.error(e) }
try { initEcharts7() } catch (e) { console.error(e) }
try { initEcharts8() } catch (e) { console.error(e) }
try { initEcharts9() } catch (e) { console.error(e) }
try { initEcharts10() } catch (e) { console.error(e) }
try { initEcharts11() } catch (e) { console.error(e) }
try { initTimeRange() } catch (e) { console.error(e) }
</script>