lcw

src/views/home/echarts/barHatEcharts.vue

@@ -54,33 +54,33 @@ function startAutoTooltip() {
   if (!props.autoTooltip) {
     return;
   }
-  
+
   if (!props.data) {
     // console.warn('自动提示框未启动 - 缺少数据');
     return;
   }
-  
+
   if (!props.data.xDate || props.data.xDate.length === 0) {
     // console.warn('自动提示框未启动 - xDate数据为空');
     return;
   }
-  
+
   if (!props.data.list || props.data.list.length === 0) {
     // console.warn('自动提示框未启动 - list数据为空');
     return;
   }
-  
+
   if (!myChart.value) {
     // console.warn('自动提示框未启动 - 图表实例不存在');
     return;
   }
-  
+
   // 清除之前的定时器
   stopAutoTooltip();
-  
+
   const dataLength = props.data.xDate.length;
   currentTooltipIndex.value = 0;
-  
+
   // console.log(`开始自动提示框循环 - 数据长度: ${dataLength}, 间隔: ${props.tooltipInterval}ms`);
   // console.log('数据预览:', {
   //   xDate: props.data.xDate.slice(0, 3),
@@ -88,7 +88,7 @@ function startAutoTooltip() {
   //   firstSeriesName: props.data.list[0]?.name,
   //   firstSeriesValueCount: props.data.list[0]?.value?.length
   // });
-  
+
   tooltipTimer.value = setInterval(() => {
     try {
       // 检查图表实例是否仍然存在
@@ -97,18 +97,18 @@ function startAutoTooltip() {
         stopAutoTooltip();
         return;
       }
-      
+
       // 检查是否暂停
       if (isPaused.value) {
         // console.log('提示框循环已暂停');
         return;
       }
-      
+
       // 先隐藏当前提示框
       myChart.value.dispatchAction({
         type: 'hideTip'
       });
-      
+
       // 延迟一点时间再显示新的提示框，确保动画效果
       setTimeout(() => {
         if (myChart.value && !isPaused.value) {
@@ -116,21 +116,21 @@ function startAutoTooltip() {
             // 获取当前数据点信息
             const currentData = props.data.xDate[currentTooltipIndex.value];
             const currentValues = props.data.list.map(series => series.value[currentTooltipIndex.value]);
-            
+
             // 验证数据有效性
             if (currentData === undefined) {
               // console.error(`数据索引 ${currentTooltipIndex.value} 超出范围`);
               stopAutoTooltip();
               return;
             }
-            
+
             // 显示当前索引的提示框 - 使用第一个系列
             myChart.value.dispatchAction({
               type: 'showTip',
               seriesIndex: 0,
               dataIndex: currentTooltipIndex.value
             });
-            
+
             // console.log(`✓ 显示提示框 [${currentTooltipIndex.value}/${dataLength-1}] - ${currentData}:`, currentValues);
           } catch (error) {
             // console.error('显示提示框时出错:', error);
@@ -139,7 +139,7 @@ function startAutoTooltip() {
           }
         }
       }, 100);
-      
+
       // 更新索引，循环展示
       currentTooltipIndex.value = (currentTooltipIndex.value + 1) % dataLength;
     } catch (error) {
@@ -147,7 +147,7 @@ function startAutoTooltip() {
       stopAutoTooltip();
     }
   }, props.tooltipInterval);
-  
+
   // console.log(`✓ 自动提示框已启动 - 间隔: ${props.tooltipInterval}ms, 数据长度: ${dataLength}`);
 }
 
@@ -229,22 +229,23 @@ function lineChartFn(xDate, legend, series) {
         // 获取当前数据点的所有系列信息
         const dataIndex = params.dataIndex;
         const categoryName = params.name;
-        
+
         let result = `<div style="margin-bottom: 8px; font-weight: bold; color: #00d4ff; font-size: 14px; border-bottom: 1px solid #00d4ff; padding-bottom: 4px;">${categoryName}</div>`;
-        
+
         // 遍历所有系列，显示该数据点的所有信息
         if (props.data && props.data.list) {
           props.data.list.forEach((seriesData, index) => {
             const value = seriesData.value[dataIndex];
             const color = seriesData.color ? seriesData.color[0] : '#00d4ff';
             result += `<div style="margin: 4px 0; display: flex; align-items: center;">
-              <span style="display: inline-block; width: 12px; height: 12px; background: ${color}; border-radius: 50%; margin-right: 8px; border: 1px solid rgba(255,255,255,0.3);"></span>
-              <span style="color: #fff; margin-right: 8px; min-width: 60px;">${seriesData.name}:</span>
+              <span style="display: inline-block; width: 12px; height: 12px; background: ${color};
+               border-radius: 50%; margin-right: 8px; border: 1px solid rgba(255,255,255,0.3);"></span>
+              <span style="color: #fff; margin-right: 8px; min-width: 60px;">${categoryName}:</span>
               <span style="color: #00d4ff; font-weight: bold; font-size: 14px;">${value}</span>
             </div>`;
           });
         }
-        
+
         return result;
       },
       // 确保提示框能够正确显示
@@ -256,17 +257,17 @@ function lineChartFn(xDate, legend, series) {
         // 计算提示框位置，避免超出边界
         let x = point[0] + 15;
         let y = point[1] - 10;
-        
+
         // 如果右侧空间不够，显示在左侧
         if (x + size.contentSize[0] > size.viewSize[0]) {
           x = point[0] - size.contentSize[0] - 15;
         }
-        
+
         // 如果上方空间不够，显示在下方
         if (y < 0) {
           y = point[1] + 20;
         }
-        
+
         return [x, y];
       }
     },
@@ -316,30 +317,30 @@ function lineChartFn(xDate, legend, series) {
     ],
     series: series
   };
-  
+
   option && myChart.value.setOption(option);
-  
+
   // 添加鼠标事件监听
   if (props.pauseOnHover) {
     myChart.value.on('mouseover', () => {
       pauseAutoTooltip();
     });
-    
+
     myChart.value.on('mouseout', () => {
       resumeAutoTooltip();
     });
   }
-  
+
   // 启动自动循环展示
   if (props.autoTooltip) {
     setTimeout(() => {
       startAutoTooltip();
     }, 1000); // 延迟1秒启动，确保图表完全渲染
   }
-  
-  window.onresize = function () { 
+
+  window.onresize = function () {
     if (myChart.value) {
-      myChart.value.resize(); 
+      myChart.value.resize();
     }
   };
 }