baozhida-building-system/src/views/system/lighting/modules/switchAll.vue

<template>
    <div class="_switchAll">
        <HeadlineTag type="right" value="运行分析(周)"></HeadlineTag>
        <div class="_switchAll_mains">
            <div ref="chartRef" style="width: 100%; height: 100%;"></div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';
import HeadlineTag from '@/components/HeadlineTag';

const chartRef = ref(null);
let chart = null;

const generateRandomData = (length, max) => {
    const randomData = [];
    for (let i = 0; i < length; i++) {
        randomData.push(Math.floor(Math.random() * max));
    }
    return randomData;
};

const handleResize = () => {
    if (chart) {
        chart.resize();
    }
};

onMounted(() => {
    if (chartRef.value) {
        chart = echarts.init(chartRef.value);

        const option = {
            title: null, 
            tooltip: {
                trigger: 'axis'
            },
            legend: false, 
            // 调整 grid 配置以在 Y 轴方向拉伸图表
            grid: {
                top: '10%', // 减小顶部边距，让图表向上扩展
                bottom: '10%', // 减小底部边距，让图表向下扩展
                right: '0%',
            },
            xAxis: {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                axisLabel: {
                    color: '#fff' 
                },
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    show: true, // 不显示刻度标签
                    color: '#fff' 
                },
                // 配置 Y 轴网格刻线
                splitLine: {
                    show: false, // 显示网格刻线
                    lineStyle: {
                        color: '#44585e' // 设置网格刻线颜色 
                    }
                },
                axisTick: {
                    show: false // 不显示刻度线
                },
            },
            series: [
                {
                    name: '开启数量',
                    type: 'line',
                    smooth: true,
                    data: generateRandomData(7, 50),
                    showSymbol: false,
                    lineStyle: {
                        color: 'rgb(49, 143, 247)',
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [{
                                offset: 0,
                                color: 'rgba(49, 143, 247, 0.6)',
                            },
                            {
                                offset: 0.8,
                                color: 'rgba(49, 143, 247, 0.2)',
                            },
                            ],
                            false
                        ),
                        shadowColor: 'rgba(0, 0, 0, 0.1)',
                        shadowBlur: 10,
                    }
                },
                {
                    name: '关闭数量',
                    type: 'line',
                    smooth: true,
                    data: generateRandomData(9, 60), 
                    showSymbol: false,
                    lineStyle: {
                        color: 'rgb(255,193,7)',
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [{
                                offset: 0,
                                color: 'rgba(255,193,7, 0.6)',
                            },
                            {
                                offset: 0.8,
                                color: 'rgba(255,193,7,0.2)',
                            },
                            ],
                            false
                        ),
                        shadowColor: 'rgba(0, 0, 0, 0.1)',
                        shadowBlur: 10,
                    }
                },
                {
                    name: '故障数量',
                    type: 'line',
                    smooth: true,
                    data: generateRandomData(5, 30), 
                    showSymbol: false,
                    lineStyle: {
                        color: 'rgb(244,67,54)'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [{
                                offset: 0,
                                color: 'rgba(244,67,54,0.6)',
                            },
                            {
                                offset: 0.8,
                                color: 'rgba(244,67,54,0.2)',
                            },
                            ],
                            false
                        ),
                        shadowColor: 'rgba(0, 0, 0, 0.1)',
                        shadowBlur: 10,
                    }
                }
            ]
        };

        chart.setOption(option);
    }
    window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
    window.removeEventListener('resize', handleResize);
    if (chart) {
        chart.dispose();
    }
});
</script>

<style lang="scss">
._divider{
    height: 1px;
    border: 1px dashed #168cdb;
    flex: 1;
    margin: 0 10px;
}
._switchAll{
    display: flex;
    flex-direction: column;
    &_mains{
        margin:10px 30px;
        flex: 1;
        display: flex;
        &_item{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            &_name{
                width: 30px;
                height: 30px;
                background: url("@/assets/images/content_circle_num.png");
                background-size: 100% 100%;
                background-position: center;
                background-repeat: no-repeat;
                // animation: scanning 4s linear infinite;
                border: 1px solid red; 
            }
            &_flag{
                display: flex;
                align-items: center;
                gap: 3px;
                &_item{
                    width: 30px;
                    height: 30px;
                    border: 3px dashed #168cdb;
                    box-sizing: border-box;
                    background:#0e6ead;
                    color: #fff;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 14px;
                }
            }
        }
        &_item:hover{
            cursor: pointer;
            background-image: linear-gradient(to right, #168cdb, transparent); 
        }
    }
}

</style>