fix(vue-pro): fix echarts dom is null on the home page (#129)

Author: kagol

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'];

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);
   });

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();

packages/toolkits/pro/template/tinyvue/src/views/board/home/components/round.vue

@@ -12,14 +12,15 @@
 </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';
 
   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);
   });