更新代码

src/views/home/components/line.vue

@@ -0,0 +1,57 @@
+<template>
+
+    <div ref="vehicleChartRef" id="chart-container"></div>
+
+</template>
+
+<script setup>
+import { onMounted ,onUnmounted} from 'vue';
+import * as echarts from 'echarts'
+let myChart = null
+const getLine = async () => {
+    var chartDom = document.getElementById('chart-container');
+    console.log("chartDom")
+    myChart = echarts.init(chartDom);
+    var option;
+
+    option = {
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+        },
+        yAxis: {
+            type: 'value'
+        },
+        series: [
+            {
+                data: [820, 932, 901, 934, 1290, 1330, 1320],
+                type: 'line',
+                areaStyle: {}
+            }
+        ]
+    };
+
+    option && myChart.setOption(option);
+    console.log("option", option);
+}
+
+const handleResize = () => {
+    myChart?.resize()
+}
+onMounted(() => {
+    getLine()
+    window.addEventListener('resize', handleResize)
+})
+onUnmounted(() => {
+    window.removeEventListener('resize', handleResize)
+    myChart?.dispose()
+
+})
+</script>
+
+<style lang="scss" scoped>
+#chart-container{
+    z-index:999;
+}
+</style>