3D数据大屏实现过程,使用echarts、Next.js

📜 本文主要内容

  • 数据大屏自适应方案
  • 动效 echarts:
    • 3D 立体柱状图
    • 动态流光折线图
  • 3D 地球(飞线、柱状图)
  • 无限滚动列表

🔍 大屏效果

数据大屏: 点击预览

请添加图片描述

🕹 运行条件

  • next 12.3.4
  • echarts 5.4.3
  • earth-flyline 1.5.4

数据大屏自适应方案

开发前在网上进行相关了解以后,目前主要有 vw vh、rem、scale 这三种方案 👇

方案实现方式优点缺点
vw vh1.按照设计稿尺寸,将 px 按比例计算转换成 vw,vh1.可以动态计算图表高度,字体等,灵活性较高
2.当屏幕比例跟 ui 稿不一致时,不会出现两边留白情况
1.每个图表都需要单独做字体、间距、位移的适配,比较麻烦
scale1.通过 scale 属性,根据屏幕大小,对图表进行整体的等比缩放1.代码量少,适配简单
2.一次处理后不需要在各个图表 中再去单独适配
1.因为是根据 ui 稿等比缩放,当大屏跟 ui 稿的比例不一样时,会出现周边留白情况
2.当缩放比例过大时候,字体会有一点点模糊,就一点点
3.当缩放比例过大时候,事件热区会偏移。
rem + vw vh1.获得 rem 的基准值
2.动态的计算 html 根元素的 font-size
3.图表中通过 vw vh 动态计算字体、间距、位移等 适配
1.布局的自适应代码量少,适配简单1.因为是根据 ui 稿等比缩放,当大屏跟 ui 稿的比例不一样时,会出现周边留白情况
2.图表需要单个做字体、间距、位移的适配
  • 如果想简单,客户能同意留白,选用 scale 即可
  • 如果需要兼容不同比例的大屏,并且想在不同比例中都有比较好的效果,图表占满屏幕,类似于移动端的响应式,可以采用 vw vh 的方案
  • 至于 rem,个人觉得就是 scale 和 vw vh 的综合,最终的效果跟 scale 差不多

总的来说,每个方案都各有取舍,根据不同的使用场景可以采取不同的方案,案例中的dashboard采用的是 scale 方案,不过可以根据需求自定义

📖 代码实现

      /*
      JS部分
      */
       //数据大屏自适应函数
    const handleScreenAuto = () => {
        const designDraftWidth = 1920;//设计稿的宽度
        const designDraftHeight = 960;//设计稿的高度
        //根据屏幕的变化适配的比例
        const scale = document.documentElement.clientWidth / document.documentElement.clientHeight < designDraftWidth / designDraftHeight ?
            (document.documentElement.clientWidth / designDraftWidth) :
            (document.documentElement.clientHeight / designDraftHeight);
        //缩放比例
        (document.querySelector('#screen') as any).style.transform = `scale(${scale}) translate(-50%)`;
    }

    //React的生命周期 如果你是vue可以放到mountd或created中
    useEffect(() => {
        //初始化自适应  ----在刚显示的时候就开始适配一次
        handleScreenAuto();
        //绑定自适应函数   ---防止浏览器栏变化后不再适配
        window.onresize = () => handleScreenAuto();
        //退出大屏后自适应消失   ---这是react的组件销毁生命周期,如果你是vue则写在deleted中。最好在退出大屏的时候接触自适应
        return () => window.onresize = null;
    }, [])

    /*
      HTML部分
    */  
    <div className="screen-wrapper">
        <div className="screen" id="screen">

        </div>
     </div>

    /*
      CSS部分  --除了设计稿的宽高是根据您自己的设计稿决定以外,其他复制粘贴就完事
    */  
  .screen-root {
    height: 100%;
    width: 100%;
    .screen {
        display: inline-block;
        width: 1920px;  //设计稿的宽度
        height: 960px;  //设计稿的高度
        transform-origin: 0 0;
        position: absolute;
        left: 50%;

    }

}

动效 echarts 动态流光折线图

效果如下

请添加图片描述

使用echarts 构建带流动光效的折线图,实现代码可以参考另一篇文章,写得比较详细。

基于echarts的带流动光效的折线图

动效 echarts 3D柱状图

效果如下

请添加图片描述

使用echarts 构建3D立体柱状图,实现代码可以参考另一篇文章,写得比较详细。

echarts实现3d柱状图)

3D 地球(飞线、柱状图)

效果如下
请添加图片描述

earth-flyline 基于threejs 封装的3D可视化地球组件,开箱即用。

  1. 支持GeoJSON 格式的数据渲染地图

  2. 支持2D平面地图和3D地球渲染

  3. 支持地图区域配色,边界线配色,地球配色,鼠标滚轮放大缩小,区域高亮

  4. 支持飞线、涟漪的颜色配置和增删操作。

  5. 支持鼠标交互事件

使用

npm i earth-flyline


import earthFlyLine from "earth-flyline";
//请先下载geojson格式的地图文件(可去第三方下载) 然后注册地图,也可以在我的项目src/map路径下查找并下载
//也可通过贴图方式实现,具体详情参考文档说明
import geojson from 'xxx/path/world.json'
earthFlyLine.registerMap("world", geojson);
//获取dom节点作为容器 注:该节点请设置宽高
const dom = document.getElementById("container");
const chart = earthFlyLine.init({
      dom,
      map: "world",
    });

参考资料:
scale 方案参考: 数据大屏最简单自适应方案,无需适配rem单位
GlobeStream3D: 基于Threejs封装的3D地球

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/929374.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

标贝科技受邀出席2024东湖国际人工智能高峰论坛并入选数据要素合作伙伴名单

近日&#xff0c;备受瞩目的2024东湖国际人工智能高峰论坛在中国光谷科技会展中心隆重召开。会议以“智联世界&#xff0c;共创未来”为主题&#xff0c;省市相关单位、专家学者、产学研各界百余家联合体单位齐聚一堂&#xff0c;共话人工智能领域的最新技术及产业发展趋势。会…

unity与android拓展

一.AndroidStudio打包 1.通过Unity导出Android Studio能够打开的工程 步骤 1.设置导出基本信息&#xff1a;公司名、游戏名、图标、包名等关键信息 2.在File——>Build Settings中&#xff0c;勾选 Export Project 选项 3.点击Export 导出按钮 2.在Android Studio中打开Un…

linux通过fork()和execve()调用其他程序在子线程中运行

fork()的的使用见上一期 linux C fork()和系统调用文件-CSDN博客 简单说一下fork的作用就是创造一个子进程和当前进程一起执行下面的代码 pid_t fork(void) execve的作用为&#xff1a;让当前进程内容销毁大部分&#xff0c;重新执行一个程序 int execve (const char *__path…

整数benders分解算法

benders分解是将问题分为限制主问题和子问题&#xff0c;然后主问题向子问题传入变量&#xff0c;接着根据子问题求解的信息向主问题返回割&#xff08;最优割和可行割&#xff09;&#xff0c;这些割以约束的形式被添加到主问题中。其中&#xff0c;子问题因为求解得到的解是可…

Unity之(多语言)Localization本地化工具

一、安装和配置 Localization Localization是Unity基于对多种语言和区域变体所设计的一个本地化工具&#xff0c;常用与切换多国语言时文本、图片的动态替换。 1.安装Localization插件 Window—> Package Manager&#xff0c;打开Package Manager面板 Packages选择Unity Re…

使用Mac下载MySQL修改密码第一篇_数据库

Mac下载MySQL MySQL官网链接MySQL​​​​​​ 当进入到官网后下滑到community社区&#xff0c;进行下载 然后选择community sever下载 这里就是要下载的界面&#xff0c;如果需要下载之前版本的话可以点击archives&#xff0c; 可能会因为这是外网原因&#xff0c;有时候下…

服务器数据恢复—EVA存储硬盘磁头和盘片损坏离线的数据恢复案例

服务器存储数据恢复环境&故障&#xff1a; 一台HP EVA存储中有23块硬盘&#xff0c;挂接到一台windows server操作系统的服务器。 EVA存储上有三个硬盘指示灯亮黄灯&#xff0c;此刻存储还能正常使用。管理员在更换硬盘的过程中&#xff0c;又出现一块硬盘对应的指示灯亮黄…

Linux 网络基础

文章目录 1. 计算机网络背景2. 协议2.1 OSI七层模型2.2 为什么要有TCP/IP协议&#xff1f; 3. 协议与操作系统的关系4. 网络传输基本流程4.1 局域网通信原理4.2 局域网通信流程4.3 跨网络通信流程 5. Socket编程预备知识5.1 端口号5.2 网络字节序5.3 socket编程接口 6. 网络命令…

一站式指导:在Neo4j与PostgreSQL间实现高效数据同步

作者&#xff1a;后端小肥肠 &#x1f347; 我写过的文章中的相关代码放到了gitee&#xff0c;地址&#xff1a;xfc-fdw-cloud: 公共解决方案 &#x1f34a; 有疑问可私信或评论区联系我。 &#x1f951; 创作不易未经允许严禁转载。 姊妹篇&#xff1a; 数据同步的艺术&#…

AI一键生成原创圣诞印花图案

一、引言 随着科技的飞速发展&#xff0c;AI 已经深入到我们生活和工作的各个角落&#xff0c;为创意设计领域带来了前所未有的变革。在圣诞即将来临之际&#xff0c;想要设计独特的圣诞印花图案却又担心缺乏灵感或专业技能&#xff1f;别担心&#xff0c;千鹿 AI 为我们提供了…

视频 的 音频通道提取 以及 视频转URL 的在线工具!

视频 的 音频通道提取 以及 视频转URL 的在线工具&#xff01; 工具地址: https://www.lingyuzhao.top/toolsPage/VideoTo.html 它提供了便捷的方法来处理视频文件&#xff0c;具体来说是帮助用户从视频中提取音频轨道&#xff0c;并将视频转换为可以通过网络访问的URL链接。无…

图片的懒加载

目录 懒加载的来源 事件监听 IntersectionObserver 懒加载的来源 图片的来加载其实就是延迟加载&#xff0c;我们知道浏览器的可视范围是有限的&#xff0c;现在网页的内容越来越丰富&#xff0c;一般网页的内容都是需要滚动才能完成浏览 如果网页有很多图片&#xff0c;然…

【每日刷题】Day162

【每日刷题】Day162 &#x1f955;个人主页&#xff1a;开敲&#x1f349; &#x1f525;所属专栏&#xff1a;每日刷题&#x1f34d; &#x1f33c;文章目录&#x1f33c; 1. 3302. 字典序最小的合法序列 - 力扣&#xff08;LeetCode&#xff09; 2. 44. 通配符匹配 - 力扣&…

Hadoop生态圈框架部署 伪集群版(四)- Zookeeper单机部署

文章目录 前言一、Zookeeper单机部署&#xff08;手动部署&#xff09;1. 下载Zookeeper安装包到Linux2. 解压zookeeper安装包3. 配置zookeeper配置文件4. 配置Zookeeper系统环境变量5. 启动Zookeeper6. 停止Zookeeper在这里插入图片描述 注意 前言 本文将详细介绍Zookeeper的…

捷联惯导原理和算法预备知识

原理和算法预备知识 牛顿第一运动定律-惯性定律&#xff1a;如一物体不受外力作用&#xff0c;它将保持静止状态或匀速直线运动状态不变。 牛顿第二运动定律&#xff1a;表达式为Fma,。其中F为物体所受的合力&#xff0c;m为物体的质量&#xff0c;a为物体的加速度。这个公式…

工业—使用Flink处理Kafka中的数据_ChangeRecord1

使用 Flink 消费 Kafka 中 ChangeRecord 主题的数据,当某设备 30 秒状态连续为 “ 预警 ” ,输出预警 信息。当前预警信息输出后,最近30

简单注册器

简单注册器 还是想查壳 发现这是apx文件 放入JEB里进行反编译 在JEB里使用快捷键Tab 可以反编译 转化成java语言 我们在搜索一下字符串flag 得到了下面这一串字符串 这里他对这串字符串进行了一系列的加密算法 img src"C:\Users\22069\Pictures\Screenshots\屏幕截图 20…

MySQL两阶段提交目的

阶段提交的过程 事务执行阶段&#xff1a;事务开始执行&#xff0c;InnoDB执行SQL语句的具体操作&#xff0c;如数据修改、删除等&#xff0c;并将这些操作记录在内存中。写入Redo Log&#xff08;准备阶段&#xff09;&#xff1a;事务即将提交时&#xff0c;首先将事务相关的…

33 基于单片机的智能窗帘控制系统

目录 一、主要功能 二、硬件资源 三、程序编程 四、实现现象 一、主要功能 基于51单片机&#xff0c;采用DHT11温湿度传感器检测温湿度&#xff0c;滑动变阻器连接ADC0832数模转换器转换模拟,光敏传感器&#xff0c;采用GP2D12红外传感器&#xff0c;通过LCD1602显示屏显示…

Qt关于padding设置不起作用的的解决办法

观察以下的代码&#xff1a; MyWidget::MyWidget(QWidget *parent): QWidget{parent},m_btn(new QToolButton(this)) {this->setFixedSize(500,500);m_btn->setToolButtonStyle(Qt::ToolButtonTextBesideIcon);m_btn->setIcon(QIcon("F:tabIcon/person-white.s…