feat: 优化问卷分析图表展示功能
- 修复饼图组件显示问题,取消注释使图表正常显示 - 优化数据处理逻辑,支持问题索引1和2的数据处理 - 移除不必要的响应式包装,直接使用JSON对象提高性能 - 清理未使用的导入和函数,如showToast、surveys等 - 添加对空选项数组的条件判断,避免渲染空数据 - 移除控制台日志输出,提高代码整洁度 - 更新IDE图标主题为material-icon-theme - 优化图表配置结构,简化代码
This commit is contained in:
@@ -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;
|
||||
@@ -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);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user