maintenance_system/src/views/materialManagement/components/DataAnalysis.vue

<template>
    <div class="dashboard-container">
        <!-- 第一个图表：本月出入库统计 -->
        <div class="chart-item">
            <div class="title">
                本月出入库统计
            </div>
            <div ref="lineChartRef" class="chart-container"></div>
        </div>

        <!-- 第二个图表：出入库类型分布 -->
        <div class="chart-item">
            <div class="title">
                出入库类型分布
            </div>
            <div ref="barChartRef" class="chart-container"></div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue';
import * as echarts from 'echarts';

// 定义props
const props = defineProps({
    lineData: {
        type: Object,
        default: () => ({
            // 默认值，防止传入数据为空时图表显示异常
            days: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
            rukuCounnts: [5, 40, 20, 75, 60, 80, 40, 55, 30, 65, 5, 80],
            chukuCounnts: [30, 40, 30, 30, 30, 15, 55, 50, 40, 60, 25, 90]
        })
    },
    barData: {
        type: Object,
        default: () => ({
            // 默认值，防止传入数据为空时图表显示异常
            shebeiTypes: ['设备1', '设备2', '设备3', '设备4', '设备5'],
            rukuCount: [5, 40, 20, 75, 60],
            chukuCount: [30, 40, 30, 30, 30]
        })
    }
});

// 图表容器引用
const lineChartRef = ref(null);
const barChartRef = ref(null);

// 图表实例
let lineChart = null;
let barChart = null;

onMounted(() => {
    // 初始化折线图
    initLineChart();
    // 初始化柱状图
    initBarChart();

    // 监听窗口大小变化，自适应图表
    window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
    // 销毁图表实例
    if (lineChart) {
        lineChart.dispose();
    }
    if (barChart) {
        barChart.dispose();
    }

    // 移除事件监听
    window.removeEventListener('resize', handleResize);
});

// 初始化折线图
const initLineChart = () => {
    if (lineChartRef.value) {
        lineChart = echarts.init(lineChartRef.value);

        const option = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['入库数量', '出库数量'],
                icon: 'circle',
                itemWidth: 10,
                itemHeight: 10,
                top: 0
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: props.lineData.days
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '入库数量',
                    type: 'line',
                    data: props.lineData.rukuCounnts,
                    symbol: 'none',
                    smooth: true,
                    lineStyle: {
                        color: 'rgba(22, 93, 255, 1)'
                    },
                    itemStyle: {
                        color: 'rgba(22, 93, 255, 1)'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(22, 93, 255, 0.2)' },
                            { offset: 1, color: 'rgba(22, 93, 255, 0)' }
                        ])
                    }
                },
                {
                    name: '出库数量',
                    type: 'line',
                    data: props.lineData.chukuCounnts,
                    symbol: 'none',
                    smooth: true,
                    lineStyle: {
                        color: 'rgba(255, 153, 0, 1)'
                    },
                    itemStyle: {
                        color: 'rgba(255, 153, 0, 1)'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(59, 179, 70, 0.2)' },
                            { offset: 1, color: 'rgba(59, 179, 70, 0)' }
                        ])
                    }
                }
            ]
        };

        lineChart.setOption(option);
    }
};

// 初始化柱状图
const initBarChart = () => {
    if (barChartRef.value) {
        barChart = echarts.init(barChartRef.value);

        const option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['入库数量', '出库数量'],
                icon: 'circle',
                itemWidth: 10,
                itemHeight: 10,
                top: 0
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: props.barData.shebeiTypes,
                axisLabel: {
                    interval: 0, // 强制显示所有标签
                    rotate: 30, // 标签旋转30度
                    margin: 15, // 增加与轴线的距离
                    align: 'right', // 文字右对齐
                    verticalAlign: 'top' // 垂直方向顶部对齐
                }
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '入库数量',
                    type: 'bar',
                    data: props.barData.rukuCount,
                    itemStyle: {
                        color: 'rgba(22, 93, 255, 1)' // 入库数量颜色
                    },
                    barWidth: '45%',
                    barGap: '0' // 柱子之间的间距

                },
                {
                    name: '出库数量',
                    type: 'bar',
                    data: props.barData.chukuCount,
                    itemStyle: {
                        color: 'rgba(15, 198, 194, 1)' // 出库数量颜色
                    },
                    barWidth: '45%',
                    barGap: '0' // 柱子之间的间距
                }
            ]
        };

        barChart.setOption(option);
    }
};

// 处理窗口大小变化，让图表自适应
const handleResize = () => {
    if (lineChart) {
        lineChart.resize();
    }
    if (barChart) {
        barChart.resize();
    }
};

// 监听lineData变化，更新折线图
watch(() => props.lineData, () => {
    initLineChart();
    initBarChart();
}, { deep: true });
</script>

<style scoped>
.dashboard-container {
    padding: 20px;
}

.chart-item {
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.title {
    color: rgba(29, 33, 41, 1);
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 16px;
}

.chart-container {
    width: 100%;
    height: 300px;
}
</style>