Auto Commit

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>

src/components/LineChart.vue

@@ -3,11 +3,64 @@
 
   </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>