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

- 修复饼图组件显示问题，取消注释使图表正常显示 - 优化数据处理逻辑，支持问题索引1和2的数据处理 - 移除不必要的响应式包装，直接使用JSON对象提高性能 - 清理未使用的导入和函数，如showToast、surveys等 - 添加对空选项数组的条件判断，避免渲染空数据 - 移除控制台日志输出，提高代码整洁度 - 更新IDE图标主题为material-icon-theme - 优化图表配置结构，简化代码
2025-05-15 17:55:57 +08:00
parent 00cc42d565
commit 304a404eaf
10 changed files with 347 additions and 378 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,77 +1,77 @@
-{
-  "explorer.confirmDelete": false,
-  "editor.fontSize": 16,
-  "workbench.editorAssociations": {
-    "*.ipynb": "jupyter.notebook.ipynb"
-  },
-  "window.zoomLevel": 1,
-  "workbench.iconTheme": "vscode-icons",
-  "prettier.enable": true,
-  "editor.formatOnSave": false,
-  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
-  "typescript.format.insertSpaceBeforeFunctionParenthesis": true,
-  "prettier.singleQuote": true,
-  "emmet.syntaxProfiles": {
-    "vue-html": "html",
-    "vue": "html"
-  },
-  "files.associations": {
-    "*.html": "html",
-    "*.vue": "vue",
-    "*.ejs": "html",
-    "*.js": "javascript"
-  },
-  "vsicons.dontShowNewVersionMessage": true,
-  "autoimport.showNotifications": true,
-  "path-intellisense.mappings": {
-    "@": "${workspaceRoot}/src",
-    "/": "${workspaceRoot}/"
-  },
-  "[html]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "editor.formatOnSave": true
-  },
-  "[vue]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "editor.formatOnSave": true
-  },
-  "css.validate": false, //用来校验CSS文件中的语法错误和潜在的问题
-  "less.validate": false, //用来校验LESS文件中的语法错误和潜在的问题
-  "scss.validate": false, //用来校验SCSS文件中的语法错误和潜在的问题
-  "editor.codeActionsOnSave": {
-    // 用于在保存文件时自动执行代码操作
-    "source.fixAll.eslint": "explicit", // 自动执行ESlint
-    "source.fixAll.stylelint": "explicit" // 自动执行stylelint
-  },
-  "eslint.validate": [
-    "javascript",
-    "javascriptreact",
-    "typescript",
-    "typescriptreact",
-    "html",
-    "markdown",
-    "yaml",
-    "toml",
-    "xml",
-    "gql",
-    "graphql",
-    "astro"
-  ],
-  "eslint.nodePath": "./node_modules/@yl/yili-fe-lint-config/node_modules", // 指定ESLint可执行文件路径
-  "eslint.options": {
-    // 用于配置
-    "overrideConfigFile": "./node_modules/@yl/yili-fe-lint-config/eslintrc.vue3.js" //该选项指定了 ESLint 应使用的配置文件路径。此项设置会覆盖所有其他位置查找的 ESLint 配置文件。
-  },
-  "stylelint.configBasedir": "./node_modules/@yl/yili-fe-lint-config/", //该选项用于定义 Stylelint 配置文件所基于的基础目录。当您的配置文件中使用 extends、plugins 或其他引用时，这个基础目录将作为解析路径的起点
-  "stylelint.configFile": "./node_modules/@yl/yili-fe-lint-config/stylelintrc.js", // 该选项指定了 stylelint 应使用的配置文件路径。此项设置会覆盖所有其他位置查找的 stylelint 配置文件
-  "stylelint.customSyntax": "postcss-scss", // 配置stylelint使用的预处理器
-  "stylelint.stylelintPath": "./node_modules/@yl/yili-fe-lint-config/node_modules/stylelint", // 指定stylelint安装路径
-  "stylelint.validate": [
-    "html",
-    "css",
-    "scss",
-    "less",
-    "vue"
-  ],
-  "typescript.tsdk": "node_modules\\typescript\\lib"
-}
+{
+  "explorer.confirmDelete": false,
+  "editor.fontSize": 16,
+  "workbench.editorAssociations": {
+    "*.ipynb": "jupyter.notebook.ipynb"
+  },
+  "window.zoomLevel": 1,
+  "workbench.iconTheme": "material-icon-theme",
+  "prettier.enable": true,
+  "editor.formatOnSave": false,
+  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
+  "typescript.format.insertSpaceBeforeFunctionParenthesis": true,
+  "prettier.singleQuote": true,
+  "emmet.syntaxProfiles": {
+    "vue-html": "html",
+    "vue": "html"
+  },
+  "files.associations": {
+    "*.html": "html",
+    "*.vue": "vue",
+    "*.ejs": "html",
+    "*.js": "javascript"
+  },
+  "vsicons.dontShowNewVersionMessage": true,
+  "autoimport.showNotifications": true,
+  "path-intellisense.mappings": {
+    "@": "${workspaceRoot}/src",
+    "/": "${workspaceRoot}/"
+  },
+  "[html]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true
+  },
+  "[vue]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true
+  },
+  "css.validate": false, //用来校验CSS文件中的语法错误和潜在的问题
+  "less.validate": false, //用来校验LESS文件中的语法错误和潜在的问题
+  "scss.validate": false, //用来校验SCSS文件中的语法错误和潜在的问题
+  "editor.codeActionsOnSave": {
+    // 用于在保存文件时自动执行代码操作
+    "source.fixAll.eslint": "explicit", // 自动执行ESlint
+    "source.fixAll.stylelint": "explicit" // 自动执行stylelint
+  },
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "html",
+    "markdown",
+    "yaml",
+    "toml",
+    "xml",
+    "gql",
+    "graphql",
+    "astro"
+  ],
+  "eslint.nodePath": "./node_modules/@yl/yili-fe-lint-config/node_modules", // 指定ESLint可执行文件路径
+  "eslint.options": {
+    // 用于配置
+    "overrideConfigFile": "./node_modules/@yl/yili-fe-lint-config/eslintrc.vue3.js" //该选项指定了 ESLint 应使用的配置文件路径。此项设置会覆盖所有其他位置查找的 ESLint 配置文件。
+  },
+  "stylelint.configBasedir": "./node_modules/@yl/yili-fe-lint-config/", //该选项用于定义 Stylelint 配置文件所基于的基础目录。当您的配置文件中使用 extends、plugins 或其他引用时，这个基础目录将作为解析路径的起点
+  "stylelint.configFile": "./node_modules/@yl/yili-fe-lint-config/stylelintrc.js", // 该选项指定了 stylelint 应使用的配置文件路径。此项设置会覆盖所有其他位置查找的 stylelint 配置文件
+  "stylelint.customSyntax": "postcss-scss", // 配置stylelint使用的预处理器
+  "stylelint.stylelintPath": "./node_modules/@yl/yili-fe-lint-config/node_modules/stylelint", // 指定stylelint安装路径
+  "stylelint.validate": [
+    "html",
+    "css",
+    "scss",
+    "less",
+    "vue"
+  ],
+  "typescript.tsdk": "node_modules\\typescript\\lib"
+}
--- a/src/components/Analysis/Index.vue
+++ b/src/components/Analysis/Index.vue
@@ -1,9 +1,6 @@
 <script setup lang="ts">
 import { ref, useTemplateRef } from 'vue';
-import { showToast } from 'vant';
 import { useSetPieChart } from '@/hooks/chart/usePieChart';
-import { surveys } from '@/components/Analysis/hooks/useSurvey';
-import { questionTypeMap } from '@/utils/question/typeMapping';

 // series 信息
 const series = defineModel<any>('series', { required: true });
@@ -19,7 +16,7 @@ useSetPieChart(pieChart, series, { title: false, legend: false });
    <div
      style="display: flex; height: 300px; width: 300px; justify-content: center; margin: 16px 0"
    >
-      <!-- <span ref="pieChart" style="width: 100%; height: 300px"></span> -->
+      <span ref="pieChart" style="width: 100%; height: 300px"></span>
    </div>
  </section>
 </template>
--- a/src/hooks/chart/data/pie.ts
+++ b/src/hooks/chart/data/pie.ts
@@ -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;
--- a/src/hooks/chart/usePieChart.ts
+++ b/src/hooks/chart/usePieChart.ts
@@ -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);
  });
 }

--- a/src/utils/question/typeMapping.ts
+++ b/src/utils/question/typeMapping.ts
@@ -1,7 +1,9 @@
-const map = new Map<number, string>();
-
-map.set(1, '单选题');
-map.set(5, '数值打分题');
-map.set(9, '矩阵单选');
-
-export { map as questionTypeMap };
+const map = new Map<number, string>();
+
+map.set(1, '单选题');
+map.set(2, "多选题")
+map.set(3, "图片上传题")
+map.set(5, '数值打分题');
+map.set(9, '矩阵单选');
+
+export { map as questionTypeMap };
--- a/src/views/Home/Index.vue
+++ b/src/views/Home/Index.vue
@@ -1,105 +1,112 @@
-<script setup>
-import LastSurvey from './components/LastSurvey/Index.vue';
-import Market from './components/Market/Index.vue';
-import CreateSurvey from './components/CreateSurvey/Index.vue';
-import NewSurvey from './components/NewSurvey/index.vue';
-import { onMounted, ref } from 'vue';
-import utils from '@/assets/js/common';
-import { getUserInfo } from '@/api/common/index.js';
-import { showFailToast } from 'vant';
-import appBridge from '@/assets/js/appBridge';
-import ImageSlider from './components/ImageSlider/Index.vue';
-import MineTask from '@/components/Analysis/Index.vue';
-import Navigation from '@/components/Navigation/Index.vue';
-
-const contentShow = ref(false);
-
-onMounted(async () => {
-  if (appBridge.isInReactNative()) {
-    const appToken = utils.getSessionStorage('xToken');
-    getUserInfo(appToken)
-      .then((res) => {
-        if (res.data) {
-          contentShow.value = true;
-          const token = res.data.data.token;
-          localStorage.setItem('plantToken', token);
-          utils.setSessionStorage('userInfo', res.data.data);
-        } else {
-          contentShow.value = false;
-          showFailToast(
-            error.response.data?.message || error.data?.message || error.message || '服务器错误'
-          );
-        }
-      })
-      .catch((error) => {
-        contentShow.value = false;
-        showFailToast(error?.response?.data?.message || error?.message || '服务器错误');
-      });
-  } else {
-    utils.setSessionStorage('xToken', 'f74ba36d7fc3468480648dedba5672ff');
-    contentShow.value = true;
-  }
-});
-</script>
-
-<template>
-  <div v-if="contentShow" class="container-home">
-    <div class="container-body">
-      <!-- 首页轮播图 -->
-      <image-slider />
-      <create-survey :createdNewPage="false" />
-      <!-- 最新问卷 -->
-      <!--<last-survey/>-->
-      <!-- 模板市场 -->
-      <!-- <Market/> -->
-      <!--底部新建问卷-->
-      <NewSurvey />
-
-      <!-- <mine-task /> -->
-
-      <navigation />
-    </div>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.container-home {
-  overflow: hidden;
-  width: 100%;
-
-  //background: #f2f2f2;
-  //position: relative;
-
-  .home-pen {
-    //height: 200px;
-    position: absolute;
-    top: -10px;
-    left: 0;
-    z-index: 8;
-
-    //width: 100%;
-    background: #fff;
-
-    //background: linear-gradient(180deg, rgba(242, 242, 242, 0) 0%, #ebffe9 100%);
-    img {
-      width: 100%;
-
-      //height: 200px;
-    }
-  }
-}
-
-.container-body {
-  padding: 0 10px 80px;
-
-  & > :first-child {
-    & > div {
-      display: flex;
-      flex-direction: column;
-      width: 50px;
-      height: 50px;
-      margin: 10px;
-    }
-  }
-}
-</style>
+<script setup>
+import LastSurvey from './components/LastSurvey/Index.vue';
+import Market from './components/Market/Index.vue';
+import CreateSurvey from './components/CreateSurvey/Index.vue';
+import NewSurvey from './components/NewSurvey/index.vue';
+import { onMounted, ref } from 'vue';
+import utils from '@/assets/js/common';
+import { getUserInfo } from '@/api/common/index.js';
+import { showFailToast } from 'vant';
+import appBridge from '@/assets/js/appBridge';
+import ImageSlider from './components/ImageSlider/Index.vue';
+import SearchBar from '@/components/Search/Index.vue';
+import Navigation from '@/components/Navigation/Index.vue';
+import router from '@/router';
+
+const contentShow = ref(false);
+
+onMounted(async () => {
+  if (appBridge.isInReactNative()) {
+    const appToken = utils.getSessionStorage('xToken');
+    getUserInfo(appToken)
+      .then((res) => {
+        if (res.data) {
+          contentShow.value = true;
+          const token = res.data.data.token;
+          localStorage.setItem('plantToken', token);
+          utils.setSessionStorage('userInfo', res.data.data);
+        } else {
+          contentShow.value = false;
+          showFailToast(
+            error.response.data?.message || error.data?.message || error.message || '服务器错误'
+          );
+        }
+      })
+      .catch((error) => {
+        contentShow.value = false;
+        showFailToast(error?.response?.data?.message || error?.message || '服务器错误');
+      });
+  } else {
+    utils.setSessionStorage('xToken', 'f74ba36d7fc3468480648dedba5672ff');
+    contentShow.value = true;
+  }
+});
+
+function handleSearchClick() {
+  router.push({ name: 'search' });
+}
+</script>
+
+<template>
+  <div v-if="contentShow" class="container-home">
+    <div class="container-body">
+      <!-- 搜索栏 -->
+      <search-bar @click="handleSearchClick" />
+      <!-- 首页轮播图 -->
+      <image-slider />
+      <create-survey :createdNewPage="false" />
+      <!-- 最新问卷 -->
+      <!--<last-survey/>-->
+      <!-- 模板市场 -->
+      <!-- <Market/> -->
+      <!--底部新建问卷-->
+      <NewSurvey />
+
+      <!-- <mine-task /> -->
+
+      <navigation />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.container-home {
+  overflow: hidden;
+  width: 100%;
+
+  //background: #f2f2f2;
+  //position: relative;
+
+  .home-pen {
+    //height: 200px;
+    position: absolute;
+    top: -10px;
+    left: 0;
+    z-index: 8;
+
+    //width: 100%;
+    background: #fff;
+
+    //background: linear-gradient(180deg, rgba(242, 242, 242, 0) 0%, #ebffe9 100%);
+    img {
+      width: 100%;
+
+      //height: 200px;
+    }
+  }
+}
+
+.container-body {
+  padding: 0 10px 80px;
+
+  & > :first-child {
+    & > div {
+      display: flex;
+      flex-direction: column;
+      width: 50px;
+      height: 50px;
+      margin: 10px;
+    }
+  }
+}
+</style>
--- a/src/views/Survey/hooks/useSurveyData.ts
+++ b/src/views/Survey/hooks/useSurveyData.ts
@@ -1,117 +1,109 @@
-import {
-  getSurveysPage, deleteSurveys,
-  saveTemplates
-} from '@/api/home';
-import { ref } from 'vue';
-import {
-  showDialog,
-  showConfirmDialog,
-  showFailToast,
-  showToast
-} from 'vant';
-import { getSurveysDetail } from '@/api/design';
-
-const form = ref({
-  page: 0,
-  pageSize: 10,
-  project_name: ''
-});
-
-const searchValue = ref('');
-const survey = ref<SurveyItem[]>([]);
-const total = ref(0);
-const loading = ref(false);
-const finished = ref(false);
-const currentSurvey = ref<SurveyItem>();
-
-async function fetchSingleSurvey(sn: string) {
-  const res = await getSurveysDetail(sn);
-  // console.log(res);
-  if (res.data.code === 0) {
-    currentSurvey.value = res.data.data;
-  }
-}
-
-async function fetchSurveys() {
-  const params = {
-    page: form.value.page,
-    per_page: form.value.pageSize,
-    group_id: 0,
-    project_name: searchValue.value
-  };
-  const res = await getSurveysPage(params);
-  if (res.data.code === 0) {
-    survey.value = survey.value.concat(res.data.data);
-    total.value = res.data.meta.total;
-    survey.value.forEach((item) => {
-      const sceneName = JSON.parse(JSON.stringify(item.scene_name));
-      const nameList = sceneName.split('-');
-      if (nameList.length > 0) {
-        item.scene_name = nameList[1] ? nameList[1] : nameList[0];
-      }
-
-      const timeList = item.created_at.split(' ');
-      if (nameList.length) {
-        item.created_at = timeList[0];
-      }
-    });
-    loading.value = false;
-    // 数据全部加载完成
-    if (survey.value.length >= total.value) {
-      finished.value = true;
-    }
-  } else {
-    // Toast()
-  }
-}
-
-function deleteItem(item: SurveyItem) {
-  showDialog({
-    title: `确认删除问卷${item.project_name} ?`,
-    showCancelButton: true,
-    confirmButtonColor: '#03B03C'
-  })
-    .then(async () => {
-      const res = await deleteSurveys(item.sn);
-      if (res.data.message) {
-        showToast(res.data.message);
-      } else {
-        showToast('删除成功！');
-      }
-      form.value.page = 1;
-      survey.value = [];
-      await fetchSurveys();
-    })
-    .catch(() => {
-      // on cancel
-    });
-};
-
-// 保存为模板
-async function saveTemplate(item: SurveyItem) {
-  const data = JSON.parse(JSON.stringify(item));
-  const res = await saveTemplates(item.sn, data);
-  if (res.data.code === 200 || res.data.code === 201) {
-    showConfirmDialog({
-      message: '模板保存成功，请前往模板市场查看！',
-      showCancelButton: false
-    });
-  } else {
-    showFailToast(res.data);
-  }
-}
-
-export {
-  form,
-  fetchSurveys,
-  loading,
-  finished,
-  survey,
-  total,
-  searchValue,
-  deleteItem,
-  saveTemplate,
-  currentSurvey,
-  fetchSingleSurvey
-}
-  ;
+import { getSurveysPage, deleteSurveys, saveTemplates } from '@/api/home';
+import { ref } from 'vue';
+import { showDialog, showConfirmDialog, showFailToast, showToast } from 'vant';
+import { getSurveysDetail } from '@/api/design';
+
+const form = ref({
+  page: 0,
+  pageSize: 10,
+  project_name: ''
+});
+
+const searchValue = ref('');
+const survey = ref<SurveyItem[]>([]);
+const total = ref(0);
+const loading = ref(false);
+const finished = ref(false);
+const currentSurvey = ref<SurveyItem>();
+
+async function fetchSingleSurvey(sn: string) {
+  const res = await getSurveysDetail(sn);
+  // console.log(res);
+  if (res.data.code === 0) {
+    currentSurvey.value = res.data.data;
+  }
+}
+
+async function fetchSurveys() {
+  const params = {
+    page: form.value.page,
+    per_page: form.value.pageSize,
+    group_id: 0,
+    project_name: searchValue.value
+  };
+  const res = await getSurveysPage(params);
+  if (res.data.code === 0) {
+    survey.value = survey.value.concat(res.data.data);
+    total.value = res.data.meta.total;
+    survey.value.forEach((item) => {
+      const sceneName = JSON.parse(JSON.stringify(item.scene_name));
+
+      const nameList = sceneName ? sceneName.split('-') : [];
+      if (nameList.length > 0) {
+        item.scene_name = nameList[1] ? nameList[1] : nameList[0];
+      }
+
+      const timeList = item.created_at.split(' ');
+      if (nameList.length) {
+        item.created_at = timeList[0];
+      }
+    });
+    loading.value = false;
+    // 数据全部加载完成
+    if (survey.value.length >= total.value) {
+      finished.value = true;
+    }
+  } else {
+    // Toast()
+  }
+}
+
+function deleteItem(item: SurveyItem) {
+  showDialog({
+    title: `确认删除问卷${item.project_name} ?`,
+    showCancelButton: true,
+    confirmButtonColor: '#03B03C'
+  })
+    .then(async () => {
+      const res = await deleteSurveys(item.sn);
+      if (res.data.message) {
+        showToast(res.data.message);
+      } else {
+        showToast('删除成功！');
+      }
+      form.value.page = 1;
+      survey.value = [];
+      await fetchSurveys();
+    })
+    .catch(() => {
+      // on cancel
+    });
+}
+
+// 保存为模板
+async function saveTemplate(item: SurveyItem) {
+  const data = JSON.parse(JSON.stringify(item));
+  const res = await saveTemplates(item.sn, data);
+  if (res.data.code === 200 || res.data.code === 201) {
+    showConfirmDialog({
+      message: '模板保存成功，请前往模板市场查看！',
+      showCancelButton: false
+    });
+  } else {
+    showFailToast(res.data);
+  }
+}
+
+export {
+  form,
+  fetchSurveys,
+  loading,
+  finished,
+  survey,
+  total,
+  searchValue,
+  deleteItem,
+  saveTemplate,
+  currentSurvey,
+  fetchSingleSurvey
+};
--- a/src/views/Survey/views/Analysis/Index.vue
+++ b/src/views/Survey/views/Analysis/Index.vue
@@ -17,6 +17,8 @@ const route = useRoute();
 * 如果当前问卷的数据不存在，重新获取数据
 */
 if (!currentSurvey.value) fetchSingleSurvey(route.query.sn as string);
+// 重置 message 信息
+aiInsightsConfig.value.message = '';

 useFetchAnalysis(route.query.sn as string);
 </script>
@@ -45,7 +47,7 @@ useFetchAnalysis(route.query.sn as string);
      </template>
    </van-cell>

-    <van-cell v-if="aiInsightsConfig.message.length > 0" class="ai-insight">
+    <van-cell v-if="aiInsightsConfig.message.length > 0" class="ai-insight" :key="route">
      <template #extra>
        <!--  ai 洞察部分内容  -->
        <div v-html="aiInsightsConfig.message" />
--- a/src/views/Survey/views/Analysis/components/AnalysisInfo/Index.vue
+++ b/src/views/Survey/views/Analysis/components/AnalysisInfo/Index.vue
@@ -1,19 +1,23 @@
-<template>
-  <div>
-    <section v-for="analysis in questionAnalysis" :key="analysis.stem">
-      <el-tag>{{ questionTypeMap.get(analysis.question_type as number) }}</el-tag>
-      {{ analysis.stem }}
-
-      <chart-msg :series="formatData(analysis)" />
-    </section>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { questionAnalysis } from '../../hooks/useAnalysis';
-import { questionTypeMap } from '@/utils/question/typeMapping';
-import ChartMsg from '@/components/Analysis/Index.vue';
-import { formatData, series } from './hooks/pieSeries';
-
-console.log(`question analysis info`, questionAnalysis.value);
-</script>
+<template>
+  <div>
+    <section
+      v-for="analysis in questionAnalysis"
+      :key="analysis.stem"
+      v-if="analysis?.option.length"
+    >
+      <el-tag>{{ questionTypeMap.get(analysis.question_type as number) }}</el-tag>
+      {{ analysis.stem }}
+
+      <chart-msg :series="formatData(analysis)" />
+
+      {{ analysis }}
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { questionAnalysis } from '../../hooks/useAnalysis';
+import { questionTypeMap } from '@/utils/question/typeMapping';
+import ChartMsg from '@/components/Analysis/Index.vue';
+import { formatData } from './hooks/pieSeries';
+</script>
--- a/src/views/Survey/views/Analysis/components/AnalysisInfo/hooks/pieSeries.ts
+++ b/src/views/Survey/views/Analysis/components/AnalysisInfo/hooks/pieSeries.ts
@@ -23,12 +23,12 @@ export const series = ref({
 });

 export function formatData(data: any) {
-  const _series = ref(JSON.parse(JSON.stringify(series.value)));
+  const _series = JSON.parse(JSON.stringify(series.value));

  // 当内容为单选的时候处理方式
-  if (data.question_index === 2) {
+  if (data.question_index === 2 || data.question_index === 1) {
    const { option } = data;
-    _series.value.data = option.map((item: any) => {
+    _series.data = option.map((item: any) => {
      return {
        value: item.number,
        name: item.title