Echarts可视化大屏框架

效果图展示：

 源码：

<template>
    <div>
        <!-- Header 部分 -->
        <div class="heads">
            <h3>大数据可视化分析</h3>
            <span>2023-12-12 12:20:45</span>
        </div>

        <!-- 中间部分 -->
        <div class="middle">
            <div class="m-left">
                <div class="m-l-top"></div>
                <div class="m-l-bottom"></div>
            </div>
            <div class="m-middle">
                <div class="m-m-top"></div>
                <div class="m-m-bottom"></div>
            </div>
            <div class="m-right">
                <div class="m-r-top"></div>
                <div class="m-r-bottom"></div>
            </div>
        </div>

        <!-- 底部部分 -->
        <div class="bottom">
            <div class="b-left"></div>
            <div class="b-right"></div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'VisualAnalysis',
    // 这里可以添加JavaScript逻辑，例如使用ECharts的代码
    mounted() {
        // ECharts初始化代码（示例）
        // 你可以在此处添加你的ECharts初始化逻辑
    }
}
</script>

<style scoped>
/* CSS 样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
a {
    text-decoration: none;
}

body {
    max-height: 100vh;
    height: 100vh;
    background-color: blue;
    background: url('../assets/logo.png') no-repeat;
    background-size: 100% 100%;
}
.heads {
    position: relative;
    height: 60px;
    background-color: rgba(0, 0, 127, 0.5);
    text-align: center;
    margin-bottom: 5px;
}
.heads h3 {
    font-size: 24px;
    line-height: 60px;
    color: #fff;
    font-weight: 700;
}
.heads span {
    color: #fff;
    font-size: 14px;
    position: absolute;
    top: 50%;
    right: 2%;
    transform: translateY(-50%);
}
.middle {
    height: calc(70vh - 15px);
    display: flex;
    margin-bottom: 5px;
}
.m-left {
    width: 25%;
    height: 100%;
    background-color: rgba(0, 0, 127, 0.5);
}
.m-l-top {
    width: 100%;
    height: calc(40% - 5px);
    background-color: rgba(0, 0, 127, 0.5);
    margin-bottom: 5px;
}
.m-l-bottom {
    width: 100%;
    height: 60%;
    background-color: rgba(0, 0, 127, 0.5);
}
.m-middle {
    width: 50%;
    height: 100%;
    background-color: rgba(0, 0, 127, 0.5);
}
.m-right {
    width: 25%;
    height: 100%;
    background-color: rgba(0, 0, 127, 0.5);
}
.m-r-top {
    width: 100%;
    height: calc(50% - 5px);
    background-color: rgba(0, 0, 127, 0.5);
    margin-bottom: 5px;
}
.m-r-bottom {
    width: 100%;
    height: 50%;
    background-color: rgba(0, 0, 127, 0.5);
}
.bottom {
    height: calc(30vh - 60px);
    display: flex;
}
.b-left {
    width: 50%;
    height: 100%;
    background-color: rgba(0, 0, 127, 0.5);
    margin-right: 5px;
}
.b-right {
    width: 50%;
    height: 100%;
    background-color: rgba(0, 0, 127, 0.5);
}
</style>