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

news2024/12/12 1:12:13

📜 本文主要内容

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

🔍 大屏效果

数据大屏：点击预览

请添加图片描述

🕹 运行条件

next 12.3.4
echarts 5.4.3
earth-flyline 1.5.4

数据大屏自适应方案

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

方案	实现方式	优点	缺点
vw vh	1.按照设计稿尺寸，将 px 按比例计算转换成 vw，vh	1.可以动态计算图表高度，字体等，灵活性较高 2.当屏幕比例跟 ui 稿不一致时，不会出现两边留白情况	1.每个图表都需要单独做字体、间距、位移的适配，比较麻烦
scale	1.通过 scale 属性，根据屏幕大小，对图表进行整体的等比缩放	1.代码量少，适配简单 2.一次处理后不需要在各个图表中再去单独适配	1.因为是根据 ui 稿等比缩放，当大屏跟 ui 稿的比例不一样时，会出现周边留白情况 2.当缩放比例过大时候，字体会有一点点模糊,就一点点 3.当缩放比例过大时候，事件热区会偏移。
rem + vw vh	1.获得 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可视化地球组件，开箱即用。

支持GeoJSON 格式的数据渲染地图
支持2D平面地图和3D地球渲染
支持地图区域配色，边界线配色，地球配色，鼠标滚轮放大缩小，区域高亮
支持飞线、涟漪的颜色配置和增删操作。
支持鼠标交互事件

使用


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",
    });