From f866d6f120383c9a38d6daed3884026f57e4b5f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=82=85=E5=AD=90=E6=B9=98?= <fuzx@xmpaoyou.com>
Date: Sun, 9 Oct 2022 17:08:59 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=90=AB=E6=9C=89echarts?=
 =?UTF-8?q?=E7=9A=84=E9=A1=B5=E9=9D=A2=E5=9C=A8=E5=88=87=E6=8D=A2=E6=A0=87?=
 =?UTF-8?q?=E7=AD=BE=E5=90=8E=EF=BC=8C=E5=8F=98=E4=B8=BA=E7=A9=BA=E7=99=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/workSpace/analysis/index.vue  | 12 +++++++-----
 src/views/workSpace/console/index.vue   | 12 +++++++-----
 src/views/workSpace/workbench/index.vue | 15 +++++++++------
 3 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/src/views/workSpace/analysis/index.vue b/src/views/workSpace/analysis/index.vue
index d9d369f..06fa2db 100644
--- a/src/views/workSpace/analysis/index.vue
+++ b/src/views/workSpace/analysis/index.vue
@@ -66,7 +66,7 @@
           </template>
           <lay-row>
             <lay-col :md="18">
-              <div id="main"></div>
+              <div id="main" ref="mainRef"></div>
             </lay-col>
             <lay-col :md="6">
               <div style="padding-top:42px;padding-left: 42px;padding-right: 42px;padding-bottom: 10px;">
@@ -139,15 +139,16 @@
   </lay-container>
 </template>
 <script lang="ts">
-import { defineComponent, nextTick } from "vue";
+import { defineComponent, ref, onMounted } from "vue";
 
 import * as echarts from 'echarts';
 
 export default defineComponent({
   setup() {
 
-    nextTick(() => {
-      var chartDom = document.getElementById('main');
+    const mainRef = ref()
+    onMounted(() => {
+      var chartDom = mainRef.value;
       // @ts-ignore
       var myChart = echarts.init(chartDom);
       var option = {
@@ -214,6 +215,7 @@ export default defineComponent({
     ]
 
     return {
+      mainRef,
       columns21,
       dataSource21
     };
@@ -269,4 +271,4 @@ export default defineComponent({
 .statistics-body {
   padding: 14px 0;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/workSpace/console/index.vue b/src/views/workSpace/console/index.vue
index 80cc77d..eca221b 100644
--- a/src/views/workSpace/console/index.vue
+++ b/src/views/workSpace/console/index.vue
@@ -119,7 +119,7 @@
           <lay-col :md="24">
             <lay-card>
               <template #title> 数据概览 </template>
-              <div id="main"></div>
+              <div id="main" ref="mainRef"></div>
             </lay-card>
           </lay-col>
           <lay-col :md="24">
@@ -182,17 +182,18 @@
   </lay-container>
 </template>
 <script lang="ts">
-import { defineComponent, nextTick, ref } from "vue";
+import { defineComponent, ref, onMounted } from "vue";
 
 import * as echarts from 'echarts';
 
 export default defineComponent({
   setup() {
 
+    const mainRef = ref()
     const currentIndex = ref("1")
 
-    nextTick(() => {
-      var chartDom = document.getElementById('main');
+    onMounted(() => {
+      var chartDom = mainRef.value;
       // @ts-ignore
       var myChart = echarts.init(chartDom);
       var option;
@@ -445,6 +446,7 @@ export default defineComponent({
     ]
 
     return {
+      mainRef,
       currentIndex,
       columns21,
       dataSource21,
@@ -521,4 +523,4 @@ export default defineComponent({
     margin-top: 10px;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/workSpace/workbench/index.vue b/src/views/workSpace/workbench/index.vue
index a2985cc..75ceb23 100644
--- a/src/views/workSpace/workbench/index.vue
+++ b/src/views/workSpace/workbench/index.vue
@@ -158,7 +158,7 @@
               <template v-slot:title>
                 八卦新闻
               </template>
-              <div id="main"></div>
+              <div id="main" ref="mainRef"></div>
             </lay-card>
           </lay-col>
           <lay-col :md="24">
@@ -175,14 +175,15 @@
   </lay-container>
 </template>
 <script lang="ts">
-import { defineComponent, nextTick } from "vue";
+import { defineComponent, ref, onMounted } from "vue";
 import * as echarts from 'echarts';
 
 export default defineComponent({
   setup() {
 
-    nextTick(() => {
-      var chartDom = document.getElementById('main');
+    const mainRef = ref()
+    onMounted(() => {
+      var chartDom = mainRef.value;
 
       // @ts-ignore
       var myChart = echarts.init(chartDom);
@@ -218,7 +219,9 @@ export default defineComponent({
       };
       myChart.setOption(option);
     })
-    return {};
+    return {
+      mainRef,
+    };
   },
 });
 </script>
@@ -328,4 +331,4 @@ export default defineComponent({
   height: 300px;
   width: 100%;
 }
-</style>
\ No newline at end of file
+</style>
-- 
Gitee