refactor(wms/report): 优化图表数据排序并移除强制显示X轴标签

- 对图表数据进行浅拷贝并按日期排序,确保数据展示顺序正确
- 移除强制显示所有X轴标签的配置,让图表自动处理标签显示
This commit is contained in:
砂糖
2026-01-14 14:40:19 +08:00
parent c7fb943df5
commit 9573c661d2
2 changed files with 11 additions and 8 deletions

View File

@@ -80,7 +80,7 @@ export default {
{ {
type: 'category', type: 'category',
data: xAxisData, data: xAxisData,
axisLabel: { interval: 0 }, // 强制显示所有X轴标签不隐藏 // axisLabel: { interval: 0 }, // 强制显示所有X轴标签不隐藏
axisTick: { show: false } // 隐藏X轴刻度线美化 axisTick: { show: false } // 隐藏X轴刻度线美化
} }
], ],

View File

@@ -58,11 +58,14 @@ export default {
// 初始化图表实例 // 初始化图表实例
this.chartInstance = echarts.init(chartDom) this.chartInstance = echarts.init(chartDom)
// 从props接收的data中提取图表所需数据 // 1. 浅拷贝原数组 + 按planDate日期升序排序生成新数组不修改原this.data
const xAxisData = this.data.map(item => item.productName) const sortedData = [...this.data].sort((a, b) => new Date(a.planDate) - new Date(b.planDate))
const coilCountData = this.data.map(item => item.coilCount)
// 总重量是字符串格式,强制转数字,保证图表能正常渲染 // 2. 从排序后的新数组中,提取图表所需数据
const totalWeightData = this.data.map(item => Number(item.totalWeight)) const xAxisData = sortedData.map(item => item.productName)
const coilCountData = sortedData.map(item => item.coilCount)
// 总重量字符串转数字,保证图表渲染正常
const totalWeightData = sortedData.map(item => Number(item.totalWeight))
// echarts核心配置项 - 双Y轴折线图 // echarts核心配置项 - 双Y轴折线图
const option = { const option = {
@@ -85,7 +88,7 @@ export default {
type: 'category', type: 'category',
data: xAxisData, data: xAxisData,
axisLabel: { axisLabel: {
interval: 0, // 强制显示所有X轴标签不隐藏 // interval: 0, // 强制显示所有X轴标签不隐藏
fontSize: 12 fontSize: 12
} }
} }
@@ -131,7 +134,7 @@ export default {
symbolSize: 6, symbolSize: 6,
lineStyle: { width: 2, color: '#ff6600' }, lineStyle: { width: 2, color: '#ff6600' },
itemStyle: { color: '#ff6600' } itemStyle: { color: '#ff6600' }
} },
] ]
} }
// 设置配置项并渲染图表 // 设置配置项并渲染图表