diff --git a/package.json b/package.json
index 9a76c3acb..2d62b684d 100644
--- a/package.json
+++ b/package.json
@@ -36,11 +36,11 @@
   "dependencies": {
     "appdata-path": "^1.0.0",
     "axios": "^0.21.2",
-    "chart.js": "^2.9.4",
     "compare-versions": "^6.0.0-rc.2",
     "core-js": "^2.6.11",
     "crypto-js": "^4.2.0",
     "csvtojson": "^2.0.10",
+    "echarts": "^5.4.3",
     "electron-store": "^8.0.2",
     "electron-updater": "^5.0.5",
     "element-ui": "^2.15.5",
@@ -77,7 +77,6 @@
   },
   "devDependencies": {
     "@types/chai": "^4.1.0",
-    "@types/chart.js": "^2.9.28",
     "@types/electron-devtools-installer": "^2.2.0",
     "@types/fs-extra": "^8.0.0",
     "@types/js-yaml": "^4.0.5",
diff --git a/src/components/BytesStatistics.vue b/src/components/BytesStatistics.vue
deleted file mode 100644
index 87a524e27..000000000
--- a/src/components/BytesStatistics.vue
+++ /dev/null
@@ -1,174 +0,0 @@
-<template>
-  <my-dialog
-    :title="$t('connections.bytesStatistics')"
-    :visible.sync="showDialog"
-    class="bytes-statistics"
-    width="900px"
-    top="35px"
-    @close="resetData"
-    @confirm="resetData"
-  >
-    <el-row :gutter="20">
-      <el-col :span="12">
-        <el-card class="version-card info-card"> Broker {{ $t('common.version') }}{{ version }} </el-card>
-      </el-col>
-      <el-col :span="12">
-        <el-card class="uptime-card info-card"> {{ $t('common.uptime') }}{{ uptime }} </el-card>
-      </el-col>
-      <el-col :span="24">
-        <el-card class="chart-card" v-loading="loading">
-          <canvas id="bytesChart" width="450" height="200"></canvas>
-        </el-card>
-      </el-col>
-    </el-row>
-  </my-dialog>
-</template>
-
-<script lang="ts">
-import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
-import { Getter } from 'vuex-class'
-import Chart from 'chart.js'
-import MyDialog from './MyDialog.vue'
-
-@Component({
-  components: {
-    MyDialog,
-  },
-})
-export default class BytesStatistics extends Vue {
-  @Prop({ default: false }) public visible!: boolean
-  @Prop({ default: '' }) public label!: string
-  @Prop({ default: 0 }) public sent!: number
-  @Prop({ default: 0 }) public recevied!: number
-  @Prop({ default: '' }) public uptime!: ''
-  @Prop({ default: '' }) public version!: ''
-
-  @Getter('currentTheme') private theme!: Theme
-
-  private showDialog: boolean = this.visible
-  private bytesChart: Chart | null = null
-  private loading = true
-  private chartOption = {}
-
-  @Watch('visible')
-  private onVisibleChanged(val: boolean) {
-    this.showDialog = val
-    this.$nextTick(() => {
-      if (val && this.bytesChart === null) {
-        this.renderChart()
-      }
-    })
-  }
-
-  @Watch('$route.params.id')
-  private handleIdChanged() {
-    this.initChartDataOption()
-  }
-
-  get fontLineColor() {
-    return this.theme !== 'light' ? '#fff' : '#666'
-  }
-
-  public updateChart() {
-    const pushDatasets = (index: number, item: number) => {
-      if (this.bytesChart && this.bytesChart.data.datasets && this.bytesChart.data.datasets[index]) {
-        const { data } = this.bytesChart.data.datasets[index]
-        if (data) {
-          data.push(item)
-        }
-      }
-    }
-    if (this.bytesChart && this.bytesChart.data && this.bytesChart.data.labels) {
-      this.bytesChart.data.labels.push(this.label)
-      pushDatasets(0, this.recevied)
-      pushDatasets(1, this.sent)
-      this.bytesChart.update()
-    }
-  }
-
-  private initChartDataOption() {
-    this.chartOption = {
-      type: 'line',
-      data: {
-        labels: [],
-        datasets: [
-          {
-            label: this.$t('connections.bytesReceived'),
-            borderColor: '#ff6384',
-            backgroundColor: '#ff638412',
-            data: [],
-          },
-          {
-            label: this.$t('connections.bytesSent'),
-            borderColor: '#ffce56',
-            backgroundColor: '#ffce5612',
-            data: [],
-          },
-        ],
-      },
-      options: {
-        legend: {
-          labels: {
-            fontColor: this.fontLineColor,
-          },
-        },
-        scales: {
-          yAxes: [
-            {
-              ticks: {
-                beginAtZero: true,
-              },
-            },
-          ],
-        },
-      },
-    }
-  }
-
-  private resetData() {
-    this.showDialog = false
-    this.loading = true
-    if (this.bytesChart) {
-      this.bytesChart.clear()
-      this.bytesChart.destroy()
-      this.bytesChart = null
-    }
-    this.$emit('update:visible', false)
-  }
-
-  private renderChart() {
-    this.loading = false
-    const ctx = document.getElementById('bytesChart')
-    this.bytesChart = new Chart(ctx, this.chartOption)
-  }
-
-  private created() {
-    Chart.defaults.global.defaultFontColor = this.fontLineColor
-    this.initChartDataOption()
-  }
-}
-</script>
-
-<style lang="scss">
-.bytes-statistics {
-  .info-card {
-    height: 60px;
-    line-height: 60px;
-    text-align: center;
-    font-size: 16px;
-    color: var(--color-text-active);
-    .el-card__body {
-      padding: 0px;
-    }
-    &.version-card {
-      background: linear-gradient(0.25turn, #0c7cd1, #19bcc2);
-    }
-    &.uptime-card {
-      background: linear-gradient(0.25turn, #00ac70, #34c388);
-    }
-  }
-  .chart-card {
-    margin-top: 20px;
-  }
-}
-</style>
diff --git a/src/components/charts/AreaLine.vue b/src/components/charts/AreaLine.vue
new file mode 100644
index 000000000..ea9a161f9
--- /dev/null
+++ b/src/components/charts/AreaLine.vue
@@ -0,0 +1,156 @@
+<template>
+  <div :id="id" :style="{ width, height }"></div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
+import { Getter } from 'vuex-class'
+import * as echarts from 'echarts/core'
+import { TitleComponent, ToolboxComponent, TooltipComponent, GridComponent, LegendComponent } from 'echarts/components'
+import { LineChart } from 'echarts/charts'
+import { UniversalTransition } from 'echarts/features'
+import { CanvasRenderer } from 'echarts/renderers'
+
+echarts.use([
+  TitleComponent,
+  ToolboxComponent,
+  TooltipComponent,
+  GridComponent,
+  LegendComponent,
+  LineChart,
+  CanvasRenderer,
+  UniversalTransition,
+])
+
+@Component
+export default class AreaLine extends Vue {
+  @Prop({ required: true }) public id!: string
+  @Prop({ default: '450px' }) public height!: string
+  @Prop({ default: '100%' }) public width!: string
+  @Prop({ default: 'transparent' }) public backgroundColor!: string
+  @Prop({ default: '' }) public chartTitle!: string
+  @Prop({
+    default: () => ({
+      xData: [],
+      seriesData: [],
+    }),
+  })
+  public chartData!: AreaLineSeriesData
+
+  @Getter('currentTheme') private theme!: Theme
+
+  @Watch('chartData', { deep: true })
+  onChartDataChanged(val: any) {
+    this.updateChart()
+  }
+
+  private areaLineChart: echarts.ECharts | null = null
+
+  private generateChartOption() {
+    return {
+      backgroundColor: this.backgroundColor,
+      color: this.chartData.seriesData.map((item) => item.areaStyle.colorFrom),
+      title: {
+        text: this.chartTitle,
+      },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'cross',
+          label: {
+            backgroundColor: '#6a7985',
+          },
+        },
+      },
+      legend: {
+        data: this.chartData.seriesData.map((item) => item.name),
+      },
+      toolbox: {
+        feature: {
+          saveAsImage: {},
+        },
+      },
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true,
+      },
+      xAxis: [
+        {
+          type: 'category',
+          boundaryGap: false,
+          data: this.chartData.xData,
+        },
+      ],
+      yAxis: [
+        {
+          type: 'value',
+        },
+      ],
+      series: this.chartData.seriesData.map((item) => {
+        return {
+          name: item.name,
+          type: 'line',
+          stack: 'Total',
+          smooth: true,
+          lineStyle: {
+            width: 0,
+          },
+          showSymbol: false,
+          areaStyle: {
+            opacity: 0.8,
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: item.areaStyle.colorFrom,
+              },
+              {
+                offset: 1,
+                color: item.areaStyle.colorTo,
+              },
+            ]),
+          },
+          emphasis: {
+            focus: 'series',
+          },
+          data: item.data,
+        }
+      }),
+    }
+  }
+
+  initChart() {
+    const chartDom = document.getElementById(this.id) as HTMLElement
+    this.areaLineChart = echarts.init(chartDom, this.theme !== 'light' ? 'dark' : 'light')
+    this.updateChart()
+  }
+
+  updateChart() {
+    if (this.areaLineChart) {
+      const option = this.generateChartOption()
+      this.areaLineChart.setOption(option)
+    }
+  }
+
+  mounted() {
+    this.initChart()
+    window.addEventListener('resize', () => {
+      if (this.areaLineChart) {
+        this.areaLineChart.resize()
+      }
+    })
+  }
+
+  beforeDestroy() {
+    if (this.areaLineChart) {
+      this.areaLineChart.dispose()
+    }
+    window.removeEventListener('resize', () => {
+      if (this.areaLineChart) {
+        this.areaLineChart.resize()
+      }
+    })
+  }
+}
+</script>
diff --git a/src/components/widgets/BytesStatistics.vue b/src/components/widgets/BytesStatistics.vue
new file mode 100644
index 000000000..ffb03c5c7
--- /dev/null
+++ b/src/components/widgets/BytesStatistics.vue
@@ -0,0 +1,120 @@
+<template>
+  <my-dialog
+    :title="$t('connections.bytesStatistics')"
+    :visible.sync="showDialog"
+    class="bytes-statistics"
+    width="95%"
+    top="30px"
+    :fullscreen="true"
+    @close="resetData"
+    @confirm="resetData"
+  >
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-card class="version-card info-card"> Broker {{ $t('common.version') }}{{ version }} </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card class="uptime-card info-card"> {{ $t('common.uptime') }}{{ uptime }} </el-card>
+      </el-col>
+      <el-col class="chart" :span="24">
+        <area-line id="bytesChart" :chartData="chartData" />
+      </el-col>
+    </el-row>
+  </my-dialog>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
+import { Getter } from 'vuex-class'
+import MyDialog from '@/components/MyDialog.vue'
+import AreaLine from '@/components/charts/AreaLine.vue'
+
+@Component({
+  components: {
+    MyDialog,
+    AreaLine,
+  },
+})
+export default class BytesStatistics extends Vue {
+  @Prop({ default: false }) public visible!: boolean
+  @Prop({ default: '' }) public label!: string
+  @Prop({ default: 0 }) public sent!: number
+  @Prop({ default: 0 }) public recevied!: number
+  @Prop({ default: '' }) public uptime!: ''
+  @Prop({ default: '' }) public version!: ''
+
+  @Getter('currentTheme') private theme!: Theme
+
+  private showDialog: boolean = this.visible
+  private chartData: AreaLineSeriesData = {
+    xData: [],
+    seriesData: [
+      {
+        name: this.$tc('connections.bytesReceived'),
+        areaStyle: {
+          colorFrom: 'rgb(128, 255, 165)',
+          colorTo: 'rgb(1, 191, 236)',
+        },
+        data: [],
+      },
+      {
+        name: this.$tc('connections.bytesSent'),
+        areaStyle: {
+          colorFrom: 'rgb(0, 221, 255)',
+          colorTo: 'rgb(77, 119, 255)',
+        },
+        data: [],
+      },
+    ],
+  }
+
+  @Watch('visible')
+  private onVisibleChanged(val: boolean) {
+    this.showDialog = val
+  }
+
+  public updateChart() {
+    if (this.chartData.xData.length >= 20) {
+      this.chartData.xData.shift()
+      this.chartData.seriesData[0].data.shift()
+      this.chartData.seriesData[1].data.shift()
+    }
+
+    this.chartData.xData.push(this.label)
+    this.chartData.seriesData[0].data.push(this.recevied)
+    this.chartData.seriesData[1].data.push(this.sent)
+  }
+
+  private resetData() {
+    this.showDialog = false
+    this.$emit('update:visible', false)
+  }
+}
+</script>
+
+<style lang="scss">
+.bytes-statistics {
+  .el-dialog__body {
+    padding-bottom: 0;
+  }
+  .info-card {
+    height: 60px;
+    line-height: 60px;
+    text-align: center;
+    font-size: 16px;
+    color: var(--color-text-active);
+    .el-card__body {
+      padding: 0px;
+    }
+    &.version-card {
+      background: linear-gradient(0.25turn, #0c7cd1, #19bcc2);
+    }
+    &.uptime-card {
+      background: linear-gradient(0.25turn, #00ac70, #34c388);
+    }
+  }
+  .chart {
+    margin-top: 32px;
+  }
+}
+</style>
diff --git a/src/lang/connections.ts b/src/lang/connections.ts
index 9cfb833b2..a0d4dfcec 100644
--- a/src/lang/connections.ts
+++ b/src/lang/connections.ts
@@ -721,17 +721,17 @@ export default {
   },
   bytesReceived: {
     zh: '累计接收流量',
-    en: 'Accumulated received bytes',
-    tr: 'Birikmiş alınan baytlar',
+    en: 'Total Received Bytes',
+    tr: 'Toplam Alınan Baytlar',
     ja: '累積受信バイト数',
-    hu: 'Akkumulált fogadott bájtok',
+    hu: 'Összes Fogadott Bájtok',
   },
   bytesSent: {
     zh: '累计发送流量',
-    en: 'Accumulated sent bytes',
-    tr: 'Birikmiş gönderilen baytlar',
+    en: 'Total Sent Bytes',
+    tr: 'Toplam Gönderilen Baytlar',
     ja: '累積送信バイト数',
-    hu: 'Akkumulált küldött bájtok',
+    hu: 'Összes Küldött Bájtok',
   },
   secureTip: {
     zh: '是否验证服务端证书链和地址名称',
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
index 575e4ccc1..61a26a84c 100644
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -385,4 +385,16 @@ declare global {
     | 'gpt-4-32k'
     | 'gpt-4-0613'
     | 'gpt-4-32k-0613'
+
+  interface AreaLineSeriesData {
+    xData: string[]
+    seriesData: {
+      name: string
+      areaStyle: {
+        colorFrom: string
+        colorTo: string
+      }
+      data: any[]
+    }[]
+  }
 }
diff --git a/src/types/shims-vue.d.ts b/src/types/shims-vue.d.ts
index 818f5dc98..d9b4cca71 100644
--- a/src/types/shims-vue.d.ts
+++ b/src/types/shims-vue.d.ts
@@ -1,6 +1,5 @@
 declare module 'uuid'
 declare module 'vue-click-outside'
-declare module 'chart.js'
 declare module 'monaco-proto-lint'
 declare module 'vue-markdown'
 declare module 'crypto-js'
diff --git a/src/views/connections/ConnectionsDetail.vue b/src/views/connections/ConnectionsDetail.vue
index 74d969c2b..d1ac26295 100644
--- a/src/views/connections/ConnectionsDetail.vue
+++ b/src/views/connections/ConnectionsDetail.vue
@@ -302,7 +302,7 @@ import Contextmenu from '@/components/Contextmenu.vue'
 import ExportData from '@/components/ExportData.vue'
 import ImportData from '@/components/ImportData.vue'
 import TimedMessage from '@/components/TimedMessage.vue'
-import BytesStatistics from '@/components/BytesStatistics.vue'
+import BytesStatistics from '@/components/widgets/BytesStatistics.vue'
 import UseScript from '@/components/UseScript.vue'
 import MsgTypeTabs from '@/components/MsgTypeTabs.vue'
 import MsgTip from '@/components/MsgTip.vue'
diff --git a/yarn.lock b/yarn.lock
index 9c5475275..d78aa599d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1193,13 +1193,6 @@
   resolved "https://registry.npmjs.org/@types/chai/-/chai-4.2.18.tgz#0c8e298dbff8205e2266606c1ea5fbdba29b46e4"
   integrity sha512-rS27+EkB/RE1Iz3u0XtVL5q36MGDWbgYe7zWiodyKNUnthxY0rukK5V36eiUCtCisB7NN8zKYH6DO2M37qxFEQ==
 
-"@types/chart.js@^2.9.28":
-  version "2.9.32"
-  resolved "https://registry.npmjs.org/@types/chart.js/-/chart.js-2.9.32.tgz#b17d9a8c41ad348183a2ce041ebdeef892998251"
-  integrity sha512-d45JiRQwEOlZiKwukjqmqpbqbYzUX2yrXdH9qVn6kXpPDsTYCo6YbfFOlnUaJ8S/DhJwbBJiLsMjKpW5oP8B2A==
-  dependencies:
-    moment "^2.10.2"
-
 "@types/connect-history-api-fallback@*":
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.3.4.tgz#8c0f0e6e5d8252b699f5a662f51bdf82fd9d8bb8"
@@ -4866,6 +4859,14 @@ ecc-jsbn@~0.1.1:
     jsbn "~0.1.0"
     safer-buffer "^2.1.0"
 
+echarts@^5.4.3:
+  version "5.4.3"
+  resolved "https://registry.yarnpkg.com/echarts/-/echarts-5.4.3.tgz#f5522ef24419164903eedcfd2b506c6fc91fb20c"
+  integrity sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==
+  dependencies:
+    tslib "2.3.0"
+    zrender "5.4.4"
+
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -11977,16 +11978,16 @@ ts-pnp@^1.1.6:
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
   integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==
 
+tslib@2.3.0, tslib@^2.0.0, tslib@^2.1.0:
+  version "2.3.0"
+  resolved "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
+  integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
+
 tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
   version "1.14.1"
   resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.0, tslib@^2.1.0:
-  version "2.3.0"
-  resolved "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
-  integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
-
 tslint@^5.15.0:
   version "5.20.1"
   resolved "https://registry.npmjs.org/tslint/-/tslint-5.20.1.tgz#e401e8aeda0152bc44dd07e614034f3f80c67b7d"
@@ -13269,3 +13270,10 @@ zen-observable@^0.8.15:
   version "0.8.15"
   resolved "https://registry.yarnpkg.com/zen-observable/-/zen-observable-0.8.15.tgz#96415c512d8e3ffd920afd3889604e30b9eaac15"
   integrity sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ==
+
+zrender@5.4.4:
+  version "5.4.4"
+  resolved "https://registry.yarnpkg.com/zrender/-/zrender-5.4.4.tgz#8854f1d95ecc82cf8912f5a11f86657cb8c9e261"
+  integrity sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==
+  dependencies:
+    tslib "2.3.0"