From 5b2b08bd12324acc093973f9f068666036bfedef Mon Sep 17 00:00:00 2001
From: lzh <liuzhanhong>
Date: Sun, 8 Jan 2023 15:08:02 +0800
Subject: [PATCH] =?UTF-8?q?Echarts=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 base-ui/src/views/xiaoshou/xstj/tj.vue | 29 ++++++++++++++++++--------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/base-ui/src/views/xiaoshou/xstj/tj.vue b/base-ui/src/views/xiaoshou/xstj/tj.vue
index f970d319..2245df62 100644
--- a/base-ui/src/views/xiaoshou/xstj/tj.vue
+++ b/base-ui/src/views/xiaoshou/xstj/tj.vue
@@ -3,33 +3,44 @@
     <div>
       <h3>{{ name }}</h3>
     </div>
-    <div id="main" style="width: 400px;height: 300px;background-color: bisque;"></div>
+    <div ref="charta" style="height:300px;width: 100%;" />
   </div>
 </template>
 
 <script>
-import * as echarts from 'echarts';
+import * as echarts from 'echarts'
 export default {
   name: 'XiaoshouXstjTj',
   // components: {  },
   data() {
     return {
-      name: 'jkljljkjlkjlkjlj',
-      myChart:null
+      name: 'Charts',
+      myCharta: null
     }
   },
   created() {
     // 初始化变量
-    this.init()
+    // this.init()
     // 加载列表
     // this.getList()
   },
+  beforeDestroy() {
+    if (this.myCharta) {
+      this.myCharta.dispose()
+      this.myCharta = null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initCharta()
+    })
+  },
   methods: {
-    init() {
+    initCharta() {
       // 基于准备好的dom，初始化echarts实例
-      this.myChart = echarts.init('main');
+      this.myCharta = echarts.init(this.$refs.charta)
       // 绘制图表
-      this.myChart.setOption({
+      this.myCharta.setOption({
         title: {
           text: 'ECharts 入门示例'
         },
@@ -45,7 +56,7 @@ export default {
             data: [5, 20, 36, 10, 10, 20]
           }
         ]
-      });
+      })
     },
     getList() {},
     // 返回