From 140f71612863f022b04b900becf230bb0911695a Mon Sep 17 00:00:00 2001
From: Kagol <kagol@sina.com>
Date: Fri, 29 Mar 2024 12:55:02 +0800
Subject: [PATCH] fix(vue-pro): fix echarts dom is null on the home page

---
 .../tinyvue/src/views/board/home/components/curve.vue      | 7 ++++---
 .../tinyvue/src/views/board/home/components/falls.vue      | 7 ++++---
 .../tinyvue/src/views/board/home/components/region.vue     | 5 +++--
 .../tinyvue/src/views/board/home/components/round.vue      | 7 ++++---
 4 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/packages/toolkits/pro/template/tinyvue/src/views/board/home/components/curve.vue b/packages/toolkits/pro/template/tinyvue/src/views/board/home/components/curve.vue
index 249765dd..6f6dd990 100644
--- a/packages/toolkits/pro/template/tinyvue/src/views/board/home/components/curve.vue
+++ b/packages/toolkits/pro/template/tinyvue/src/views/board/home/components/curve.vue
@@ -7,13 +7,14 @@
 </template>
 
 <script lang="ts" setup>
-  import { onMounted, watch, inject } from 'vue';
+  import { onMounted, watch, inject, ref } from 'vue';
   import { useI18n } from 'vue-i18n';
   import useLocale from '@/hooks/locale';
 
   const { t } = useI18n();
   const { currentLocale } = useLocale();
   let echarts = inject<any>('echarts');
+  const echartsDom = ref();
 
   let option = {
     tooltip: {
@@ -185,7 +186,7 @@
   };
 
   onMounted(() => {
-    const chartDom = document.getElementById('line');
+    const chartDom = echartsDom.value;
     const myChart = echarts.init(chartDom as any);
     option && myChart.setOption(option);
     window.addEventListener('resize', () => {
@@ -194,7 +195,7 @@
   });
 
   watch(currentLocale, (newValue, oldValue) => {
-    const chartDom = document.getElementById('line');
+    const chartDom = echartsDom.value;
     const myChart = echarts.init(chartDom as any);
     if (newValue === 'zhCN') {
       option.legend.data = ['采样PV', '首屏可见', '页面Onload'];
diff --git a/packages/toolkits/pro/template/tinyvue/src/views/board/home/components/falls.vue b/packages/toolkits/pro/template/tinyvue/src/views/board/home/components/falls.vue
index 72e48cbe..08119cba 100644
--- a/packages/toolkits/pro/template/tinyvue/src/views/board/home/components/falls.vue
+++ b/packages/toolkits/pro/template/tinyvue/src/views/board/home/components/falls.vue
@@ -7,13 +7,14 @@
 </template>
 
 <script lang="ts" setup>
-  import { onMounted, watch, inject } from 'vue';
+  import { onMounted, watch, inject, ref } from 'vue';
   import { useI18n } from 'vue-i18n';
   import useLocale from '@/hooks/locale';
 
   const { t } = useI18n();
   const { currentLocale } = useLocale();
   let echarts = inject<any>('echarts');
+  const echartsDom = ref();
 
   const list = [
     {
@@ -167,7 +168,7 @@
   };
 
   onMounted(() => {
-    const chartDom = document.getElementById('flow');
+    const chartDom = echartsDom.value;
     const myChart = echarts.init(chartDom as any);
     option && myChart.setOption(option);
     window.addEventListener('resize', () => {
@@ -176,7 +177,7 @@
   });
 
   watch(currentLocale, (newValue, oldValue) => {
-    const chartDom = document.getElementById('flow');
+    const chartDom = echartsDom.value;
     const myChart = echarts.init(chartDom as any);
     myChart.setOption(option);
   });
diff --git a/packages/toolkits/pro/template/tinyvue/src/views/board/home/components/region.vue b/packages/toolkits/pro/template/tinyvue/src/views/board/home/components/region.vue
index dc31a0d2..3eb91ad1 100644
--- a/packages/toolkits/pro/template/tinyvue/src/views/board/home/components/region.vue
+++ b/packages/toolkits/pro/template/tinyvue/src/views/board/home/components/region.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { onMounted, inject } from 'vue';
+  import { onMounted, inject, ref } from 'vue';
   import RegionTable from './regiontable.vue';
 
   const data = [
@@ -55,6 +55,7 @@
   ];
 
   let echarts = inject<any>('echarts');
+  const echartsDom = ref();
   let options = {
     tooltip: {
       trigger: 'item',
@@ -108,7 +109,7 @@
   };
 
   onMounted(() => {
-    const chartDom = document.getElementById('earth');
+    const chartDom = echartsDom.value;
     const myChart = echarts.init(chartDom as any);
     window.addEventListener('resize', () => {
       myChart.resize();
diff --git a/packages/toolkits/pro/template/tinyvue/src/views/board/home/components/round.vue b/packages/toolkits/pro/template/tinyvue/src/views/board/home/components/round.vue
index 6bc361f4..7f7eeac8 100644
--- a/packages/toolkits/pro/template/tinyvue/src/views/board/home/components/round.vue
+++ b/packages/toolkits/pro/template/tinyvue/src/views/board/home/components/round.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { onMounted, watch, inject } from 'vue';
+  import { onMounted, watch, inject, ref } from 'vue';
   import { useI18n } from 'vue-i18n';
   import useLocale from '@/hooks/locale';
   import RoundTable from './roundtable.vue';
@@ -20,6 +20,7 @@
   const { t } = useI18n();
   const { currentLocale } = useLocale();
   let echarts = inject<any>('echarts');
+  const echartsDom = ref();
 
   let option = {
     tooltip: {
@@ -67,7 +68,7 @@
   };
 
   onMounted(() => {
-    const chartDom = document.getElementById('circled');
+    const chartDom = echartsDom.value;
     const myChart = echarts.init(chartDom as any);
     option && myChart.setOption(option);
     window.addEventListener('resize', () => {
@@ -76,7 +77,7 @@
   });
 
   watch(currentLocale, (newValue, oldValue) => {
-    const chartDom = document.getElementById('circled');
+    const chartDom = echartsDom.value;
     const myChart = echarts.init(chartDom as any);
     myChart.setOption(option);
   });