fix(EnamellingMachineStatus): 修复图表单位选择器值绑定问题并优化图表样式

- 将radio-button的label属性改为value属性以正确绑定值
- 调整图表默认时间范围为"近1月"
- 优化图表字体大小和标签显示
- 移除柱状图和折线图的标签显示以避免重叠
master
huangjinysf 2 months ago
parent 520d8e0d36
commit 8881159c6a

@ -193,8 +193,8 @@
</el-select> </el-select>
<span class="filter-label" style="margin-left: 20px;">显示单位:</span> <span class="filter-label" style="margin-left: 20px;">显示单位:</span>
<el-radio-group v-model="chartUnit" @change="onChartUnitChange" size="small"> <el-radio-group v-model="chartUnit" @change="onChartUnitChange" size="small">
<el-radio-button label="box">箱数</el-radio-button> <el-radio-button value="box">箱数</el-radio-button>
<el-radio-button label="weight">重量</el-radio-button> <el-radio-button value="weight">重量</el-radio-button>
</el-radio-group> </el-radio-group>
</div> </div>
<div v-if="salesChartLoading || historyChartLoading" v-loading="true" class="chart-loading"></div> <div v-if="salesChartLoading || historyChartLoading" v-loading="true" class="chart-loading"></div>
@ -238,7 +238,7 @@ const salesData = ref([])
const historyData = ref([]) const historyData = ref([])
const hasSalesData = ref(false) const hasSalesData = ref(false)
const hasHistoryData = ref(false) const hasHistoryData = ref(false)
const selectedTimeRange = ref('近1') const selectedTimeRange = ref('近1')
const chartUnit = ref('box') const chartUnit = ref('box')
const salesChartTitle = ref('') const salesChartTitle = ref('')
const currentSalesAxle = ref(null) const currentSalesAxle = ref(null)
@ -635,11 +635,17 @@ const initSalesChart = (retryCount = 0) => {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
type: 'cross' type: 'cross'
},
textStyle: {
fontSize: 14
} }
}, },
legend: { legend: {
data: [salesName, historyName], data: [salesName, historyName],
top: 10 top: 10,
textStyle: {
fontSize: 14
}
}, },
grid: { grid: {
left: '3%', left: '3%',
@ -652,7 +658,13 @@ const initSalesChart = (retryCount = 0) => {
data: dates, data: dates,
axisLabel: { axisLabel: {
interval: Math.floor(dates.length / 10), interval: Math.floor(dates.length / 10),
rotate: 30 rotate: 30,
fontSize: 13
},
axisLine: {
lineStyle: {
fontSize: 13
}
} }
}, },
yAxis: { yAxis: {
@ -664,6 +676,12 @@ const initSalesChart = (retryCount = 0) => {
lineStyle: { lineStyle: {
color: '#5470C6' color: '#5470C6'
} }
},
axisLabel: {
fontSize: 13
},
nameTextStyle: {
fontSize: 14
} }
}, },
series: [ series: [
@ -675,7 +693,10 @@ const initSalesChart = (retryCount = 0) => {
color: '#5470C6' color: '#5470C6'
}, },
barGap: '10%', barGap: '10%',
connectNulls: true connectNulls: true,
label: {
show: false
}
}, },
{ {
name: historyName, name: historyName,
@ -688,7 +709,10 @@ const initSalesChart = (retryCount = 0) => {
width: 3 width: 3
}, },
symbol: 'none', symbol: 'none',
connectNulls: true connectNulls: true,
label: {
show: false
}
} }
] ]
}; };

Loading…
Cancel
Save