首页 > 其他分享 >Echarts可视化大屏框架

Echarts可视化大屏框架

时间:2024-08-23 23:03:50浏览次数:10  
标签:rgba color 100% height 可视化 background 127 大屏 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>

 

标签:rgba,color,100%,height,可视化,background,127,大屏,Echarts
From: https://www.cnblogs.com/atrue/p/18377220

相关文章

  • 可视化表单设计生成器可以实现流程化办公吗?
    实现流程化办公一直都是很多客户朋友追求的目标。那么,如何才能实现这一目标?如何为客户提供更优良的产品助力提质、降本、增效?低代码技术平台拥有可视化操作界面、更灵活、更高效、更可靠,是专注于职场办公,助力流程化办公的理想平台。通过本文可以一起走进低代码技术平台、可视化表......
  • Scratch中的数据可视化:点亮编程与艺术的火花
    标题:Scratch中的数据可视化:点亮编程与艺术的火花在数字时代,数据可视化不仅是一种技术,更是一门艺术。Scratch,这款由麻省理工学院媒体实验室开发的编程工具,以其独特的视觉化编程方式,为孩子们开启了编程与艺术结合的大门。本文将详细探讨Scratch是否支持通过编程实现数据可视化......
  • FineBI制作可视化大屏-柱状对比图(8)
    本篇会选取门票价格最高的10个景点,使用FineBI绘制价格和销量的对比柱状图。新建组件,选择柱状对比图。将价格字段拖动到横轴,景点名字段拖动到纵轴,如果由于数据量过大导致页面卡死,可以取消勾选下面的查看所有数据。只需要价格前10的景点,因此选择过滤。添加且条件,根据......
  • 使用FineBi制作可视化大屏-KPI指标卡(9)
    本篇会使用FineBI制作数据指标卡,用来显示整体的数据统计显示。新建组件,选择KPI指标卡。将记录数字段拖动到文本处。然后点击文本修改显示内容和格式。选择自定义设置,将“记录数”修改为景点总数,设置合适的字体大小,加粗显示,并给“记录数(总行数)”换一个颜色。制作完......
  • 数据分析与可视化(Pandas+Matplotlib)
    Pandas用于数据处理https://pandas.pydata.org/docs/Matplotlib用于创建图表https://matplotlib.org/#安装pipinstallpandasmatplotlib#导入importpandasaspdimportmatplotlib.pyplotasplt使用Pandas处理数据#读取数据df=pd.read_csv('data.csv')......
  • echarts 3D 柱状图
    今天开发一个驾驶舱大屏,里面有柱状图的图表,而且是3D的,搜索可视化社区,有找到一个示例【https://www.makeapie.cn/echarts_content/xH0E6KFMcG.html】,纵向的柱子,但我开发的大屏,柱状图有横向、纵向两种,所以在此记录一下,便于下一次开发。注意:示例中是直接把echarts挂在了window上,作为......
  • 【Python爬虫实战】天气数据爬取+数据可视化(完整代码)_爬取天气预报数据并做可视化分析
    一、选题的背景随着人们对天气的关注逐渐增加,天气预报数据的获取与可视化成为了当今的热门话题,天气预报我们每天都会关注,天气情况会影响到我们日常的增减衣物、出行安排等。每天的气温、相对湿度、降水量以及风向风速是关注的焦点。通过Python网络爬虫爬取天气预报让我们快......
  • 【matplotlib教程】数据可视化
    @TOC显示中文和负号matplotlib默认使用英文字库,汉字会乱码,要指定中文字库matplotlib.rcParams['font.family']='simHei'#黑体matplotlib.pyplot.rcParams['axes.unicode_minus']=False #显示负号1.各种绘图函数1.1matplotlib.pyplot.plotdefplot(*args,scalex=......
  • R语言VAR模型的多行业关联与溢出效应可视化分析
    全文链接:https://tecdat.cn/?p=37397 原文出处:拓端数据部落公众号 摘要:本文对医疗卫生、通信、金融、房地产和零售等行业的数据展开深入研究。通过读取数据、计算收益率、构建VAR模型并进行估计,进一步分析各行业变量的影响及残差的协方差与相关矩阵。同时,计算传统溢出效......
  • 数据可视化~~看板的切换设置+光滑折线图
    目录1.问题背景2.安装模块3.绘制柱状图的实现4.对于图表的完善5.重新思索1.问题背景我们想要通过这个用户的获得点赞的数量和她的粉丝数量的比值作为一个指标,我们想要绘制一个柱状图取值管的进行这个排名;下面的这个是今天最后我们实现的终极效果,看看吧,是不是迫不及......