📜 本文主要内容
- 数据大屏自适应方案
- 动效 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 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",
});
参考资料:
scale 方案参考： 数据大屏最简单自适应方案，无需适配rem单位
GlobeStream3D: 基于Threejs封装的3D地球