refactor(QualityStatisticsCard): 优化横向柱状图标签显示

- 优先使用产品描述作为y轴标签,提高可读性
- 增加标签自动换行功能,避免文字重叠
- 增大图表最小宽度以适应多行标签
This commit is contained in:
2025-10-24 20:27:34 +08:00
parent 89e07ce7e2
commit cf89c9bdaa

View File

@@ -338,11 +338,10 @@ export default {
// 获取合格率最高的前5个
const top5 = validData.slice(0, 5)
// 准备横向柱状图数据
// 准备横向柱状图数据y轴显示产品描述
const topLabels = top5.map(item => {
const partNumber = item.finishedPartNumber || '未知'
const desc = item.productDescription || ''
return (partNumber + '-' + desc).substring(0, 15) // 截取前15个字符
const desc = item.productDescription || item.finishedPartNumber || '未知'
return desc.substring(0, 20) // 截取前20个字符优先显示描述
})
const topRates = top5.map(item => parseFloat(item.qualifiedRate) || 0)
@@ -385,8 +384,17 @@ export default {
type: 'category',
data: topLabels,
axisLabel: {
fontSize: 9,
interval: 0
fontSize: 10,
interval: 0,
formatter: function(value) {
// 自动换行每行最多显示8个字符
const maxLength = 8;
let result = '';
for (let i = 0; i < value.length; i += maxLength) {
result += value.substring(i, i + maxLength) + '\n';
}
return result.trim();
}
}
},
series: [
@@ -427,11 +435,10 @@ export default {
// 获取合格率最低的前5个
const bottom5 = validData.slice(0, 5)
// 准备横向柱状图数据
// 准备横向柱状图数据y轴显示产品描述
const bottomLabels = bottom5.map(item => {
const partNumber = item.finishedPartNumber || '未知'
const desc = item.productDescription || ''
return (partNumber + '-' + desc).substring(0, 15) // 截取前15个字符
const desc = item.productDescription || item.finishedPartNumber || '未知'
return desc.substring(0, 20) // 截取前20个字符优先显示描述
})
const bottomRates = bottom5.map(item => parseFloat(item.qualifiedRate) || 0)
@@ -474,8 +481,17 @@ export default {
type: 'category',
data: bottomLabels,
axisLabel: {
fontSize: 9,
interval: 0
fontSize: 10,
interval: 0,
formatter: function(value) {
// 自动换行每行最多显示8个字符
const maxLength = 8;
let result = '';
for (let i = 0; i < value.length; i += maxLength) {
result += value.substring(i, i + maxLength) + '\n';
}
return result.trim();
}
}
},
series: [
@@ -595,7 +611,7 @@ export default {
.bar-chart {
flex: 1;
min-width: 200px;
min-width: 250px; /* 增加最小宽度以适应多行标签 */
}
.top-chart {