Echarts示例

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',
+      name: 'Charts',
-      myChart:null
+      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() {},
     // 返回