首页 > 其他分享 >大屏可视化:阿里 DataV 大屏怎么做自适应的?

大屏可视化:阿里 DataV 大屏怎么做自适应的?

时间:2024-09-04 22:55:35浏览次数:12  
标签:1080 100% innerHeight innerWidth 1920 window 可视化 大屏 DataV

你好,我是沐爸,欢迎点赞、收藏、评论和关注。

阿里 DataV 大屏是一款功能强大的数据可视化应用搭建工具,由阿里云提供,旨在帮助用户通过图形化的界面轻松搭建专业水准的可视化应用。

下面我们一起看下 DataV 大屏 是如何做自适应的?

了解 阿里 DataV 大屏,可注册账号免费试用,时长为1个月。随便打开一个大屏模板,点击画布,编辑器右侧会显示页面配置,其中“缩放方式”即为自适应方案,一共有5种。

一、全屏铺满

特点:
  • 铺满屏幕,不保持纵横比。
  • 页面元素可能被拉伸或压缩。

<template>
  <div id="root-el" :style="{ transform: 'scale(' + x + ',' + y + ')' }">
    这里放一张图片
  </div>
</template>

<script>
  export default {
    data() {
       return {
         x: 1,
         y: 1
       }
     },
    mounted() {
      this.x = window.innerWidth / 1920
      this.y = window.innerHeight / 1080
      window.onresize = () => {
        this.x = window.innerWidth / 1920
        this.y = window.innerHeight / 1080
      }
    }
  }
</script>     

二、等比宽度铺满可滚动

特点:
  • 保持纵横比。
  • 缩小时可能会留白。
  • 屏幕内容被遮挡时显示滚动条,未被遮挡时无滚动条。

<style>
  html {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }
  body {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  body:hover ::-webkit-scrollbar-thumb{
    display: block;
  }
  ::-webkit-scrollbar-thumb {
      display: none;
      background: #525252;
      border-radius: 2px
  }
  ::-webkit-scrollbar-track {
      background: transparent;
  }
  ::-webkit-scrollbar {
      display: block;
      width: 4px;
      height: 4px
  }
  ::-webkit-scrollbar-corner {
      background-color: transparent
  }
  #app {
    width: 100%;
    height: 100%;
  }
</style>
<template>
  <div id="root">
    <div class="preview-page">
      <div id="runtime">
        <div class="datav-common-hoc">
          <div class="datav-com-wrapper">
            <div class="datav-absolute-page-wp" :style="{ height: innerHeight + 'px' }">
              <div id="index" ref="appRef" :style="{ transform: 'scale(' + x + ')' }">
                <div class="bg">
                  ......
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      x: 1,
      y: 1,
      innerHeight: 1080
    }
  },
  mounted() {
    this.x = window.innerWidth / 1920
    this.y = window.innerHeight / 1080
    this.innerHeight = 1080 * this.x
    window.onresize = () => {
      this.x = window.innerWidth / 1920
      this.y = window.innerHeight / 1080
      this.innerHeight = 1080 * this.x
    }
  }
}
</script>

<style lang="scss" scoped>
  #root {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .preview-page {
      width: 100%;
      height: 100%;
      overflow: auto;
      flex: 1 1;
      #runtime {
        width: 100%;
        height: 100%;
        .datav-common-hoc {
          height: 100%;
          width: 100%;
          position: relative;
          .datav-com-wrapper {
            height: 100%;
            width: 100%;
            position: relative;
            transform: translate(0, 0);
            box-sizing: border-box;
            transform-origin: left top;
            overflow: inherit;
            .datav-absolute-page-wp {
              width: 100%;
              height: 100%;
              position: relative;
              overflow: hidden;
              #index {
                width: 1920px;
                height: 1080px;
                background: rgb(255, 255, 255);
                transform-origin: left top;
                overflow: hidden;
                .bg {
                  width: 100%;
                  height: 100%;
                  padding: 16px 16px 0 16px;
                  background-image: url("../assets/pageBg.png");
                  background-size: cover;
                  background-position: center center;
                }
              }
            }
          }
        }
      }
    }
  }
</style>

三、等比高度铺满居中

特点:
  • 保持纵横比
  • 页面居中显示,两侧可能留白。宽度不够时,两侧可能被隐藏。


<template>
  <div id="root">
    <div class="preview-page">
      <div id="runtime">
        <div class="datav-common-hoc">
          <div class="datav-com-wrapper">
            <!--datav-absolute-page-wp 不再动态设置高度-->
            <div class="datav-absolute-page-wp">
              <div id="index" ref="appRef" :style="{ transform: 'scale(' + x + ')', 'margin-left': ml + 'px' }">
                <div class="bg">
                  ......
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        x: 1,
        y: 1,
        ml: 0 // 水平方向的左外边距
      }
    },
    mounted() {
      this.x = window.innerWidth / 1920
      this.y = window.innerHeight / 1080
      this.ml = (window.innerWidth - 1920 * this.y) / 2
      window.onresize = () => {
        this.x = window.innerWidth / 1920
        this.y = window.innerHeight / 1080
        this.ml = (window.innerWidth - 1920 * this.y) / 2
      }
    }
  }
</script>

<style lang="scss" scoped>
  /*保持不变*/
</style>

四、等比高度可滚动

特点:
  • 保持纵横比
  • 窗口宽度大于内容宽度时,右侧留白。窗口宽度小于内容宽度时,显示滚动条。


<template>
  <div id="root">
    <div class="preview-page">
      <div id="runtime">
        <div class="datav-common-hoc">
          <div class="datav-com-wrapper">
            <div class="datav-absolute-page-wp" style="overflow-x: auto;">
              <div class="datav-absolute-page" :style="{width: scaleWidth + 'px', height: innerHeight + 'px'}">
                <div id="index" ref="appRef" :style="{ transform: 'scale(' + y + ')' }">
                  <div class="bg">
                    ......
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        x: 1,
        y: 1,
        scaleWidth: 1920
      }
    },
    mounted() {
      this.x = window.innerWidth / 1920
      this.y = window.innerHeight / 1080
      this.innerHeight = window.innerHeight
      this.scaleWidth = 1920 * this.y
      window.onresize = () => {
        this.x = window.innerWidth / 1920
        this.y = window.innerHeight / 1080
        this.innerHeight = window.innerHeight
        this.scaleWidth = 1920 * this.y
      }
    }
  }
</script>

<style lang="scss" scoped>
  /*保持不变*/
</style>

五、居中

特点:
  • 保持纵横比
  • 无论页面怎么缩放,总保持居中显示

<template>
  <div id="root">
    <div class="preview-page">
      <div id="runtime">
        <div class="datav-common-hoc">
          <div class="datav-com-wrapper">
            <div class="datav-absolute-page-wp">
              <div class="datav-absolute-page" :style="{transform: 'translateX(-50%) translateY(-50%) scale(' + dynamicScale + ')'}">
                <div id="index" ref="appRef">
                  <div class="bg">
                    ......
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        x: 1,
        y: 1,
        dynamicScale: 1
      }
    },
    mounted() {
      if (window.innerWidth / window.innerHeight < 1920 / 1080) {
        this.dynamicScale = (window.innerWidth / 1920)
      } else {
        this.dynamicScale = (window.innerHeight / 1080)
      }
      window.onresize = () => {
        if (window.innerWidth / window.innerHeight < 1920 / 1080) {
          this.dynamicScale = (window.innerWidth / 1920)
        } else {
          this.dynamicScale = (window.innerHeight / 1080)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .datav-absolute-page {
    width: 1920px;
    height: 1080px;
    background: rgb(255, 255, 255);
    transform: translateX(-50%) translateY(-50%) scale(0.550521);
    left: 50%;
    top: 50%;
    position: absolute;
  }
  /*其他保持不变*/
</style>

六、堪称完美的适配

DataV 大屏的5种自适应方案,多多少少都有些缺陷,有没有更完美的适配方式呢?看看下图

上面这种自适应如何实现?我们明天接着唠。

好了,分享结束,谢谢点赞,下期再见。

标签:1080,100%,innerHeight,innerWidth,1920,window,可视化,大屏,DataV
From: https://blog.csdn.net/m0_37943716/article/details/141905932

相关文章

  • 【Python】数据可视化之分类图
    目录条形图箱形图散点图分簇散点图小提琴分簇小提琴条形图条形图是一种直观的图表形式,它通过不同长度的矩形条(即“条形”)来展示数值变量的中心趋势估计值,其中每个矩形的高度直接对应于该组数据的某个中心量度(如均值、中位数等)。此外,为了向观众传达关于这些中心趋势估......
  • 【推荐100个unity插件之32】对中文支持很好的unity插件,集新手引导、本地化多语言、红
    文章目录前言条件官网下载资源安装设置unityinput选项生成配置文件功能1、新手引导文档效果2、本地化多语言功能文档效果3、红点功能文档效果4、刘海屏适配文档效果6、可视化层级管理工具文档效果7、其他完结前言ThunderFireUXTool由网易雷火UX用户体验中......
  • 大屏适配各分辨率屏幕方案及整合动画性能
    每个公司都不可避免会有一些数据可视化的需求,大数据时代,更是一发不可收拾,各种花里胡哨的大屏效果,让前端既烦恼又有些许刺激,刺激是新的挑战带来的,完成了各种风骚的展示效果,那种成就感让人身心愉悦。。。近日笔者也刚从一个大屏项目中展缓一口气,抽时间将遇到的坑,及一些问题的......
  • A-计算机毕业设计定制:76114客户关系管理系统(免费领源码)可做计算机毕业设计JAVA、PHP
    摘 要 随着信息化时代的发展,各行各业都逐渐意识到客户关系管理的重要性。传统的客户管理方式已经无法满足日益增长的客户群体及复杂的业务需求。因此,客户关系管理系统应运而生,以提高服务质量、降低成本、促进营销活动,并实现客户与企业之间更紧密的互动。本文主要探讨如何......
  • 基于VUE2-dataV和echarts实现的可视化大屏,百分比适配PC端
    可视化平台中,数据分别通过仪表盘、环状图、柱形图、曲线图、滚动表格等多种形式展示数据变化。可视化平台大致分为左、中、右三部分,左侧由能耗总览、耗能占比、库存预警构成,中间由数据总览、销售计划完成率构成,右侧由销售统计、销售排名(TOP8)、生产统计构成。平台右上角动态......
  • 四款主流 Docker 可视化工具,免费又好用 - 推荐使用朵云
    前言Docker提供了命令行工具来管理Docker的镜像和运行Docker的容器。我们也可以使用图形工具来管理Docker。目前,主流的Docker图形工具有DockerClouds、DockerUl、Portainer和Shipyard。DockerClouds朵云DockerClouds朵云是一款最简单的,单机环境中的管理Docke......
  • 基于Vue的低代码,6K star的可视化表单设计器工具,多端适配
    FormCreate 是一款基于Vue的低代码可视化表单设计器工具,它通过数据驱动的方式实现了表单的动态渲染。用户仅需通过直观的界面即可快速构建出功能完备的表单。FormCreate 的主要特性包括:多端适配:支持PC和移动设备,内置丰富的插件和强大的功能。国际化:提供中文、英文、......
  • 酒店能源可视化监控管理解决方案
    大型酒店具备住宿、餐饮、娱乐、休闲等丰富多样的功能,为了向顾客提供最优质的服务、提升顾客体验,酒店通常配备了大量基础服务设施,这些设施在为酒店营造舒适环境的同时也消耗了大量能源。随着能源成本在日常运营成本中所占的比重日益升高,节能降耗、提高能源使用效率成为酒店降本增效......
  • python毕业设计-基于大数据爬虫+数据可视化大屏+Python的广东省人口流动数据分析设计
    博主介绍:✌️码农一枚,专注于大学生项目实战开发、讲解和毕业......
  • 【有源码】基于爬虫+python的美食数据分析与可视化flask热门美食推荐系统的设计与实现
    注意:该项目只展示部分功能,如需了解,文末咨询即可。本文目录1.开发环境2系统设计2.1设计背景2.2设计内容3系统展示3.1功能展示视频3.2系统页面4更多推荐5部分功能代码1.开发环境开发语言:Python采用技术:flask、爬虫数据库:MySQL开发环境:PyCharm2系统......