diff --git a/src/views/appmana/datacenter/statistics.vue b/src/views/appmana/datacenter/statistics.vue index 182aa23..add110c 100644 --- a/src/views/appmana/datacenter/statistics.vue +++ b/src/views/appmana/datacenter/statistics.vue @@ -70,6 +70,7 @@ @@ -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',