From 9fde2e2849b7a767767f5048c84393e79f501670 Mon Sep 17 00:00:00 2001
From: younth <1084190606@qq.com>
Date: Thu, 7 Sep 2023 19:11:13 +0800
Subject: [PATCH] Auto Commit

---
 src/App.vue                  |  2 +-
 src/components/LineChart.vue | 65 ++++++++++++++++++++++++++++++++----
 2 files changed, 60 insertions(+), 7 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index bb42d34..c9d23e3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,7 +8,7 @@ import LineChart from './components/LineChart.vue'
     <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
     <div class="wrapper">
       <HelloChart/>
-      <LineChart/> -
+      <LineChart/> 
     </div>
   </header>
 </template>
diff --git a/src/components/LineChart.vue b/src/components/LineChart.vue
index fe2ec58..93d9c2e 100644
--- a/src/components/LineChart.vue
+++ b/src/components/LineChart.vue
@@ -1,13 +1,66 @@
 <template>
   <div class="line-chart" id="line-chart">
-    
+
   </div>
 </template>
-<script setup>
-defineProps({
-  
-})
+<script>
+import * as echarts from 'echarts'
+export default {
+  data() {
+    return {
+      chart: {}
+    }
+  },
+  mounted() {
+    this.initOption()
+    window.addEventListener('resize', () => {
+      this.chart.resize()
+    })
+  },
+  methods: {
+    resizeChart() {
+      if (Object.keys(this.chart).length) {
+        this.chart.resize()
+      }
+    },
+    disposeChart() {
+      if (Object.keys(this.chart).length) {
+        this.chart.dispose()
+      }
+    },
+    initChart() {
+      this.chart = echarts.init(document.getElementById('line-chart'))
+    },
+    initOption() {
+      this.disposeChart()
+      this.initChart()
+      let option = {
+        xAxis: {
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            data: [820, 932, 901, 934, 1290, 1330, 1320],
+            type: 'line',
+            smooth: true
+          }
+        ]
+      }
+      this.chart.on('click','series',(param)=>{
+        console.log(param)
+      })
+      this.chart.setOption(option)
+    }
+  }
+}
 </script>
 <style scoped>
-
+.line-chart {
+  width: 100%;
+  height: 500px;
+}
 </style>
-- 
GitLab