✨ feat: 搜索词-分析页词云图功能优化

src/views/searchTerm/analysisPage/WordCloud.vue

@@ -14,8 +14,8 @@ const filter = inject<Ref>('filter');
 const loading = ref(false);
 
 const wordCloudFilter = reactive({
-  typeSelect1: 'positive',
-  typeSelect2: 'Impressions_Total_Count',
+  typeSelect: 'positive',
+  metricSelect: 'Impressions_Total_Count',
 });
 
 let responseData = null;
@@ -45,7 +45,7 @@ async function fetchWordCloudData() {
   const query = {
     layer_type: filter.value.layerType,
     report_range: filter.value.reportType,
-    searchTerm_type: wordCloudFilter.typeSelect1,
+    searchTerm_type: wordCloudFilter.typeSelect,
   };
   try {
     responseData = await api.getWordCloudData(query);
@@ -58,45 +58,8 @@ async function fetchWordCloudData() {
       return;
     }
     hasData.value = true;
-
-    const selectedMetric = wordCloudFilter.typeSelect2;
-    // 生成词云数据
-    const wordCloudData = responseData.data.map((item) => ({
-      name: item.root_search_term,
-      value: item[selectedMetric],
-    }));
-
-    let option = {
-      title: {
-        text: '搜索词词云图',
-      },
-      tooltip: {
-        show: true,
-      },
-      series: [
-        {
-          type: 'wordCloud',
-          // 词云图的形状
-          shape: 'circle', // 可以是 'circle', 'cardioid', 'diamond', 'triangle-forward', 'triangle', 'pentagon', 'star'
-          // 控制字体大小
-          sizeRange: [12, 45],
-          // 文本旋转角度
-          rotationRange: [-90, 90],
-          data: wordCloudData,
-          emphasis: {
-            focus: 'self', // 聚焦悬浮项
-            textStyle: {
-              fontSize: 50, // 放大效果的字体大小
-            },
-          },
-        },
-      ],
-      backgroundColor: '#fff',
-    };
-    // console.log('selectedMetric', selectedMetric)
-
-    console.log('wordCloudData', wordCloudData);
-    initChart(option);
+    setOption();
+    // initChart(option);
   } catch (error) {
     console.error('==Error==', error);
   } finally {
@@ -104,34 +67,18 @@ async function fetchWordCloudData() {
   }
 }
 
-function initChart(opt: echarts.EChartsCoreOption) {
-  if (!chart) {
-    chart = echarts.init(chartRef.value);
-  }
-  chart.setOption(opt);
-
-  // 添加 ResizeObserver 以处理图表大小变化
-  if (!resizeObserver) {
-    resizeObserver = new ResizeObserver(() => {
-      chart?.resize();
-    });
-    resizeObserver.observe(chartRef.value);
-  }
-}
-
-function handleSelectChange() {
-  fetchWordCloudData();
-}
-
-function changeChart() {
-  const selectedMetric = wordCloudFilter.typeSelect2;
+function setOption() {
   // 生成词云数据
+  const selectedMetric = wordCloudFilter.metricSelect;
   const wordCloudData = responseData.data.map((item) => ({
     name: item.root_search_term,
     value: item[selectedMetric],
   }));
 
-  let option = {
+  const option = {
+    title: {
+      text: '搜索词词云图',
+    },
     tooltip: {
       show: true,
     },
@@ -156,7 +103,26 @@ function changeChart() {
     backgroundColor: '#fff',
   };
 
-  initChart(option);
+  if (!chart) {
+    chart = echarts.init(chartRef.value);
+  }
+  chart.setOption(option);
+
+  // 添加 ResizeObserver 以处理图表大小变化
+  if (!resizeObserver) {
+    resizeObserver = new ResizeObserver(() => {
+      chart?.resize();
+    });
+    resizeObserver.observe(chartRef.value);
+  }
+}
+
+function handleSelectChange() {
+  fetchWordCloudData();
+}
+
+function changeMetric() {
+  setOption();
 }
 </script>
 
@@ -165,14 +131,14 @@ function changeChart() {
     <div class="flex gap-5 mb-4 justify-center">
       <div>
         <span class="font-medium mr-0.5">类型 </span>
-        <el-select v-model="wordCloudFilter.typeSelect1" @change="handleSelectChange" style="width: 130px">
+        <el-select v-model="wordCloudFilter.typeSelect" @change="handleSelectChange" style="width: 130px">
           <el-option label="positive" value="positive" />
           <el-option label="negative" value="negative" />
         </el-select>
       </div>
       <div>
         <span class="font-medium mr-0.5">指标 </span>
-        <el-select v-model="wordCloudFilter.typeSelect2" @change="changeChart" style="width: 130px">
+        <el-select v-model="wordCloudFilter.metricSelect" @change="changeMetric" style="width: 130px">
           <el-option label="曝光次数" value="Impressions_Total_Count" />
           <el-option label="点击次数" value="Clicks_Total_Count" />
           <el-option label="加购次数" value="Cart_Adds_Total_Count" />
@@ -180,9 +146,9 @@ function changeChart() {
         </el-select>
       </div>
     </div>
-    <!--</div>-->
-    <div v-show="!loading && !hasData" class="no-data-message" style="min-height: 500px">
-      <el-empty />
+    <!-- 空状态 和 词云图 -->
+    <div v-show="!loading && !hasData" style="min-height: 500px">
+      <el-empty :image-size="300" />
     </div>
     <div v-show="hasData" ref="chartRef" style="width: 100%; height: 500px"></div>
   </el-card>