From a42c3f58244cc470a9c74fb56ece6a9a6a9e00ba Mon Sep 17 00:00:00 2001
From: zhangyue <82248909@qq.com>
Date: Sat, 25 Jul 2026 18:49:50 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=8A=98=E7=BA=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/appmana/datacenter/statistics.vue | 1321 ++++++++++---------
 1 file changed, 688 insertions(+), 633 deletions(-)

diff --git a/src/views/appmana/datacenter/statistics.vue b/src/views/appmana/datacenter/statistics.vue
index 5a5d28a..182aa23 100644
--- a/src/views/appmana/datacenter/statistics.vue
+++ b/src/views/appmana/datacenter/statistics.vue
@@ -86,676 +86,731 @@
 </template>
 
 <script setup>
-  import { ref, onMounted, onBeforeUnmount, nextTick, computed } from 'vue';
-  import { message } from 'ant-design-vue';
-  import { ReloadOutlined } from '@ant-design/icons-vue';
-  import * as echarts from 'echarts';
-  import dayjs from 'dayjs';
-  import { getDeviceAlertStatistic, getAllDeviceList } from './datacenter.api';
+import { ref, onMounted, onBeforeUnmount, nextTick, computed } from 'vue';
+import { message } from 'ant-design-vue';
+import { ReloadOutlined } from '@ant-design/icons-vue';
+import * as echarts from 'echarts';
+import dayjs from 'dayjs';
+import { getDeviceAlertStatistic, getAllDeviceList } from './datacenter.api';
 
-  const fetchCategoryOptions = () => {
-    return new Promise((resolve, reject) => {
-      getAllDeviceList({})
-        .then((res) => {
-          if (res.success) {
-            resolve(res.result);
-          } else {
-            reject(new Error('获取数据失败'));
-          }
-        })
-        .catch((error) => {
-          console.error('获取数据概况失败:', error);
-          reject(error);
-        });
-    });
-  };
-
-  // ==================== 根据类别获取图表数据 ====================
-  const fetchChartDataByCategory = (deployId, summaryMode, startTime) => {
-    return new Promise((resolve, reject) => {
-      const chartData = [];
-      const dataMap = {
-        sales: [
-          {
-            title: '销售业绩月度对比',
-            xAxis: ['1月', '2月', '3月', '4月', '5月', '6月'],
-            data: [180, 250, 220, 310, 280, 360],
-            markLines: [
-              { name: '月均线', value: 267, color: '#339af0', type: 'dashed' },
-              { name: '冲刺目标', value: 350, color: '#fcc419', type: 'dotted' },
-            ],
-          },
-          {
-            title: '销售团队排名',
-            xAxis: ['团队A', '团队B', '团队C', '团队D', '团队E'],
-            data: [95, 140, 82, 210, 115],
-            markLines: [
-              { name: '合格线', value: 100, color: '#ff6b6b', type: 'dashed' },
-              { name: '优秀线', value: 180, color: '#69db7c', type: 'dotted' },
-            ],
-          },
-          {
-            title: '各产品线销售额',
-            xAxis: ['产品线A', '产品线B', '产品线C', '产品线D'],
-            data: [420, 380, 560, 290],
-            markLines: [
-              { name: '平均线', value: 412, color: '#4dabf7', type: 'dashed' },
-              { name: '目标线', value: 500, color: '#ff922b', type: 'dotted' },
-            ],
-          },
-        ],
-      };
-
-      // 构建请求参数 - 使用新的参数名
-      const params = {
-        deployId: deployId,
-        summaryMode: summaryMode || 'dayhours',
-        startTime: startTime,
-      };
-
-      getDeviceAlertStatistic(params)
-        .then((res) => {
-          if (res.success) {
-            let itemMap = res.result.itemInfo;
-            let valueMap = res.result.dataMap;
-            Object.entries(valueMap).forEach(([key, value]) => {
-              let markLines = [];
-              let itemDetail = itemMap[key];
-              if (itemDetail.highVal) {
-                markLines.push({
-                  name: itemDetail.itemName,
-                  value: itemDetail.highVal,
-                  color: '#339af0',
-                  type: 'dotted',
-                });
-              }
-              if (itemDetail.lowVal) {
-                markLines.push({
-                  name: itemDetail.itemName,
-                  value: itemDetail.lowVal,
-                  color: '#fcc419',
-                  type: 'dashed',
-                });
-              }
-
-              chartData.push({
-                title: itemDetail.itemName || key,
-                xAxis: res.result.timeList || [],
-                data: valueMap[key] || [],
-                markLines: markLines,
-              });
-            });
-            resolve(chartData || dataMap.sales);
-          } else {
-            reject(new Error('获取数据失败'));
-          }
-        })
-        .catch((error) => {
-          console.error('获取数据概况失败:', error);
-          reject(error);
-        });
-    });
-  };
-
-  // ==================== 数据状态 ====================
-  const categoryOptions = ref([]);
-  const categoryLoading = ref(false);
-  const selectedCategory = ref('');
-  const chartDataList = ref([]);
-  const loading = ref(false);
-  const chartInstances = [];
-  const chartRefs = {};
-
-  const selectedDimension = ref('dayhours');
-  const selectedDate = ref(null);
-
-  // ==================== 根据统计模式动态计算日期格式 ====================
-  const dateFormat = computed(() => {
-    switch (selectedDimension.value) {
-      case 'dayhours':
-        return 'YYYY-MM-DD';
-      case 'monthDays':
-        return 'YYYY-MM';
-      case 'yearMonth':
-        return 'YYYY';
-      default:
-        return 'YYYY-MM-DD';
-    }
-  });
-
-  const pickerType = computed(() => {
-    switch (selectedDimension.value) {
-      case 'dayhours':
-        return 'date';
-      case 'monthDays':
-        return 'month';
-      case 'yearMonth':
-        return 'year';
-      default:
-        return 'date';
-    }
-  });
-
-  const datePlaceholder = computed(() => {
-    switch (selectedDimension.value) {
-      case 'dayhours':
-        return '选择日期';
-      case 'monthDays':
-        return '选择月份';
-      case 'yearMonth':
-        return '选择年份';
-      default:
-        return '选择日期';
-    }
-  });
-
-  // ==================== 下拉框筛选 ====================
-  const filterOption = (input, option) => {
-    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
-  };
-
-  const getCategoryLabel = (value) => {
-    const found = categoryOptions.value.find((item) => item.id === value);
-    return found ? found.deployDes : value;
-  };
-
-  // ==================== 设置图表 DOM 引用 ====================
-  const setChartRef = (el, index) => {
-    if (el) {
-      chartRefs[index] = el;
-    }
-  };
-
-  // ==================== 加载下拉选项 ====================
-  const loadCategories = async () => {
-    categoryLoading.value = true;
-    try {
-      const res = await fetchCategoryOptions();
-      categoryOptions.value = res;
-
-      if (res.length > 0) {
-        selectedCategory.value = res[0].id;
-        await handleSearch();
-      }
-    } catch (error) {
-      console.error(error);
-    } finally {
-      categoryLoading.value = false;
-    }
-  };
-
-  // ==================== 加载图表数据（参数名：deployId, summaryMode, startTime） ====================
-  const loadChartData = async (deployId, summaryMode, startTime) => {
-    if (!deployId) return;
-
-    loading.value = true;
-    try {
-      // 格式化日期
-      let formattedDate = null;
-      if (startTime) {
-        if (dayjs.isDayjs(startTime)) {
-          formattedDate = startTime.format(dateFormat.value);
+const fetchCategoryOptions = () => {
+  return new Promise((resolve, reject) => {
+    getAllDeviceList({})
+      .then((res) => {
+        if (res.success) {
+          resolve(res.result);
         } else {
-          formattedDate = startTime;
+          reject(new Error('获取数据失败'));
         }
-      }
+      })
+      .catch((error) => {
+        console.error('获取数据概况失败:', error);
+        reject(error);
+      });
+  });
+};
 
-      const res = await fetchChartDataByCategory(deployId, summaryMode, formattedDate);
-      chartDataList.value = res;
-      await nextTick();
-      setTimeout(() => {
-        initCharts();
-      }, 150);
-    } catch (error) {
-      message.error('加载图表数据失败');
-      console.error(error);
-    } finally {
-      loading.value = false;
-    }
-  };
-
-  // ==================== 查询（收集所有参数） ====================
-  const handleSearch = () => {
-    if (!selectedCategory.value) {
-      message.warning('请先选择设备');
-      return;
-    }
-    loadChartData(selectedCategory.value, selectedDimension.value, selectedDate.value);
-  };
-
-  // ==================== 初始化所有图表 ====================
-  const initCharts = () => {
-    chartInstances.forEach((instance) => {
-      if (instance._resizeHandler) {
-        window.removeEventListener('resize', instance._resizeHandler);
-      }
-      if (!instance.isDisposed()) {
-        instance.dispose();
-      }
-    });
-    chartInstances.length = 0;
-
-    chartDataList.value.forEach((item, index) => {
-      const el = chartRefs[index];
-      if (!el) return;
-
-      if (el.offsetWidth === 0 || el.offsetHeight === 0) {
-        setTimeout(() => initCharts(), 100);
-        return;
-      }
-
-      const chart = echarts.init(el);
-      chart.setOption(getChartOption(item));
-      chartInstances.push(chart);
-
-      const resizeHandler = () => {
-        if (chart && !chart.isDisposed()) {
-          chart.resize();
-        }
-      };
-      window.addEventListener('resize', resizeHandler);
-      chart._resizeHandler = resizeHandler;
-    });
-  };
-
-  // ==================== 保留两位小数 ====================
-  const roundToTwo = (num) => {
-    if (num === undefined || num === null || isNaN(num)) return num;
-    return Math.round(num * 100) / 100;
-  };
-
-  // ==================== 计算 y 轴范围（确保 markLine 可见） ====================
-  const calculateYAxisRange = (data, markLines) => {
-    if (!data || data.length === 0) {
-      return { min: null, max: null };
-    }
-
-    // 过滤有效数据
-    const validData = data.filter((v) => v !== undefined && v !== null && !isNaN(v));
-    if (validData.length === 0) {
-      return { min: null, max: null };
-    }
-
-    // 计算数据的最小值和最大值
-    let dataMin = Math.min(...validData);
-    let dataMax = Math.max(...validData);
-
-    // 收集所有 markLine 的值
-    const markValues = (markLines || []).map((line) => line.value).filter((v) => v !== undefined && v !== null && !isNaN(v));
-
-    if (markValues.length > 0) {
-      const markMin = Math.min(...markValues);
-      const markMax = Math.max(...markValues);
-
-      // 合并数据范围和 markLine 范围
-      const allMin = Math.min(dataMin, markMin);
-      const allMax = Math.max(dataMax, markMax);
-
-      // 计算 padding（上下留白 15%）
-      const range = allMax - allMin;
-      const padding = range * 0.15 || 10;
-
-      // ✅ 保留两位小数
-      return {
-        min: roundToTwo(allMin - padding),
-        max: roundToTwo(allMax + padding),
-      };
-    }
-
-    // 没有 markLine 时，使用数据范围加 padding
-    const range = dataMax - dataMin;
-    const padding = range * 0.15 || 10;
-
-    return {
-      min: roundToTwo(dataMin - padding),
-      max: roundToTwo(dataMax + padding),
-    };
-  };
-
-  // ==================== 生成 ECharts 配置 ====================
-  const getChartOption = (item) => {
-    // 计算 y 轴范围，确保 markLine 可见
-    const yAxisRange = calculateYAxisRange(item.data, item.markLines);
-
-    const markLineData = (item.markLines || []).map((line) => ({
-      yAxis: line.value,
-      name: line.name,
-      lineStyle: {
-        color: line.color,
-        type: line.type || 'dashed',
-        width: 2,
-      },
-      label: {
-        formatter: `${line.name}: ${line.value}`,
-        color: line.color,
-        fontSize: 11,
-        position: 'insideEndTop',
-        fontWeight: 500,
-      },
-    }));
-
-    return {
-      tooltip: {
-        trigger: 'axis',
-        axisPointer: { type: 'shadow' },
-        formatter: (params) => {
-          let result = `<strong>${params[0].axisValue}</strong><br/>`;
-          params.forEach((p) => {
-            result += `${p.marker} ${p.seriesName}: ${p.value}<br/>`;
-          });
-          item.markLines?.forEach((line) => {
-            result += `<span style="display:inline-block;width:10px;height:2px;background:${line.color};margin-right:5px;"></span> ${line.name}: ${line.value}<br/>`;
-          });
-          return result;
-        },
-      },
-      grid: {
-        left: '6%',
-        right: '6%',
-        bottom: '14%',
-        top: '8%',
-        containLabel: true,
-      },
-      xAxis: {
-        type: 'category',
-        data: item.xAxis || [],
-        axisLabel: {
-          fontSize: 11,
-          fontWeight: 500,
-          color: '#666',
-        },
-        axisLine: {
-          lineStyle: { color: '#e0e0e0' },
-        },
-        axisTick: {
-          alignWithLabel: true,
-        },
-      },
-      yAxis: {
-        type: 'value',
-        // ✅ 设置 y 轴范围，确保 markLine 可见（已保留两位小数）
-        min: yAxisRange.min !== null ? yAxisRange.min : undefined,
-        max: yAxisRange.max !== null ? yAxisRange.max : undefined,
-        splitLine: {
-          lineStyle: {
-            color: '#f0f0f0',
-            type: 'dashed',
-          },
-        },
-        axisLabel: {
-          fontSize: 11,
-          color: '#888',
-          // ✅ y轴标签也保留两位小数
-          formatter: (value) => {
-            return roundToTwo(value);
-          },
-        },
-      },
-      series: [
+// ==================== 根据类别获取图表数据 ====================
+const fetchChartDataByCategory = (deployId, summaryMode, startTime) => {
+  return new Promise((resolve, reject) => {
+    const chartData = [];
+    const dataMap = {
+      sales: [
         {
-          name: item.title || '数据',
-          type: 'bar',
-          data: item.data || [],
-          barWidth: '40%',
-          barMaxWidth: 50,
-          markLine: {
-            silent: true,
-            symbol: 'none',
-            data: markLineData,
-            lineStyle: {
-              width: 2,
-            },
-            label: {
-              position: 'insideEndTop',
-              fontSize: 11,
-              fontWeight: 500,
-            },
-          },
-          itemStyle: {
-            borderRadius: [4, 4, 0, 0],
-            color: {
-              type: 'linear',
-              x: 0,
-              y: 0,
-              x2: 0,
-              y2: 1,
-              colorStops: [
-                { offset: 0, color: '#5b8def' },
-                { offset: 1, color: '#8db5f5' },
-              ],
-            },
-          },
-          emphasis: {
-            itemStyle: {
-              color: '#3b6fd4',
-            },
-          },
+          title: '销售业绩月度对比',
+          xAxis: ['1月', '2月', '3月', '4月', '5月', '6月'],
+          data: [180, 250, 220, 310, 280, 360],
+          markLines: [
+            { name: '月均线', value: 267, color: '#339af0', type: 'dashed' },
+            { name: '冲刺目标', value: 350, color: '#fcc419', type: 'dotted' },
+          ],
+        },
+        {
+          title: '销售团队排名',
+          xAxis: ['团队A', '团队B', '团队C', '团队D', '团队E'],
+          data: [95, 140, 82, 210, 115],
+          markLines: [
+            { name: '合格线', value: 100, color: '#ff6b6b', type: 'dashed' },
+            { name: '优秀线', value: 180, color: '#69db7c', type: 'dotted' },
+          ],
+        },
+        {
+          title: '各产品线销售额',
+          xAxis: ['产品线A', '产品线B', '产品线C', '产品线D'],
+          data: [420, 380, 560, 290],
+          markLines: [
+            { name: '平均线', value: 412, color: '#4dabf7', type: 'dashed' },
+            { name: '目标线', value: 500, color: '#ff922b', type: 'dotted' },
+          ],
         },
       ],
-      legend: {
-        show: true,
-        bottom: 0,
-        left: 'center',
-        icon: 'roundRect',
-        itemWidth: 12,
-        itemHeight: 8,
-        data: [
-          {
-            name: item.title || '数据',
-            icon: 'roundRect',
-          },
-          ...(item.markLines || []).map((line) => ({
-            name: line.name,
-            icon: 'line',
-            itemStyle: {
-              color: line.color,
-            },
-          })),
-        ],
-      },
     };
+
+    // 构建请求参数 - 使用新的参数名
+    const params = {
+      deployId: deployId,
+      summaryMode: summaryMode || 'dayhours',
+      startTime: startTime,
+    };
+
+    getDeviceAlertStatistic(params)
+      .then((res) => {
+        if (res.success) {
+          let itemMap = res.result.itemInfo;
+          let valueMap = res.result.dataMap;
+          Object.entries(valueMap).forEach(([key, value]) => {
+            let markLines = [];
+            let itemDetail = itemMap[key];
+            if (itemDetail.highVal) {
+              markLines.push({
+                name: itemDetail.itemName,
+                value: itemDetail.highVal,
+                color: '#339af0',
+                type: 'dotted',
+              });
+            }
+            if (itemDetail.lowVal) {
+              markLines.push({
+                name: itemDetail.itemName,
+                value: itemDetail.lowVal,
+                color: '#fcc419',
+                type: 'dashed',
+              });
+            }
+
+            chartData.push({
+              title: itemDetail.itemName || key,
+              xAxis: res.result.timeList || [],
+              data: valueMap[key] || [],
+              markLines: markLines,
+            });
+          });
+          resolve(chartData || dataMap.sales);
+        } else {
+          reject(new Error('获取数据失败'));
+        }
+      })
+      .catch((error) => {
+        console.error('获取数据概况失败:', error);
+        reject(error);
+      });
+  });
+};
+
+// ==================== 数据状态 ====================
+const categoryOptions = ref([]);
+const categoryLoading = ref(false);
+const selectedCategory = ref('');
+const chartDataList = ref([]);
+const loading = ref(false);
+const chartInstances = [];
+const chartRefs = {};
+
+const selectedDimension = ref('dayhours');
+const selectedDate = ref(null);
+
+// ==================== 根据统计模式动态计算日期格式 ====================
+const dateFormat = computed(() => {
+  switch (selectedDimension.value) {
+    case 'dayhours':
+      return 'YYYY-MM-DD';
+    case 'monthDays':
+      return 'YYYY-MM';
+    case 'yearMonth':
+      return 'YYYY';
+    default:
+      return 'YYYY-MM-DD';
+  }
+});
+
+const pickerType = computed(() => {
+  switch (selectedDimension.value) {
+    case 'dayhours':
+      return 'date';
+    case 'monthDays':
+      return 'month';
+    case 'yearMonth':
+      return 'year';
+    default:
+      return 'date';
+  }
+});
+
+const datePlaceholder = computed(() => {
+  switch (selectedDimension.value) {
+    case 'dayhours':
+      return '选择日期';
+    case 'monthDays':
+      return '选择月份';
+    case 'yearMonth':
+      return '选择年份';
+    default:
+      return '选择日期';
+  }
+});
+
+// ==================== 下拉框筛选 ====================
+const filterOption = (input, option) => {
+  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+};
+
+const getCategoryLabel = (value) => {
+  const found = categoryOptions.value.find((item) => item.id === value);
+  return found ? found.deployDes : value;
+};
+
+// ==================== 设置图表 DOM 引用 ====================
+const setChartRef = (el, index) => {
+  if (el) {
+    chartRefs[index] = el;
+  }
+};
+
+// ==================== 加载下拉选项 ====================
+const loadCategories = async () => {
+  categoryLoading.value = true;
+  try {
+    const res = await fetchCategoryOptions();
+    categoryOptions.value = res;
+
+    if (res.length > 0) {
+      selectedCategory.value = res[0].id;
+      await handleSearch();
+    }
+  } catch (error) {
+    console.error(error);
+  } finally {
+    categoryLoading.value = false;
+  }
+};
+
+// ==================== 加载图表数据（参数名：deployId, summaryMode, startTime） ====================
+const loadChartData = async (deployId, summaryMode, startTime) => {
+  if (!deployId) return;
+
+  // ✅ 先清空数据，让 tag 显示 0 项
+  chartDataList.value = [];
+
+  loading.value = true;
+  try {
+    // 格式化日期
+    let formattedDate = null;
+    if (startTime) {
+      if (dayjs.isDayjs(startTime)) {
+        formattedDate = startTime.format(dateFormat.value);
+      } else {
+        formattedDate = startTime;
+      }
+    }
+
+    const res = await fetchChartDataByCategory(deployId, summaryMode, formattedDate);
+    chartDataList.value = res;
+    await nextTick();
+    setTimeout(() => {
+      initCharts();
+    }, 150);
+  } catch (error) {
+    message.error('加载图表数据失败');
+    console.error(error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+// ==================== 查询（收集所有参数） ====================
+const handleSearch = () => {
+  if (!selectedCategory.value) {
+    message.warning('请先选择设备');
+    return;
+  }
+  loadChartData(selectedCategory.value, selectedDimension.value, selectedDate.value);
+};
+
+// ==================== 初始化所有图表 ====================
+const initCharts = () => {
+  chartInstances.forEach((instance) => {
+    if (instance._resizeHandler) {
+      window.removeEventListener('resize', instance._resizeHandler);
+    }
+    if (!instance.isDisposed()) {
+      instance.dispose();
+    }
+  });
+  chartInstances.length = 0;
+
+  chartDataList.value.forEach((item, index) => {
+    const el = chartRefs[index];
+    if (!el) return;
+
+    if (el.offsetWidth === 0 || el.offsetHeight === 0) {
+      setTimeout(() => initCharts(), 100);
+      return;
+    }
+
+    const chart = echarts.init(el);
+    chart.setOption(getChartOption(item));
+    chartInstances.push(chart);
+
+    const resizeHandler = () => {
+      if (chart && !chart.isDisposed()) {
+        chart.resize();
+      }
+    };
+    window.addEventListener('resize', resizeHandler);
+    chart._resizeHandler = resizeHandler;
+  });
+};
+
+// ==================== 保留两位小数 ====================
+const roundToTwo = (num) => {
+  if (num === undefined || num === null || isNaN(num)) return num;
+  return Math.round(num * 100) / 100;
+};
+
+// ==================== 计算 y 轴范围（确保 markLine 可见） ====================
+const calculateYAxisRange = (data, markLines) => {
+  if (!data || data.length === 0) {
+    return { min: null, max: null };
+  }
+
+  // 过滤有效数据
+  const validData = data.filter((v) => v !== undefined && v !== null && !isNaN(v));
+  if (validData.length === 0) {
+    return { min: null, max: null };
+  }
+
+  // 计算数据的最小值和最大值
+  let dataMin = Math.min(...validData);
+  let dataMax = Math.max(...validData);
+
+  // 收集所有 markLine 的值
+  const markValues = (markLines || []).map((line) => line.value).filter((v) => v !== undefined && v !== null && !isNaN(v));
+
+  if (markValues.length > 0) {
+    const markMin = Math.min(...markValues);
+    const markMax = Math.max(...markValues);
+
+    // 合并数据范围和 markLine 范围
+    const allMin = Math.min(dataMin, markMin);
+    const allMax = Math.max(dataMax, markMax);
+
+    // 计算 padding（上下留白 15%）
+    const range = allMax - allMin;
+    const padding = range * 0.15 || 10;
+
+    // ✅ 保留两位小数
+    return {
+      min: roundToTwo(allMin - padding),
+      max: roundToTwo(allMax + padding),
+    };
+  }
+
+  // 没有 markLine 时，使用数据范围加 padding
+  const range = dataMax - dataMin;
+  const padding = range * 0.15 || 10;
+
+  return {
+    min: roundToTwo(dataMin - padding),
+    max: roundToTwo(dataMax + padding),
   };
+};
 
-  // ==================== 生命周期 ====================
-  onMounted(async () => {
-    await loadCategories();
-  });
+// ==================== 生成 ECharts 配置 ====================
+const getChartOption = (item) => {
+  // 计算 y 轴范围，确保 markLine 可见
+  const yAxisRange = calculateYAxisRange(item.data, item.markLines);
 
-  onBeforeUnmount(() => {
-    chartInstances.forEach((instance) => {
-      if (instance._resizeHandler) {
-        window.removeEventListener('resize', instance._resizeHandler);
-      }
-      if (!instance.isDisposed()) {
-        instance.dispose();
-      }
-    });
-    chartInstances.length = 0;
-  });
+  const markLineData = (item.markLines || []).map((line) => ({
+    yAxis: line.value,
+    name: line.name,
+    lineStyle: {
+      color: line.color,
+      type: line.type || 'dashed',
+      width: 2,
+    },
+    label: {
+      formatter: `${line.name}: ${line.value}`,
+      color: line.color,
+      fontSize: 11,
+      position: 'insideEndTop',
+      fontWeight: 500,
+    },
+  }));
 
-  defineExpose({
-    handleSearch,
-    loadChartData,
-    selectedCategory,
-    categoryOptions,
-    selectedDimension,
-    selectedDate,
+  return {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'shadow' },
+      formatter: (params) => {
+        let result = `<strong>${params[0].axisValue}</strong><br/>`;
+        params.forEach((p) => {
+          result += `${p.marker} ${p.seriesName}: ${p.value}<br/>`;
+        });
+        item.markLines?.forEach((line) => {
+          result += `<span style="display:inline-block;width:10px;height:2px;background:${line.color};margin-right:5px;"></span> ${line.name}: ${line.value}<br/>`;
+        });
+        return result;
+      },
+    },
+    grid: {
+      left: '6%',
+      right: '6%',
+      bottom: '14%',
+      top: '8%',
+      containLabel: true,
+    },
+    xAxis: {
+      type: 'category',
+      data: item.xAxis || [],
+      axisLabel: {
+        fontSize: 11,
+        fontWeight: 500,
+        color: '#666',
+      },
+      axisLine: {
+        lineStyle: { color: '#e0e0e0' },
+      },
+      axisTick: {
+        alignWithLabel: true,
+      },
+    },
+    yAxis: {
+      type: 'value',
+      // ✅ 设置 y 轴范围，确保 markLine 可见（已保留两位小数）
+      min: yAxisRange.min !== null ? yAxisRange.min : undefined,
+      max: yAxisRange.max !== null ? yAxisRange.max : undefined,
+      splitLine: {
+        lineStyle: {
+          color: '#f0f0f0',
+          type: 'dashed',
+        },
+      },
+      axisLabel: {
+        fontSize: 11,
+        color: '#888',
+        // ✅ y轴标签也保留两位小数
+        formatter: (value) => {
+          return roundToTwo(value);
+        },
+      },
+    },
+    series: [
+      {
+        name: item.title || '数据',
+        type: 'bar',
+        data: item.data || [],
+        barWidth: '40%',
+        barMaxWidth: 50,
+        markLine: {
+          silent: true,
+          symbol: 'none',
+          data: markLineData,
+          lineStyle: {
+            width: 2,
+          },
+          label: {
+            position: 'insideEndTop',
+            fontSize: 11,
+            fontWeight: 500,
+          },
+        },
+        itemStyle: {
+          borderRadius: [4, 4, 0, 0],
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              { offset: 0, color: '#5b8def' },
+              { offset: 1, color: '#8db5f5' },
+            ],
+          },
+        },
+        emphasis: {
+          itemStyle: {
+            color: '#3b6fd4',
+          },
+        },
+      },
+      // ✅ 新增：折线图
+      {
+        name: item.title || '趋势',
+        type: 'line',
+        data: item.data || [],
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 6,
+        lineStyle: {
+          color: '#ff6b6b',
+          width: 2,
+        },
+        itemStyle: {
+          color: '#ff6b6b',
+        },
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              { offset: 0, color: 'rgba(255, 107, 107, 0.3)' },
+              { offset: 1, color: 'rgba(255, 107, 107, 0.05)' },
+            ],
+          },
+        },
+        emphasis: {
+          focus: 'series',
+        },
+        label: {
+          show: true,
+          position: 'top',
+          fontSize: 10,
+          color: '#ff6b6b',
+          fontWeight: 500,
+          formatter: (params) => {
+            return params.value;
+          },
+        },
+        // 将折线图与柱状图关联，共享 x 轴
+        xAxisIndex: 0,
+        yAxisIndex: 0,
+      },
+    ],
+    legend: {
+      show: true,
+      bottom: 0,
+      left: 'center',
+      icon: 'roundRect',
+      itemWidth: 12,
+      itemHeight: 8,
+      data: [
+        {
+          name: item.title || '数据',
+          icon: 'roundRect',
+        },
+        {
+          name: item.title || '趋势',
+          icon: 'line',
+          itemStyle: {
+            color: '#ff6b6b',
+          },
+        },
+        ...(item.markLines || []).map((line) => ({
+          name: line.name,
+          icon: 'line',
+          itemStyle: {
+            color: line.color,
+          },
+        })),
+      ],
+    },
+  };
+};
+
+// ==================== 生命周期 ====================
+onMounted(async () => {
+  await loadCategories();
+});
+
+onBeforeUnmount(() => {
+  chartInstances.forEach((instance) => {
+    if (instance._resizeHandler) {
+      window.removeEventListener('resize', instance._resizeHandler);
+    }
+    if (!instance.isDisposed()) {
+      instance.dispose();
+    }
   });
+  chartInstances.length = 0;
+});
+
+defineExpose({
+  handleSearch,
+  loadChartData,
+  selectedCategory,
+  categoryOptions,
+  selectedDimension,
+  selectedDate,
+});
 </script>
 
 <style scoped>
+.dashboard-charts {
+  padding: 24px;
+  background: #f0f2f5;
+  min-height: 100vh;
+}
+
+/* ==================== 筛选区域样式 ==================== */
+.filter-section {
+  margin-bottom: 20px;
+}
+
+.filter-card {
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.filter-card :deep(.ant-card-body) {
+  padding: 16px 20px;
+}
+
+.filter-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.filter-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: #1d2129;
+  white-space: nowrap;
+  min-width: 32px;
+}
+
+/* ==================== 图表区域样式 ==================== */
+.chart-grid {
+  margin: 0 -8px;
+}
+
+.chart-col {
+  padding: 0 8px;
+  margin-bottom: 16px;
+}
+
+.chart-card {
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  transition: all 0.3s ease;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.chart-card:hover {
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  transform: translateY(-2px);
+}
+
+.chart-card :deep(.ant-card-head) {
+  padding: 0 20px;
+  min-height: 52px;
+  border-bottom: 1px solid #f0f0f0;
+  background: #fafafa;
+  border-radius: 12px 12px 0 0;
+}
+
+.chart-card :deep(.ant-card-head-title) {
+  padding: 14px 0;
+  font-weight: 500;
+}
+
+.chart-card :deep(.ant-card-body) {
+  padding: 16px 12px 12px 12px;
+  flex: 1;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.chart-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1d2129;
+  letter-spacing: 0.3px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 70%;
+}
+
+.chart-container {
+  width: 100%;
+  height: 280px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.chart-instance {
+  width: 100%;
+  height: 280px;
+}
+
+/* 空状态样式 */
+.empty-state {
+  margin-top: 60px;
+  background: #ffffff;
+  padding: 60px 0;
+  border-radius: 16px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+}
+
+/* ==================== 响应式调整 ==================== */
+@media screen and (max-width: 768px) {
   .dashboard-charts {
-    padding: 24px;
-    background: #f0f2f5;
-    min-height: 100vh;
-  }
-
-  /* ==================== 筛选区域样式 ==================== */
-  .filter-section {
-    margin-bottom: 20px;
-  }
-
-  .filter-card {
-    border-radius: 12px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    padding: 16px;
   }
 
   .filter-card :deep(.ant-card-body) {
-    padding: 16px 20px;
+    padding: 12px 16px;
   }
 
   .filter-item {
-    display: flex;
-    align-items: center;
-    gap: 6px;
+    gap: 8px;
   }
 
   .filter-label {
-    font-size: 13px;
-    font-weight: 500;
-    color: #1d2129;
-    white-space: nowrap;
-    min-width: 32px;
-  }
-
-  /* ==================== 图表区域样式 ==================== */
-  .chart-grid {
-    margin: 0 -8px;
-  }
-
-  .chart-col {
-    padding: 0 8px;
-    margin-bottom: 16px;
-  }
-
-  .chart-card {
-    border-radius: 12px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-    transition: all 0.3s ease;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .chart-card:hover {
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
-    transform: translateY(-2px);
-  }
-
-  .chart-card :deep(.ant-card-head) {
-    padding: 0 20px;
-    min-height: 52px;
-    border-bottom: 1px solid #f0f0f0;
-    background: #fafafa;
-    border-radius: 12px 12px 0 0;
-  }
-
-  .chart-card :deep(.ant-card-head-title) {
-    padding: 14px 0;
-    font-weight: 500;
-  }
-
-  .chart-card :deep(.ant-card-body) {
-    padding: 16px 12px 12px 12px;
-    flex: 1;
-  }
-
-  .card-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-  }
-
-  .chart-title {
-    font-size: 14px;
-    font-weight: 600;
-    color: #1d2129;
-    letter-spacing: 0.3px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 70%;
+    min-width: 36px;
   }
 
   .chart-container {
-    width: 100%;
-    height: 280px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    height: 220px;
   }
 
   .chart-instance {
-    width: 100%;
-    height: 280px;
+    height: 220px;
   }
 
-  /* 空状态样式 */
-  .empty-state {
-    margin-top: 60px;
-    background: #ffffff;
-    padding: 60px 0;
-    border-radius: 16px;
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+  .chart-title {
+    font-size: 13px;
+    max-width: 60%;
   }
 
-  /* ==================== 响应式调整 ==================== */
-  @media screen and (max-width: 768px) {
-    .dashboard-charts {
-      padding: 16px;
-    }
-
-    .filter-card :deep(.ant-card-body) {
-      padding: 12px 16px;
-    }
-
-    .filter-item {
-      gap: 8px;
-    }
-
-    .filter-label {
-      min-width: 36px;
-    }
-
-    .chart-container {
-      height: 220px;
-    }
-
-    .chart-instance {
-      height: 220px;
-    }
-
-    .chart-title {
-      font-size: 13px;
-      max-width: 60%;
-    }
-
-    .chart-card :deep(.ant-card-head) {
-      padding: 0 16px;
-    }
-
-    .chart-card :deep(.ant-card-body) {
-      padding: 12px 8px 8px 8px;
-    }
+  .chart-card :deep(.ant-card-head) {
+    padding: 0 16px;
   }
 
-  @media screen and (max-width: 480px) {
-    .chart-container {
-      height: 200px;
-    }
-
-    .chart-instance {
-      height: 200px;
-    }
-
-    .chart-card :deep(.ant-card-head) {
-      min-height: 44px;
-    }
-
-    .chart-card :deep(.ant-card-head-title) {
-      padding: 10px 0;
-      font-size: 13px;
-    }
+  .chart-card :deep(.ant-card-body) {
+    padding: 12px 8px 8px 8px;
   }
+}
+
+@media screen and (max-width: 480px) {
+  .chart-container {
+    height: 200px;
+  }
+
+  .chart-instance {
+    height: 200px;
+  }
+
+  .chart-card :deep(.ant-card-head) {
+    min-height: 44px;
+  }
+
+  .chart-card :deep(.ant-card-head-title) {
+    padding: 10px 0;
+    font-size: 13px;
+  }
+}
 </style>