✨ feat<TopSearchTerm Table/Rank>: 增加表格列和rank图标维度

src/views/searchTerm/topSearchTermRank/column-chart.vue

@@ -10,14 +10,14 @@ import * as echarts from 'echarts';
 
 const props = defineProps({
   rowData: {
-    type: Array as PropType<{ [key: string]: number }[]>,
+    type: Object,
     required: true,
   },
 });
 
 const chartRef = ref<HTMLElement | null>(null);
 let chart: echarts.ECharts | null = null;
-let resizeObserver: ResizeObserver | null = null
+let resizeObserver: ResizeObserver | null = null;
 
 onMounted(() => {
   initChart();
@@ -26,28 +26,29 @@ onMounted(() => {
 onUnmounted(() => {
   // 清理 ResizeObserver
   if (resizeObserver) {
-    resizeObserver.disconnect()
+    resizeObserver.disconnect();
   }
   if (chart) {
-    chart.dispose()
-    chart = null
+    chart.dispose();
+    chart = null;
   }
-})
+});
 
 watch(
-    () => props.rowData,
-    () => {
-      updateChart();
-    },
-    { immediate: true, deep: true }
+  () => props.rowData,
+  () => {
+    updateChart();
+  },
+  { immediate: true, deep: true }
 );
 
 function updateChart() {
-  if (!chart || !props.rowData || props.rowData.length === 0) return;
+  if (!chart || !props.rowData) return;
 
-  const data = props.rowData[0];
-  const dates = Object.keys(data);
-  const values = Object.values(data);
+  const dates = Object.keys(props.rowData.searchFrequencyRank[0]);
+  const searchFrequencyValues = Object.values(props.rowData.searchFrequencyRank[0]);
+  const clickShareValues = Object.values(props.rowData.clickShare[0]);
+  const conversionShareValues = Object.values(props.rowData.conversionShare[0]);
 
   const option: echarts.EChartsOption = {
     xAxis: {
@@ -58,17 +59,85 @@ function updateChart() {
         interval: 0,
       },
     },
-    yAxis: {
-      type: 'value',
-    },
+    yAxis: [
+      {
+        id: 0,
+        type: 'value',
+        name: 'Search Frequency Rank',
+        nameTextStyle: {
+          fontWeight: 'bold',
+          fontSize: 14,
+          color: '#333'
+        },
+        splitLine: {
+          show: true, // 设置显示分割线
+        },
+      },
+      {
+        id: 1,
+        type: 'value',
+        name: 'Share Rate',
+        nameTextStyle: {
+          fontWeight: 'bold',
+          fontSize: 14,
+          color: '#333'
+        },
+        position: 'right',
+        splitLine: {
+          show: false, // 设置显示分割线
+        },
+        axisLabel: {
+          formatter: '{value}%',
+        },
+        // axisLine: {
+        //   show: true,
+        // },
+        // show: true,
+      },
+    ],
     series: [
       {
-        data: values,
+        name: 'Search Frequency Rank',
+        data: searchFrequencyValues,
+        type: 'bar',
+        barWidth: '18px',
+        itemStyle: {
+          color: '',
+          borderRadius: [4, 4, 4, 4],
+        },
+        yAxisIndex: 0,
+      },
+      {
+        name: 'Click Share',
+        data: clickShareValues,
         type: 'line',
+        yAxisIndex: 1,
+      },
+      {
+        name: 'Conversion Share',
+        data: conversionShareValues,
+        type: 'line',
+        yAxisIndex: 1,
       },
     ],
     tooltip: {
       trigger: 'axis',
+      formatter: function(params) {
+        let result = params[0].axisValueLabel + '<br/>';
+        params.forEach(param => {
+          let value = param.value;
+          if (param.seriesName === 'Click Share' || param.seriesName === 'Conversion Share') {
+            value = value + '%';
+          } else if (param.seriesName === 'Search Frequency Rank') {
+            value = value.toLocaleString(); // 使用逗号分隔
+          }
+          result += param.marker + ' ' + param.seriesName + ': ' + value + '<br/>';
+        });
+        return result;
+      }
+    },
+    legend: {
+      data: ['Search Frequency Rank', 'Click Share', 'Conversion Share'],
     },
   };
   chart.setOption(option);
@@ -81,11 +150,11 @@ function initChart() {
 
     // 创建 ResizeObserver
     resizeObserver = new ResizeObserver(() => {
-      chart?.resize()
-    })
+      chart?.resize();
+    });
 
     // 观察 chartRef 元素
-    resizeObserver.observe(chartRef.value)
+    resizeObserver.observe(chartRef.value);
   }
 }
 </script>

src/views/searchTerm/topSearchTermRank/index.vue

@@ -210,7 +210,7 @@ function handleJump() {
               <span>Tendency</span>
             </template>
             <template #default="{ row }">
-              <ColumnChart :rowData="row.rank" />
+              <ColumnChart :rowData="row" />
             </template>
           </el-table-column>
         </el-table>

src/views/searchTerm/topSearchTermTable/index.vue

@@ -212,7 +212,7 @@ function getTagStyle(clickShareRank: number): Record<string, string> {
 
 function arraySpanMethod({ row, column, rowIndex, columnIndex }) {
   // 每三个合并为一个单元格
-  if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
+  if (columnIndex >= 0 && columnIndex <= 4) {
     if (rowIndex % 3 === 0) {
       return [3, 1]; // 跨越三行
     } else {
@@ -350,6 +350,30 @@ function arraySpanMethod({ row, column, rowIndex, columnIndex }) {
               <span class="font-medium">{{ row.searchFrequencyRank }}</span>
             </template>
           </el-table-column>
+
+          <el-table-column prop="clickShareSummary" label="点击分享率(SUM)" align="center" width="150">
+            <template #header>
+              <el-icon style="top: 2px; margin-right: 4px">
+                <Star />
+              </el-icon>
+              <span>点击分享率汇总</span>
+            </template>
+            <template #default="{ row }">
+              <span class="font-medium">{{ row.clickShareSummary }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="conversionShareSummary" label="转化分享率(SUM)" align="center" width="150">
+            <template #header>
+              <el-icon style="top: 2px; margin-right: 4px">
+                <Star />
+              </el-icon>
+              <span>转化分享率汇总</span>
+            </template>
+            <template #default="{ row }">
+              <span class="font-medium">{{ row.conversionShareSummary }}</span>
+            </template>
+          </el-table-column>
+
           <el-table-column prop="clickedAsin" label="Asin" align="center">
             <template #header>
               <el-icon style="top: 2px; margin-right: 5px">