refactor(chart): 优化饼图组件功能和样式

- 修复饼图数据为空时的显示问题
- 优化饼图 tooltip格式化内容
-调整饼图图例和标签样式
- 优化表格组件，支持图片预览功能

src/components/Analysis/Index.vue

@@ -58,7 +58,11 @@ watch(
 
 const changeChart = (i: number) => {
   index.value = i;
+
   series.value = formatData(tableData.value, index.value);
+  if (series.value.data.length <= 0) {
+    series.value.data = [{ value: 0, name: 0 }];
+  }
   // const pieChart = useTemplateRef<HTMLSpanElement>('pieChart');
   // useSetPieChart(pieChart, series, { title: false, legend: false });
 };
@@ -66,13 +70,13 @@ const changeChart = (i: number) => {
 
 <template>
   <section>
-    <!-- <div v-if="dimension">
-      <van-radio-group v-model="index" @change="changeChart">
-        <van-radio v-for="(item, index) in tableData.option" :name="index">{{
+    <div v-if="dimension" style="margin: 10px 0">
+      <van-radio-group v-model="index" @change="changeChart" direction="horizontal">
+        <van-radio v-for="(item, index) in tableData.option" icon-size="0.45rem" :name="index">{{
           item.option
         }}</van-radio>
       </van-radio-group>
-    </div> -->
+    </div>
 
     <!-- 图表部分 -->
     <div

src/components/YlTable/Index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { type ColumnStyle } from 'element-plus';
-
+import { showImagePreview } from 'vant';
 const data = defineModel<unknown[]>('data', { default: [] });
 const props = defineModel<TablePropsType[]>('props');
 
@@ -27,6 +27,25 @@ function setStripeColor(rowData: { row: any; rowIndex: number }): string {
   const { rowIndex } = rowData;
   return rowIndex % 2 === 0 ? 'even-row' : 'odd-row';
 }
+function parseTableText(text: string): string {
+  const imgReg = /<img.*?>/g;
+  const imgArr = text.match(imgReg);
+  if (imgArr && imgArr.length > 0) {
+    return imgArr.join('');
+  }
+  return text;
+}
+
+function handleImageClick(e: Event) {
+  console.log(e);
+  if (e.target instanceof HTMLImageElement) {
+    const imgSrc = e.target.src;
+    showImagePreview({
+      images: [imgSrc],
+      closeable: true
+    });
+  }
+}
 </script>
 
 <template>
@@ -45,11 +64,26 @@ function setStripeColor(rowData: { row: any; rowIndex: number }): string {
         :prop="item.prop"
         :label="item.label"
         show-overflow-tooltip
-      />
+      >
+        <template #default="scope">
+          <div
+            class="table-view-html"
+            v-html="scope.row[item.prop]"
+            @click.native="handleImageClick"
+          ></div>
+        </template>
+      </el-table-column>
     </el-table>
   </div>
 </template>
-
+<style>
+.table-view-html {
+  & img {
+    width: 50px;
+    height: 100%;
+  }
+}
+</style>
 <style lang="scss" scoped module="table">
 :deep(.even-row) {
   background-color: white;

src/hooks/chart/data/pie.ts

@@ -9,12 +9,29 @@ const option = {
   // tooltip: {
   //   trigger: 'item'
   // },
+  tooltip: {
+    trigger: 'item',
+    formatter: (p) => {
+      console.log(p);
+      switch (p.data.questionItem.question_type) {
+        case 1:
+        case 2:
+          return `${p.data.name}: ${p.data.value} ${p.data.answerRate ? '(' + p.data.answerRate + ')' : ''}`;
+        case 10:
+        case 9:
+          return `${p.data.name}: ${p.data.value} ${p.data.answerRate ? '(' + p.data.answerRate + ')' : ''}`;
+        case 5:
+        case 106:
+          return `${p.data.avg ? '平均值<br>' : ''} ${p.data.name}: ${p.data.value}`;
+      }
+    }
+  },
   legend: {
     // orient: 'horizontal',
     bottom: 'top'
   },
   label: {
-    // formatter: '{b},{c}'
+    formatter: '{b},{c}'
   },
   series: [
     {

src/hooks/chart/usePieChart.ts

@@ -29,8 +29,6 @@ function useSetPieChart(
 
   // 如果 data 变动，重新生成图表w
   watch(series, (value) => {
-    console.log(value);
-
     const currentOptions = chartInstance.getOption();
 
     // 合并新的 series 数据到现有配置中

src/views/Survey/views/Analysis/components/AnalysisInfo/hooks/pieSeries.ts

@@ -28,8 +28,10 @@ export function formatData(data: any, index: number) {
     const { option } = data;
     _series.data = option.map((item: any) => {
       return {
+        ...item,
         value: item.number,
-        name: item.title
+        name: item.title,
+        questionItem: { ...data }
       };
     });
   }
@@ -40,7 +42,12 @@ export function formatData(data: any, index: number) {
     data.question_type === 10
   ) {
     const copyData = setDimensionData(data);
-    _series.data = copyData[index ? index : 0];
+    _series.data = copyData[index ? index : 0].map((item) => {
+      return {
+        ...item,
+        questionItem: { ...data }
+      };
+    });
   }
 
   // console.log(`series value is :`, _series);
@@ -78,11 +85,11 @@ export function setDimensionData(data) {
       if (keys !== 'option' && keys !== 'avg' && item[keys] != 0) {
         obj.name = data.head.find((head: any) => head.key === keys)?.title;
         obj.value = item[keys];
+        obj.avg = item.avg;
 
         array.push(obj);
       }
     }
-
     return array;
   });
 }