diff --git a/src/router/index.js b/src/router/index.js
index e62966c9..b385c302 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -49,11 +49,11 @@ const routes = [
       {
         path: '/chart',
         component: () => import('@/views/settings/Chart')
-      }/* ,
+      },
       {
         path: '/temp',
         component: () => import('@/views/Temp')
-      } */
+      }
     ]
   }
 ]
diff --git a/src/views/Temp.vue b/src/views/Temp.vue
new file mode 100644
index 00000000..17eeb590
--- /dev/null
+++ b/src/views/Temp.vue
@@ -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>
diff --git a/src/views/testData.js b/src/views/testData.js
new file mode 100644
index 00000000..a8acfecd
--- /dev/null
+++ b/src/views/testData.js
@@ -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}%'
+      }
+    }
+  ]
+}