refactor(wms/report): 优化图表数据排序并移除强制显示X轴标签
- 对图表数据进行浅拷贝并按日期排序,确保数据展示顺序正确 - 移除强制显示所有X轴标签的配置,让图表自动处理标签显示
This commit is contained in:
@@ -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轴刻度线,美化
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
|||||||
@@ -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' }
|
||||||
}
|
},
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
// 设置配置项并渲染图表
|
// 设置配置项并渲染图表
|
||||||
|
|||||||
Reference in New Issue
Block a user