fix(Analysis): 修复饼图数据展示问题

- 调整饼图数据处理逻辑,确保空数据不被展示
-优化 NPS 和 5 点量表的饼图数据处理方式
- 使用 nextTick 确保图表在数据更新后正确渲染
This commit is contained in:
Huangzhe
2025-05-27 18:11:04 +08:00
parent 3f0bc59a0a
commit 079a589510

View File

@@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, ref, useTemplateRef, watch } from 'vue'; import { computed, nextTick, ref, useTemplateRef, watch } from 'vue';
import { useSetPieChart } from '@/hooks/chart/usePieChart'; import { useSetPieChart } from '@/hooks/chart/usePieChart';
import { import {
formatData, formatData,
@@ -11,6 +11,7 @@ import EmptyContainer from '@/views/Survey/components/EmptyContainer.vue';
const tableData = ref([]); const tableData = ref([]);
const analysis = defineModel<any>('analysis'); const analysis = defineModel<any>('analysis');
const pieChart = useTemplateRef<HTMLSpanElement>('pieChart');
// series 信息 // series 信息
const series = ref([]); const series = ref([]);
const dimension = defineModel('dimension'); const dimension = defineModel('dimension');
@@ -50,10 +51,12 @@ watch(
series.value = formatData(dimension.value ? tableData.value : analysis.value, index.value); series.value = formatData(dimension.value ? tableData.value : analysis.value, index.value);
// console.log(`series value`, series.value); // console.log(`series value`, series.value);
const pieChart = useTemplateRef<HTMLSpanElement>('pieChart'); if (!series.value.data?.length) return;
console.log(`series.value.data`, series.value.data);
if (!series.value?.data?.length) return; nextTick(() => {
useSetPieChart(pieChart, series, { title: false, legend: false }); useSetPieChart(pieChart, series, { title: false, legend: false });
});
}, },
{ immediate: true } { immediate: true }
); );
@@ -94,6 +97,15 @@ const chartVisible = computed(() => {
// return true; // return true;
// } // }
// }); // });
} else if (analysis.value.question_type === 106 || analysis.value.question_type === 5) {
const data = series.value?.data as { name: any; value: any }[];
console.log(`series.value on nps`, series.value?.data);
const filterData = data.filter((item) => item.value && Number(item.value) > 0);
console.log(`filterData`, filterData);
return filterData.length;
// console.log(`series.value on nps`, series.value?.data);
} }
return series.value?.data?.length; return series.value?.data?.length;