增加折线

src/views/appmana/datacenter/statistics.vue

@@ -70,6 +70,7 @@
           <template #title>
             <div class="card-header">
               <span class="chart-title">{{ item.title || `图表 ${index + 1}` }}</span>
+              <!-- 保持您原来的写法，不做任何修改 -->
               <a-tag color="blue" size="small">{{ item.data?.length || 0 }} 项</a-tag>
             </div>
           </template>
@@ -288,9 +289,6 @@ const loadCategories = async () => {
 const loadChartData = async (deployId, summaryMode, startTime) => {
   if (!deployId) return;
 
-  // ✅ 先清空数据，让 tag 显示 0 项
-  chartDataList.value = [];
-
   loading.value = true;
   try {
     // 格式化日期
@@ -398,7 +396,7 @@ const calculateYAxisRange = (data, markLines) => {
     const range = allMax - allMin;
     const padding = range * 0.15 || 10;
 
-    // ✅ 保留两位小数
+    // 保留两位小数
     return {
       min: roundToTwo(allMin - padding),
       max: roundToTwo(allMax + padding),
@@ -476,7 +474,6 @@ const getChartOption = (item) => {
     },
     yAxis: {
       type: 'value',
-      // ✅ 设置 y 轴范围，确保 markLine 可见（已保留两位小数）
       min: yAxisRange.min !== null ? yAxisRange.min : undefined,
       max: yAxisRange.max !== null ? yAxisRange.max : undefined,
       splitLine: {
@@ -488,13 +485,13 @@ const getChartOption = (item) => {
       axisLabel: {
         fontSize: 11,
         color: '#888',
-        // ✅ y轴标签也保留两位小数
         formatter: (value) => {
           return roundToTwo(value);
         },
       },
     },
     series: [
+      // ========== 柱状图（保持不变） ==========
       {
         name: item.title || '数据',
         type: 'bar',
@@ -534,9 +531,9 @@ const getChartOption = (item) => {
           },
         },
       },
-      // ✅ 新增：折线图
+      // ========== ✅ 新增：折线图 ==========
       {
-        name: item.title || '趋势',
+        name: `${item.title || '数据'}趋势`,
         type: 'line',
         data: item.data || [],
         smooth: true,
@@ -557,14 +554,11 @@ const getChartOption = (item) => {
             x2: 0,
             y2: 1,
             colorStops: [
-              { offset: 0, color: 'rgba(255, 107, 107, 0.3)' },
-              { offset: 1, color: 'rgba(255, 107, 107, 0.05)' },
+              { offset: 0, color: 'rgba(255, 107, 107, 0.25)' },
+              { offset: 1, color: 'rgba(255, 107, 107, 0.02)' },
             ],
           },
         },
-        emphasis: {
-          focus: 'series',
-        },
         label: {
           show: true,
           position: 'top',
@@ -575,7 +569,9 @@ const getChartOption = (item) => {
             return params.value;
           },
         },
-        // 将折线图与柱状图关联，共享 x 轴
+        emphasis: {
+          focus: 'series',
+        },
         xAxisIndex: 0,
         yAxisIndex: 0,
       },
@@ -592,8 +588,9 @@ const getChartOption = (item) => {
           name: item.title || '数据',
           icon: 'roundRect',
         },
+        // ✅ 新增：折线图图例
         {
-          name: item.title || '趋势',
+          name: `${item.title || '数据'}趋势`,
           icon: 'line',
           itemStyle: {
             color: '#ff6b6b',