162 lines
3.7 KiB
Vue
162 lines
3.7 KiB
Vue
<template>
|
|
<el-card shadow="hover" class="order-material-analysis">
|
|
<div slot="header" class="card-header">订单物料分析</div>
|
|
<div ref="chart" class="chart-container"></div>
|
|
</el-card>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts'
|
|
export default {
|
|
name: 'OrderMaterialAnalysis',
|
|
props: {
|
|
materialInfo: {
|
|
type: Object,
|
|
required: true,
|
|
default: () => ({
|
|
categories: [],
|
|
usageFrequency: [],
|
|
stockQuantity: [],
|
|
bundleRate: [],
|
|
purchaseCycle: [],
|
|
yAxisUsageMax: 0
|
|
})
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
chartInstance: null
|
|
}
|
|
},
|
|
watch: {
|
|
materialInfo: {
|
|
deep: true,
|
|
immediate: true,
|
|
handler() {
|
|
this.updateChart()
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.initChart()
|
|
},
|
|
beforeDestroy() {
|
|
window.removeEventListener('resize', this.resizeChart)
|
|
if (this.chartInstance) {
|
|
this.chartInstance.dispose()
|
|
this.chartInstance = null
|
|
}
|
|
},
|
|
methods: {
|
|
initChart() {
|
|
if (!this.chartInstance) {
|
|
this.chartInstance = echarts.init(this.$refs.chart)
|
|
}
|
|
this.updateChart()
|
|
window.addEventListener('resize', this.resizeChart)
|
|
},
|
|
updateChart() {
|
|
if (!this.chartInstance) return
|
|
const info = this.materialInfo
|
|
const option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { type: 'shadow' }
|
|
},
|
|
legend: {
|
|
data: ['使用频次', '库存量', '捆绑率', '采购周期'],
|
|
bottom: 0
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: info.categories,
|
|
axisTick: { alignWithLabel: true }
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: '数量',
|
|
min: 0,
|
|
max: info.yAxisUsageMax,
|
|
interval: Math.ceil((info.yAxisUsageMax || 1) / 4),
|
|
position: 'left',
|
|
axisLine: { lineStyle: { color: '#3a85ff' } },
|
|
axisLabel: { formatter: '{value}' }
|
|
},
|
|
{
|
|
type: 'value',
|
|
name: '百分比',
|
|
min: 0,
|
|
max: 100,
|
|
interval: 20,
|
|
position: 'right',
|
|
axisLine: { lineStyle: { color: '#ffb300' } },
|
|
axisLabel: { formatter: '{value}%'}
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '使用频次',
|
|
type: 'bar',
|
|
data: info.usageFrequency,
|
|
itemStyle: { color: '#3a85ff' }
|
|
},
|
|
{
|
|
name: '库存量',
|
|
type: 'bar',
|
|
data: info.stockQuantity,
|
|
itemStyle: { color: '#52c41a' }
|
|
},
|
|
{
|
|
name: '捆绑率',
|
|
type: 'line',
|
|
yAxisIndex: 1,
|
|
data: info.bundleRate,
|
|
lineStyle: { color: '#ffc107', width: 2 },
|
|
smooth: true,
|
|
symbol: 'circle',
|
|
symbolSize: 8
|
|
},
|
|
{
|
|
name: '采购周期',
|
|
type: 'line',
|
|
yAxisIndex: 1,
|
|
data: info.purchaseCycle,
|
|
lineStyle: { color: '#ff5722', width: 2 },
|
|
smooth: true,
|
|
symbol: 'circle',
|
|
symbolSize: 8
|
|
}
|
|
]
|
|
}
|
|
this.chartInstance.setOption(option, { notMerge: true })
|
|
},
|
|
resizeChart() {
|
|
if (this.chartInstance) {
|
|
this.chartInstance.resize()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.order-material-analysis {
|
|
height: 500px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.card-header {
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.chart-container {
|
|
flex-grow: 1;
|
|
min-height: 280px;
|
|
width: 100%;
|
|
}
|
|
</style>
|