feat: html模板更改

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

@@ -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()
+  try { initEcharts1() } catch (e) { console.error(e) }
-  initEcharts2()
+  try { initEcharts2() } catch (e) { console.error(e) }
-  initEcharts3()
+  try { initEcharts3() } catch (e) { console.error(e) }
-  initEcharts4()
+  try { initEcharts4() } catch (e) { console.error(e) }
-  initEcharts5()
+  try { initEcharts5() } catch (e) { console.error(e) }
-  initEcharts6()
+  try { initEcharts6() } catch (e) { console.error(e) }
-  initEcharts7()
+  try { initEcharts7() } catch (e) { console.error(e) }
-  initEcharts8()
+  try { initEcharts8() } catch (e) { console.error(e) }
-  initEcharts9()
+  try { initEcharts9() } catch (e) { console.error(e) }
-  initEcharts10()
+  try { initEcharts10() } catch (e) { console.error(e) }
-  initEcharts11()
+  try { initEcharts11() } catch (e) { console.error(e) }
-  initTimeRange()
+  try { initTimeRange() } catch (e) { console.error(e) }
 </script>
 
 

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

@@ -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()
+  try { initEcharts1() } catch (e) { console.error(e) }
-  initEcharts2()
+  try { initEcharts2() } catch (e) { console.error(e) }
-  initEcharts3()
+  try { initEcharts3() } catch (e) { console.error(e) }
-  initEcharts4()
+  try { initEcharts4() } catch (e) { console.error(e) }
-  initEcharts5()
+  try { initEcharts5() } catch (e) { console.error(e) }
-  initEcharts6()
+  try { initEcharts6() } catch (e) { console.error(e) }
-  initEcharts7()
+  try { initEcharts7() } catch (e) { console.error(e) }
-  initEcharts8()
+  try { initEcharts8() } catch (e) { console.error(e) }
-  initEcharts9()
+  try { initEcharts9() } catch (e) { console.error(e) }
-  initEcharts10()
+  try { initEcharts10() } catch (e) { console.error(e) }
-  initEcharts11()
+  try { initEcharts11() } catch (e) { console.error(e) }
-  initTimeRange()
+  try { initTimeRange() } catch (e) { console.error(e) }
 </script>