今天给大家分享一个超优秀的React可视化大屏展示模板ReactBigScreen。

react-big-screen 基于react.js+echarts+datav技术构建的大数据模板。支持动态数据渲染、屏幕自适应、图表复用等功能。

快速安装

# 克隆项目
git clone https://gitee.com/MTrun/react-big-screen.git

# 进入目录
cd react-big-screen

# 安装依赖
npm install

# 启动项目
npm run start

项目目录

项目自适应

项目借助了 utils/flexible.js 插件，通过改变 rem 的值来进行适配，原设计为 1920px。

// flexible文件位置: `common/flexible.js`,修改部分如下
function refreshRem() {
  var width = docEl.getBoundingClientRect().width;
  // 最小1366px，最大适配2560px
  if (width / dpr < 1366) {
    width = 1366 * dpr;
  } else if (width / dpr > 2560) {
    width = 2560 * dpr;
  }
  // 原项目是1920px我设置成24等份，这样1rem就是80px
  var rem = width / 24;
  docEl.style.fontSize = rem + 'px';
  flexible.rem = win.rem = rem;
}

非常不错的一款开源可视化大屏项目，大家可以发挥创造力开发出一些有新意的产品。

最后附上项目地址链接。

# gitee仓库地址
https://gitee.com/MTrun/react-big-screen

ok，今天就分享到这里。如果对大数据可视化感兴趣的话，可以去看下哈！