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>