草庐IT

可视化大屏的几种适配方案

银子先生 2023-04-03 原文

对于可视化大屏项目而言，我们主要需要考虑下面两个问题：

        首先是div元素的适配，需要保持每个div元素在不同分辨率的屏幕下依然会显示正常的比例，不会因为不同分辨率的屏幕而变得拉伸变形；

        第二个要考虑的因素是字体，通常情况下我们会吧字体设置为px，但在大屏项目中并不适用，会出现不协调的问题。

解决方案：

一、css3 transform:scale()方法

        在项目中直接使用设计稿中px单位进行开发即可，会对body内所有元素进行缩放，从而不会让echarts图表超出画布；

        需要注意的是，绑定resize事件一定别忘了防抖，页面销毁别忘了移除监听事件

        我们直接使用时如果显示屏幕并不是16:9，那么我们的项目就可能会出现空白，解决方案如下：

function resize() {
          var ratioX = $(window).width() / 1920; //此处的宽高根据自己屏幕的比例修改即可
          var ratioY = $(window).height() / 1080;
          $("body").css({
              transform: "scale(" + ratioX + "," + ratioY + ")",
              transformOrigin: "left top",
              backgroundSize: "100% 100%"
          });
          $("html").css({'overflow':'hidden'})
}

  参考推荐：

           大屏可视化屏幕适配的几种方法 - 掘金

           前端可视化大屏适配方案_接着奏乐接着舞。的博客-CSDN博客_前端大屏适配

二、rem+grid（或百分比）

        当页面首次加载时，判断视口的宽高，如果视口的宽/高 > 16/9 则说明视口宽度比较设计图宽，实际的显示宽度应该等于视口的高度*16/9。

        如果视口的宽/高 < 16/9 则说明视口高度比设计图高，实际的显示宽度应该等于视口的宽度，显示高度应等于视口宽度 / (16/9)。

        然后设置 font-size: pageWidth / 100 px，这样就可以做到100rem等于100% width，之后所有大小的设置都通过rem来做，这样就可以做到适配任意比例的大屏了。

<script>
  const clientWidth = document.documentElement.clientWidth
  const clientHeight = document.documentElement.clientHeight
  window.pageWidth = clientWidth / clientHeight > 16 / 9 ? clientHeight * (16 / 9) : clientWidth
  const pageHeight = pageWidth / (16 / 9)
  const string = `<style>html{
      font-size: ${pageWidth / 100}px
    }</style>`
  document.write(string)
 
  root.style.width = pageWidth + 'px'
  root.style.height = pageHeight + 'px'
  root.style.marginTop = (clientHeight - pageHeight) / 2 + 'px'
</script>

参考链接：大屏可视化之适配和布局_A-Tione的博客-CSDN博客_大屏布局

三、vw和vh适配方案

       屏幕视口宽度 = 100vw，屏幕视口高度 = 100vh

       vw和vh也是css中标准的单位，和px,rem, %一样 vw和vh适配方案，按照设计稿的尺寸，将px按比例计算转为vw和vh

       那么我们需要封装一个处理函数，让它帮我自动计算，这里我用到了scss

//使用scss的math函数，https://sass-lang.com/documentation/breaking-changes/slash-div
@use "sass:math"; 
 
 
//默认设计稿的宽度
$designWidth:1920;
//默认设计稿的高度
$designHeight:1080;
 
 
//px转为vw的函数
@function vw($px) {
  @return math.div($px , $designWidth) * 100vw;
}
 
//px转为vh的函数
@function vh($px) {  
  @return math.div($px , $designHeight) * 100vh;

参考链接：你要的大数据可视化屏幕适配都在这了_油炸皮卡丘的博客-CSDN博客_可视化大屏适配方案

四、其他资源网站

在这里给大家推荐一下一些大屏可视化可能用到的资源网站：

1、Vue 大屏数据展示组件库：DataV

2、地图工具：DataV.GeoAtlas地理小工具系列

3、花里胡哨的echarts进阶图:花里胡哨的echarts:PPChart - 让图表更简单

适配可视化xffxff0chtml$前端$javascript$大屏端$echarts

有关可视化大屏的几种适配方案的更多相关文章

  1. ruby - 在 jRuby 中使用 'fork' 生成进程的替代方案？ - 2

    在MRIRuby中我可以这样做:deftransferinternal_server=self.init_serverpid=forkdointernal_server.runend#Maketheserverprocessrunindependently.Process.detach(pid)internal_client=self.init_client#Dootherstuffwithconnectingtointernal_server...internal_client.post('somedata')ensure#KillserverProcess.kill('KILL',

  2. ruby - Ruby 中的波形可视化 - 2

    我即将开始一个将录制和编辑音频文件的项目，我正在寻找一个好的库(最好是Ruby，但会考虑Java或.NET以外的任何库)以进行实时可视化波形。有人知道我应该从哪里开始搜索吗？ 最佳答案 要流入浏览器的数据量很大。Flash或Flex图表可能是唯一能提高内存效率的解决方案。Javascript图表往往会因大型数据集而崩溃。 关于ruby-Ruby中的波形可视化，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.c

  3. Ruby 守护进程和 JRuby - 备选方案 - 2

    我有一个应用程序正在从Ruby迁移到JRuby(由于需要通过Java提供更好的Web服务安全支持)。我使用的gem之一是daemons创建后台作业。问题在于它使用fork+exec来创建后台进程，但这对JRuby来说是禁忌。那么-是否有用于创建后台作业的替代gem/wrapper？我目前的想法是只从shell脚本调用rake并让rake任务永远运行......提前致谢，克里斯。更新我们目前正在使用几个与Java线程相关的包装器，即https://github.com/jmettraux/rufus-scheduler和https://github.com/philostler/acts

  4. ruby-on-rails - 我应该使用哪个适用于 Ruby 的 CouchDB 适配器？ - 2

    一些我找到的选项是ActiveCouchCouchRESTCouchPotatoRelaxDBcouch_foo我更喜欢GitHub上的项目，因为这让我更容易fork和推送修复。所有这些都符合该要求。我习惯了Rails，所以我喜欢像ActiveRecord模型一样工作的东西。另一方面，我也不希望我和Couch之间太多--毕竟我使用它作为我的数据库是有原因的。最后，它们似乎都得到了相当积极的维护(couch_foo可能是个异常(exception))。所以我想这归结为(不可否认和不幸的)主观:有没有人对他们有过好的或坏的经历？ 最佳答案

  5. ruby-on-rails - 能够处理 rar/tar/zip/7z 的 Ruby/rubyzip 替代方案？ - 2

    关闭。这个问题不符合StackOverflowguidelines.它目前不接受答案。要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于StackOverflow来说是偏离主题的，因为它们往往会吸引自以为是的答案和垃圾邮件。相反，describetheproblem以及迄今为止为解决该问题所做的工作。关闭9年前。Improvethisquestion我想知道是否有人知道Ruby的ruby​​zip替代品，它可以处理各种格式，特别是zip/rar/7z？我知道libarchive，但它对我的目的来说并不完整(它是一个很好的gem)。(澄清一下，libarchive-对我不起作用-因为

  6. ruby-on-rails - 对于 Ruby 应用程序，是否有比 Sanitize 更好的替代方案？ - 2

    我爱Sanitize.这是一个了不起的实用程序。我遇到的唯一问题是，它需要永远准备一个开发环境，因为它使用Nokogiri，这对编译时间来说是一种痛苦。是否有任何程序可以在不使用Nokogiri的情况下执行Sanitize的操作(如果没有别的，只是温和地执行它的操作)？这将以指数方式提供帮助! 最佳答案 Rails有自己的SanitizeHelper。根据http://api.rubyonrails.org/classes/ActionView/Helpers/SanitizeHelper.html,它将Thissanitizehe

  7. ruby-on-rails - 具有六边形架构和 DCI 模式的框架和数据库适配器 - 2

    我尝试用Ruby设计一个基于Web的应用程序。我开发了一个简单的核心应用程序，在没有框架和数据库的情况下在六边形架构中实现DCI范例。核心六边形中有小六边形和网络，数据库，日志等适配器。每个六边形都在没有数据库和框架的情况下自行运行。在这种方法中，我如何提供与数据库模型和实体类的关系作为独立于数据库的关系。我想在将来将框架从Rails更改为Sinatra或数据库。事实上，我如何在这个核心Hexagon中实现完全隔离的rails和mongodb的数据库适配器或框架适配器。有什么想法吗？ 最佳答案 ROM呢？(Ruby对象映射器)。还有

  8. ruby-on-rails - rails3 中 cron 作业的解决方案 - 2

    我尝试每天在我的Rails应用程序中自动记录一些数据。我想知道是否有人知道一个好的解决方案？我找到了https://github.com/javan/whenever，但我想确保在选择之前了解所有选项。谢谢!艾略特 最佳答案 我真的很喜欢whenever-这是一个很棒的Gem，我已经在生产中使用了它。关于它还有一个很好的Railscasts插曲:http://railscasts.com/episodes/164-cron-in-ruby 关于ruby-on-rails-rails3中c

  9. ruby-on-rails - 使用 PostgreSQL 适配器限制 ActiveRecord 迁移 5.0 中的文本列 - 2

    我的迁移看起来像这样classCreateQuestionings现在，当我运行$rakedb:migrate:reset时，在我的db/schema.rb中看不到限制:create_table"questionings",force::cascadedo|t|t.text"body",null:falseend我做错了吗还是这是一个错误？顺便说一下，我使用的是rails5.0.0.beta3和ruby​​2.3.0p0。 最佳答案 t.text在PostgreSQL和textdoesn'tallowforsizelimits中生成

  10. Unity数据可视化图表插件XCharts3.0发布 - 2

    Unity数据可视化图表插件XCharts3.0发布历时8个多月，业余时间，断断续续，XCharts3.0总算发布了。如果要打个满意度，我给3.0版本来个80分。对于代码框架结构设计的调整改动，基本符合预期，甚是满意。相比之前的1.0和2.0版本，我认为3.0才是一个拿得出手给广大开发者使用的版本。1.0发布的时候，很兴奋，从0.1到1.0，也磨了一年，真的等不及想给大家试用了，还特地写过一篇文章以示庆祝。那个时候，1.0虽然还还不够完善，功能也不够丰富，但它是XCharts的开始，没有1.0，也就没有后面的2.0和3.0。后面的2.0发布，做了很多改进和优化，随着版本迭代，慢慢的发现有不少硬

随机推荐