echart接入

package.json

@@ -15,7 +15,7 @@
     "axios": "^1.7.2",
     "core-js": "^3.8.3",
     "decimal.js": "^10.5.0",
-    "echarts": "^5.4.3",
+    "echarts": "^5.6.0",
     "element-ui": "^2.15.14",
     "fs": "0.0.1-security",
     "lodash": "^4.17.21",

src/components/ECharts/index.vue

@@ -0,0 +1,70 @@
+<template>
+  <div :id="id" class="chartBox"></div>
+</template>
+
+<script>
+import { generateUUID } from '@/utils'
+// 引入 ECharts 核心模块，核心模块提供了 ECharts 使用必须要的接口。
+import * as ECharts from 'echarts/core'
+// 引入柱状图图表，图表后缀都为 Chart
+import { BarChart, LineChart } from 'echarts/charts'
+// 引入标题，提示框，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
+import {
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  DatasetComponent,
+  TransformComponent
+} from 'echarts/components'
+// 标签自动布局、全局过渡动画等特性
+import { LabelLayout, UniversalTransition } from 'echarts/features'
+// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
+import { CanvasRenderer } from 'echarts/renderers'
+export default {
+  name: 'e-charts',
+  data () {
+    return {
+      id: generateUUID(),
+      chart: null
+    }
+  },
+  beforeDestroy () {
+    window.removeEventListener('resize', this.onResize)
+    this.chart.dispose()
+  },
+  methods: {
+    onInit () {
+      // 注册必须的组件
+      ECharts.use([
+        TitleComponent,
+        TooltipComponent,
+        GridComponent,
+        DatasetComponent,
+        TransformComponent,
+        BarChart,
+        LineChart,
+        LabelLayout,
+        UniversalTransition,
+        CanvasRenderer
+      ])
+      this.$nextTick(() => {
+        this.chart = ECharts.init(document.getElementById(this.id))
+        window.addEventListener('resize', this.onResize)
+      })
+    },
+    onResize () {
+      this.chart.resize()
+    },
+    setOption (options) {
+      this.chart.setOption(options)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.chartBox {
+  width: 100%;
+  height: 100%;
+}
+</style>