react-big-screen:超棒的React+DataV数据大屏可视化项目

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

超棒 React DataV 数据大屏可视化项目

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

超棒 React DataV 数据大屏可视化项目

快速安装

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

# 进入目录
cd react-big-screen

# 安装依赖
npm install

# 启动项目
npm run start
超棒 React DataV 数据大屏可视化项目

项目目录

超棒 React DataV 数据大屏可视化项目

项目自适应

项目借助了 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;
}

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

超棒 React DataV 数据大屏可视化项目
超棒 React DataV 数据大屏可视化项目
超棒 React DataV 数据大屏可视化项目
超棒 React DataV 数据大屏可视化项目
超棒 React DataV 数据大屏可视化项目

最后附上项目地址链接。

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

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

内容出处:,

声明:本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。文章链接:http://www.yixao.com/share/15359.html

发表评论

登录后才能评论