From 0aaa351e6a8c2e760fbc406740ddc07757458b52 Mon Sep 17 00:00:00 2001 From: Kagol <kagol@sina.com> Date: Tue, 2 Apr 2024 22:31:02 +0800 Subject: [PATCH] fix(vue-pro): fix echarts dom is null on the home page (#129) --- .../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); });