feat: 优化问卷分析图表展示功能

- 修复饼图组件显示问题,取消注释使图表正常显示
- 优化数据处理逻辑,支持问题索引1和2的数据处理
- 移除不必要的响应式包装,直接使用JSON对象提高性能
- 清理未使用的导入和函数,如showToast、surveys等
- 添加对空选项数组的条件判断,避免渲染空数据
- 移除控制台日志输出,提高代码整洁度
- 更新IDE图标主题为material-icon-theme
- 优化图表配置结构,简化代码
This commit is contained in:
Huangzhe
2025-05-15 17:55:57 +08:00
parent 00cc42d565
commit 304a404eaf
10 changed files with 347 additions and 378 deletions

View File

@@ -1,5 +1,3 @@
import { ref } from 'vue';
const option = {
// title: {
// text: 'Referer of a Website',
@@ -36,13 +34,4 @@ const option = {
]
};
export const pieOption = ref<Partial<typeof option>>(option);
// 删除左侧的预览图
export function deleteLegend() {
delete pieOption.value.legend;
}
export function deleteTitle() {
delete pieOption.value.title;
}
export const pieOption = option;

View File

@@ -1,60 +1,36 @@
import { onMounted, ref, type ShallowRef, watch } from 'vue';
import type { ECOption } from '@/utils/echarts';
import { chart } from '@/utils/echarts';
import { deleteLegend, deleteTitle } from './data/pie';
import { pieOption } from './data/pie';
type dataOption = Partial<ECOption['data']>;
/**
* 饼图的 option
*/
// const option = ref(pieOption);
function useSetPieChart(
dom: Readonly<ShallowRef<HTMLSpanElement | null>>,
series: any,
opts: optsType = {}
): void {
// 图表实例
let pieChart: any;
let chartInstance: any;
// 检测边界范围 dom 和 data 是否存在
onMounted(() => {
if (!dom.value) {
console.error('饼图DOM元素不存在');
return;
}
// 检测边界范围 dom 和 series 是否存在
if (!dom.value && !series) return;
// 在 dom 挂载之后,显示饼图
pieChart = chart.init(dom.value);
chartInstance = chart.init(dom.value);
pieOption.series = JSON.parse(JSON.stringify(series.value));
if (series.value) {
// 创建完整的配置对象
const fullOption = {
series: [
{
type: 'pie',
radius: '50%',
data: series.value.data || []
}
]
};
// 设置图表选项
pieChart.setOption(fullOption, opts);
// 强制重绘以确保显示
setTimeout(() => {
pieChart.resize();
}, 100);
} else {
console.error('饼图数据不存在');
}
// 设置图表选项
chartInstance.setOption(pieOption, opts);
});
// 如果 data 变动重新生成图表w
watch(series, (value) => {
pieChart.value.setOption(value, opts);
chartInstance.setOption(value, opts);
});
}