添加

src/components/echarts/MyEchart.vue

@@ -0,0 +1,88 @@
+<template>
+    <div ref="chartRef" class="my-chart" />
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import echarts from './echarts'
+import 'echarts/lib/component/dataZoom'
+
+const props = defineProps(['options'])
+const chartRef = ref<HTMLDivElement>()
+let chart: echarts.ECharts | null = null
+const resizeHandler = () => {
+    chart?.resize()
+}
+const initChart = () => {
+    chart = echarts.init(chartRef.value as HTMLDivElement)
+    chart.setOption({
+        tooltip: {
+            showContent: true,
+            trigger: 'axis',
+            backgroundColor: 'rgba(8,36,68,.7)',
+            axisPointer: {
+                // 坐标轴指示器，坐标轴触发有效
+                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+            },
+            color: '#ffff',
+            textStyle: {
+                color: '#ffff'
+            }
+        },
+        grid: {
+            top: '30px',
+            left: '40px',
+            right: '40px',
+            bottom: '40px',
+
+            containLabel: true
+        },
+        dataZoom: [
+            {
+                type: 'inside',
+                height: 13,
+                start: 0,
+                bottom: '20px',
+                end: 100
+            },
+            {
+                start: 0,
+                height: 13,
+                bottom: '20px',
+                end: 100
+            }
+        ],
+        color: [
+            '#07CCCA ',
+            '#00BFF5',
+            '#FFBF00',
+            '#77DA63',
+            '#D5FF6B',
+            '#Ff6600',
+            '#FF9100',
+            '#5B6E96',
+            '#66FFCC',
+            '#B3B3B3'
+        ],
+        ...props.options
+    })
+}
+onMounted(() => {
+    setTimeout(() => {
+        initChart()
+    }, 20)
+    window.addEventListener('resize', resizeHandler)
+})
+
+onBeforeUnmount(() => {
+    window.removeEventListener('resize', resizeHandler)
+    chart?.dispose()
+})
+</script>
+
+<style lang="scss" scoped>
+.my-chart {
+    height: 100%;
+    width: 100%;
+}
+</style>