117 lines
2.3 KiB
Vue
117 lines
2.3 KiB
Vue
<template>
|
|
<div class="chart-container">
|
|
<div ref="chart" style="width: 100%; height: 400px;"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts'
|
|
|
|
export default {
|
|
name: 'MaterialAnalysis',
|
|
props: {
|
|
materialData: {
|
|
type: Object,
|
|
default: () => ({
|
|
categories: [],
|
|
usageFrequency: [],
|
|
stockQuantity: [],
|
|
purchaseCycle: []
|
|
})
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
chart: null
|
|
}
|
|
},
|
|
watch: {
|
|
materialData: {
|
|
deep: true,
|
|
handler(val) {
|
|
if (val) {
|
|
this.initChart()
|
|
}
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.initChart()
|
|
},
|
|
beforeDestroy() {
|
|
if (!this.chart) {
|
|
return
|
|
}
|
|
this.chart.dispose()
|
|
this.chart = null
|
|
},
|
|
methods: {
|
|
initChart() {
|
|
if (!this.$refs.chart) return
|
|
this.chart = echarts.init(this.$refs.chart)
|
|
const option = {
|
|
title: {
|
|
text: '物料使用分析',
|
|
left: 'center'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross'
|
|
}
|
|
},
|
|
legend: {
|
|
data: ['使用频率', '库存量', '采购周期'],
|
|
top: 30
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: this.materialData.categories
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: '数量/频率',
|
|
position: 'left'
|
|
},
|
|
{
|
|
type: 'value',
|
|
name: '采购周期(天)',
|
|
position: 'right'
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '使用频率',
|
|
type: 'bar',
|
|
data: this.materialData.usageFrequency
|
|
},
|
|
{
|
|
name: '库存量',
|
|
type: 'bar',
|
|
data: this.materialData.stockQuantity
|
|
},
|
|
{
|
|
name: '采购周期',
|
|
type: 'line',
|
|
yAxisIndex: 1,
|
|
data: this.materialData.purchaseCycle
|
|
}
|
|
]
|
|
}
|
|
this.chart.setOption(option)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.chart-container {
|
|
/* background-color: #ffffff; */
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
/* box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1); */
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
</style> |