当前位置: 首页 > article >正文

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地球


http://www.kler.cn/a/427919.html

相关文章:

  • Day52:range()函数
  • 仿真设计|基于51单片机的无线投票系统仿真
  • openssl 生成证书 windows导入证书
  • wordpress外贸独立站常用询盘软件
  • 物联网智能项目之——智能家居项目的实现!
  • 《DeepSeek 实用集成:大模型能力接入各类软件》
  • IS-IS三
  • 在 Ubuntu 中解决 Python 程序中 DataFrame 图表中文乱码问题
  • LabVIEW调用Thorlabs的动态库进行开发
  • 【精选】AI Coding 新范式:Windsurf、Cursor、Coze齐上阵
  • 兔子的寿命有多长?
  • 数据库-mysql(基本语句)
  • 四十一:Web传递消息时的编码格式
  • Scala中条件守卫
  • 基于Matlab特征提取与浅层神经网络的数字图像处理乳腺癌检测系统(GUI界面+训练代码+数据集)
  • 架构07-从类库到服务
  • 最优质量运输概述(自用)——一、蒙日问题、Kantorovich问题
  • 数据结构 ——无头单链表
  • 装饰器—购物打折
  • 数据结构基础之《(11)—堆》
  • 【3D AIGC】Img-to-3D、Text-to-3D、稀疏重建(2024年文章汇总)
  • 【技术支持】关于html中移动端innerwidth的问题
  • 『MySQL 实战 45 讲』24 - MySQL是怎么保证主备一致的?
  • C++学习-类+对象+函数
  • 【oracle数据库提示oracle initialization or shutdown in process】
  • Spring完整知识点二