fix: 容量看板默认5G并修复矮图表数值轴刻度纵向重叠

This commit is contained in:
2026-06-26 08:59:14 +08:00
parent 118e05688b
commit 558aaf0c14
2 changed files with 21 additions and 4 deletions
+6
View File
@@ -942,3 +942,9 @@ CellData 处理日志细化(`app/services/cell_data.py`):
- ECharts:新增 `chartPalette` computed(轴文字/轴线/分割线/tooltip 底色与文字/图例/饼描边/柱底色 两套值),所有 option 通过 `axisLine/axisLabel/splitLine/tooltipBase/legendStyle` 辅助函数读取,主题切换时 computed 重算、`EChart.vue` 深度 watch `setOption(opt,true)` 自动重绘。 - ECharts:新增 `chartPalette` computed(轴文字/轴线/分割线/tooltip 底色与文字/图例/饼描边/柱底色 两套值),所有 option 通过 `axisLine/axisLabel/splitLine/tooltipBase/legendStyle` 辅助函数读取,主题切换时 computed 重算、`EChart.vue` 深度 watch `setOption(opt,true)` 自动重绘。
- CSS:硬编码颜色抽成 `--cap-*` 变量(bg/panel/card/border/shadow/text 系列/soft-bg/tag 等),**定义在 `:global([data-theme='dark'])` 与 `:global([data-theme='light'])`(documentElement)** 上——这样 teleport 到 body 的详情抽屉也能继承同一套变量。浅色:白底玻璃卡片 + 柔和阴影 + 深色文字;深色:原科技风径向辉光。强调色(青/紫/玫红/琥珀)与 `.cap-spark`/分段激活态在两主题保持一致。卡片 icon/底色条改用更深的实色(#06b6d4/#f43f5e 等)以保证浅色下对比度。 - CSS:硬编码颜色抽成 `--cap-*` 变量(bg/panel/card/border/shadow/text 系列/soft-bg/tag 等),**定义在 `:global([data-theme='dark'])` 与 `:global([data-theme='light'])`(documentElement)** 上——这样 teleport 到 body 的详情抽屉也能继承同一套变量。浅色:白底玻璃卡片 + 柔和阴影 + 深色文字;深色:原科技风径向辉光。强调色(青/紫/玫红/琥珀)与 `.cap-spark`/分段激活态在两主题保持一致。卡片 icon/底色条改用更深的实色(#06b6d4/#f43f5e 等)以保证浅色下对比度。
- 验证:`frontend` `npm run build`(vue-tsc+vite) 通过。 - 验证:`frontend` `npm run build`(vue-tsc+vite) 通过。
## 2026-06-26:容量看板默认 5G + 数值轴刻度防重叠
- 默认制式:看板进入默认 `rat='5g'`(原 4g)。
- 修复矮图表数值轴刻度重叠:图表高度仅 `clamp(108px,13vh,160px)`,上行/下行利用率分布 0-10% 桶计数极大(约 1.9w)且带千分位,ECharts 自动放 5-6 条刻度导致 Y 轴标签纵向叠压。新增 `abbrNum()`(≥1万→「x万」、≥1千→「xk」、≥1亿→「x亿」)与 `valueAxis()`(`splitNumber:3` + 缩写 formatter),套用到上/下行直方与制式分布的数值轴;频段标记小区横向柱的数值 x 轴同样加 `splitNumber:3`+缩写。
- 验证:`frontend` `vue-tsc --noEmit` 通过。
+15 -4
View File
@@ -313,7 +313,7 @@ const chartHeight = 'clamp(108px, 13vh, 160px)';
const loadingStatus = ref(true); const loadingStatus = ref(true);
const ready = ref(false); const ready = ref(false);
const rat = ref<Rat>('4g'); const rat = ref<Rat>('5g');
const ratOptions: { label: string; value: Rat }[] = [ const ratOptions: { label: string; value: Rat }[] = [
{ label: '4G', value: '4g' }, { label: '4G', value: '4g' },
{ label: '5G', value: '5g' } { label: '5G', value: '5g' }
@@ -444,6 +444,17 @@ function tooltipBase(): EChartsOption['tooltip'] {
function legendStyle() { function legendStyle() {
return { color: chartPalette.value.legend, fontSize: 11 }; return { color: chartPalette.value.legend, fontSize: 11 };
} }
// 矮图表的数值轴缩写,避免刻度文字过长 / 纵向重叠
function abbrNum(v: number): string {
const n = Math.abs(v);
if (n >= 1e8) return `${(v / 1e8).toFixed(1).replace(/\.0$/, '')}亿`;
if (n >= 1e4) return `${(v / 1e4).toFixed(1).replace(/\.0$/, '')}万`;
if (n >= 1e3) return `${(v / 1e3).toFixed(1).replace(/\.0$/, '')}k`;
return String(v);
}
function valueAxis(): EChartsOption['yAxis'] {
return { type: 'value', splitNumber: 3, splitLine: splitLine(), axisLabel: { ...axisLabel(), formatter: (v: number) => abbrNum(v) } };
}
const problemOption = computed<EChartsOption>(() => { const problemOption = computed<EChartsOption>(() => {
const data = (overview.value?.problem_pie || []).map(d => ({ const data = (overview.value?.problem_pie || []).map(d => ({
@@ -467,7 +478,7 @@ function makeHist(buckets: HistBucket[], c0: string, c1: string): EChartsOption
tooltip: { ...tooltipBase(), trigger: 'axis', axisPointer: { type: 'shadow' } }, tooltip: { ...tooltipBase(), trigger: 'axis', axisPointer: { type: 'shadow' } },
grid: baseGrid(), grid: baseGrid(),
xAxis: { type: 'category', data: buckets.map(b => b.bucket), axisLine: axisLine(), axisLabel: { ...axisLabel(), rotate: 30 }, axisTick: { show: false } }, xAxis: { type: 'category', data: buckets.map(b => b.bucket), axisLine: axisLine(), axisLabel: { ...axisLabel(), rotate: 30 }, axisTick: { show: false } },
yAxis: { type: 'value', splitLine: splitLine(), axisLabel: axisLabel() }, yAxis: valueAxis(),
series: [{ series: [{
type: 'bar', barWidth: '58%', data: buckets.map(b => b.value), type: 'bar', barWidth: '58%', data: buckets.map(b => b.value),
itemStyle: { itemStyle: {
@@ -487,7 +498,7 @@ const systemOption = computed<EChartsOption>(() => {
legend: { top: 0, right: 0, textStyle: legendStyle(), itemWidth: 10, itemHeight: 10 }, legend: { top: 0, right: 0, textStyle: legendStyle(), itemWidth: 10, itemHeight: 10 },
grid: baseGrid(), grid: baseGrid(),
xAxis: { type: 'category', data: stats.map(s => s.name), axisLine: axisLine(), axisLabel: { ...axisLabel(), interval: 0, rotate: stats.length > 5 ? 24 : 0 }, axisTick: { show: false } }, xAxis: { type: 'category', data: stats.map(s => s.name), axisLine: axisLine(), axisLabel: { ...axisLabel(), interval: 0, rotate: stats.length > 5 ? 24 : 0 }, axisTick: { show: false } },
yAxis: { type: 'value', splitLine: splitLine(), axisLabel: axisLabel() }, yAxis: valueAxis(),
series: [ series: [
{ name: '总数', type: 'bar', barGap: '-100%', barWidth: '46%', itemStyle: { borderRadius: [3, 3, 0, 0], color: chartPalette.value.barTrack }, data: stats.map(s => s.total) }, { name: '总数', type: 'bar', barGap: '-100%', barWidth: '46%', itemStyle: { borderRadius: [3, 3, 0, 0], color: chartPalette.value.barTrack }, data: stats.map(s => s.total) },
{ name: '高负荷', type: 'bar', barWidth: '46%', itemStyle: { borderRadius: [3, 3, 0, 0], color: '#fb7185' }, data: stats.map(s => s.high) } { name: '高负荷', type: 'bar', barWidth: '46%', itemStyle: { borderRadius: [3, 3, 0, 0], color: '#fb7185' }, data: stats.map(s => s.high) }
@@ -513,7 +524,7 @@ const freqOption = computed<EChartsOption>(() => {
return { return {
tooltip: { ...tooltipBase(), trigger: 'axis', axisPointer: { type: 'shadow' } }, tooltip: { ...tooltipBase(), trigger: 'axis', axisPointer: { type: 'shadow' } },
grid: { left: 8, right: 24, top: 10, bottom: 6, containLabel: true }, grid: { left: 8, right: 24, top: 10, bottom: 6, containLabel: true },
xAxis: { type: 'value', splitLine: splitLine(), axisLabel: axisLabel() }, xAxis: { type: 'value', splitNumber: 3, splitLine: splitLine(), axisLabel: { ...axisLabel(), formatter: (v: number) => abbrNum(v) } },
yAxis: { type: 'category', data: stats.map(s => s.name), axisLine: axisLine(), axisLabel: axisLabel(), axisTick: { show: false } }, yAxis: { type: 'category', data: stats.map(s => s.name), axisLine: axisLine(), axisLabel: axisLabel(), axisTick: { show: false } },
series: [{ series: [{
type: 'bar', barWidth: '56%', data: stats.map(s => s.flagged), type: 'bar', barWidth: '56%', data: stats.map(s => s.flagged),