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