fix: echarts can't get dom size

chatpire · Dec 10, 2023 · b4ec95e · b4ec95e
1 parent d79ab04
commit b4ec95e
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 12 deletions.
diff --git a/frontend/src/views/admin/components/charts/AskChart.vue b/frontend/src/views/admin/components/charts/AskChart.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="pr-4">
- <v-chart class="h-100" :option="option" :loading="props.loading" />
+ <v-chart ref="chartRef" class="h-100" :option="option" :loading="props.loading" />
  </div>
 </template>
 
@@ -19,7 +19,7 @@ import {
 } from 'echarts/components';
 import { use } from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
-import { computed, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import VChart from 'vue-echarts';
 import { useI18n } from 'vue-i18n';
 
@@ -43,6 +43,8 @@ use([
  BrushComponent,
 ]);
 
+const chartRef = ref<InstanceType<typeof VChart>>();
+
 const props = defineProps<{
  loading: boolean;
  askStats: AskLogAggregation[];
@@ -343,12 +345,7 @@ const option = computed<EChartsOption>(() => {
  } as EChartsOption;
 });
 
-// watchEffect(() => {
-console.log('props', props.askStats);
-// console.log('xAxis', xAxis.value);
-// console.log('totalRequestsCountData', totalRequestsCountData.value);
-// console.log('datasetSource', datasetSource.value);
-// console.log('users', props.users)
-// console.log('option', option.value);
-// });
+onMounted(() => {
+ chartRef.value?.resize();
+});
 </script>
diff --git a/frontend/src/views/admin/components/charts/RequestsChart.vue b/frontend/src/views/admin/components/charts/RequestsChart.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="pr-4">
- <v-chart class="h-35" :option="option" :loading="props.loading" />
+ <v-chart ref="chartRef" class="h-35" :option="option" :loading="props.loading" />
  </div>
 </template>
 
@@ -20,7 +20,7 @@ import {
 } from 'echarts/components';
 import { use } from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
-import { computed, ref, watchEffect } from 'vue';
+import { computed, onMounted, ref, watchEffect } from 'vue';
 import VChart from 'vue-echarts';
 import { useI18n } from 'vue-i18n';
 
@@ -55,6 +55,8 @@ const props = defineProps<{
  users?: UserRead[];
 }>();
 
+const chartRef = ref<InstanceType<typeof VChart>>();
+
 const findUsername = (user_id: number) => {
  const user = props.users?.find((u) => u.id === user_id);
  return user?.username || user_id;
@@ -278,4 +280,8 @@ watchEffect(() => {
  // console.log('users', props.users)
  console.log('option', option.value);
 });
+
+onMounted(() => {
+ chartRef.value?.resize();
+});
 </script>