refactor(connection): replace chart.js to echart

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",

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>