投稿

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

Vedu • • 资源分享 • 阅读 6142

今天给大家分享一个超优秀的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

赞 (3)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
VeduVedu
0 0
上一篇 2020-11-22 07:18
下一篇 2020-11-23 06:49

相关推荐

发表评论

登录后才能评论