技术标签: react.js 前端 javascript
最近有点闲,就学习了下react,没想到就把react学完了,觉得还不错,就打算出一把react+datav的简易版可视化数据大屏供大家做个参考。
效果如下
react路由
npm install react-router-dom --save
datav框架
npm install @jiaminghi/data-view-react --save
echarts
npm install echarts --save
在路由上,我是绑定一个index的路由作为组件,然后在index添加自适应的全局容器,当容器设置完成后,就在就在将其他的小的模块给一个个导入进来,
import React, { lazy } from "react";
import style from "../style.module.css"
import { FullScreenContainer, BorderBox11 } from "@jiaminghi/data-view-react";
export default function index() {
return (
<FullScreenContainer > //我是datav的全局容器组件,自适应组件
我是最外层的容器
</FullScreenContainer>
);
}
import React, { lazy, Suspense } from "react";
import { Route, Routes, Navigate } from "react-router-dom";
const Index = lazy(() => import("./index/index.jsx"));
export default function App() {
return (
<div>
<Suspense>
<Routes>
<Route path="/" element={<Navigate to="/index" />}></Route>
<Route path="/index" element={<Index />}></Route>
</Routes>
</Suspense>
</div>
);
}
当出现该内容时,就代表着我们的基础架构已经搭建好 后续我们就要进行分块了
我们在index.jsx里进行区域分块,代码如下
import React, { lazy } from "react";
import style from "../style.module.css"
import { FullScreenContainer, BorderBox11 } from "@jiaminghi/data-view-react";
export default function index() {
return (
<FullScreenContainer class={style.box}>
<BorderBox11 title="香蕉麻花皮测试" class={style.boxa}>
<div className={style.box1}>
<div>
<div className={style.box2}>
</div>
<div className={style.box2}>
</div>
<div className={style.box2}>
</div>
</div>
<div>
<div className={style.box2}>
</div>
<div className={style.box3}>
</div>
</div>
<div>
<div className={style.box2}>
</div>
<div className={style.box2}>
</div>
<div className={style.box2}>
</div>
</div>
</div>
</BorderBox11>
</FullScreenContainer>
);
}
效果如下
在每个文件夹里新建一个index.jsx的文件
我们需要在表格中渲染echarts,并且通过组件引入的方式把他加入到index的主容器当中
小表格的代码如下
import React, { useState, useRef, useEffect } from "react";
import { BorderBox12 } from "@jiaminghi/data-view-react";
import * as echarts from "echarts";
import style from "../style.module.css";
export default function Indexdata() {
const chartsNode = useRef(null);
const [xdata,setxdata]= useState(["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"])
const [ydata,setydata]= useState([150, 230, 224, 218, 135, 147, 260])
const mydata = () => {
var myChart = echarts.init(chartsNode.current);
var option;
option = {
xAxis: {
type: "category",
data: xdata,
},
yAxis: {
type: "value",
},
series: [
{
data: ydata,
type: "bar",
},
],
};
option && myChart.setOption(option);
};
useEffect(() => {
mydata();
});
return (
<BorderBox12 class={style.boxc}>
<div ref={chartsNode} className={style.boxc}></div>
</BorderBox12>
);
}
引入到主体容器当众,并渲染到页面上
效果如下
我们在把其他的依次引入,代码如下:
import React, { lazy } from "react";
import style from "../style.module.css"
import { FullScreenContainer, BorderBox11 } from "@jiaminghi/data-view-react";
const Home1 = lazy(() => import("../home1/IndexData"));
const Home2 = lazy(() => import("../home2/index"));
const Home3 = lazy(() => import("../home3/index"));
const Home4 = lazy(() => import("../home4/index"));
const Home5 = lazy(() => import("../home5/index"));
const Home6 = lazy(() => import("../home6/IndexData"));
const Home7 = lazy(() => import("../home7/index"));
const Home8 = lazy(() => import("../home8/Index"));
export default function index() {
return (
<FullScreenContainer class={style.box}>
<BorderBox11 title="香蕉麻花皮测试" class={style.boxa}>
<div className={style.box1}>
<div>
<div className={style.box2}>
<Home1 />
</div>
<div className={style.box2}>
<Home2 />
</div>
<div className={style.box2}>
<Home3 />
</div>
</div>
<div>
<div className={style.box2}>
<Home4 />
</div>
<div className={style.box3}>
<Home8 />
</div>
</div>
<div>
<div className={style.box2}>
<Home5 />
</div>
<div className={style.box2}>
<Home6 />
</div>
<div className={style.box2}>
<Home7 />
</div>
</div>
</div>
</BorderBox11>
</FullScreenContainer>
);
}
效果图
react的大屏开发还是挺简单的,和vue开发设计思路差不多,就框架的实现代码不一样,最后 贴出源码:
[email protected]:hu-wenwu/react-datav-echarts-view.git
支持作者的请在git上点个赞吧!!以后会继续分享
文章浏览阅读325次,点赞5次,收藏7次。在当今社会,AI伪原创素材及文案被视为各行各业必备的技能之一。无论产品推介、广告宣传抑或内容创作等,皆需优秀的文案加以助益。今朝,承蒙知乎大神关照,将为诸位揭示文案写作之秘辛。一、了解目标受众在撰文案时,应率先明确主要的目标群体。不同社会群体会表现出各异的需求及偏好,唯有深度洞察他们
文章浏览阅读5.1k次。1.新旧SDK对比sentry前不久更新了js-jdk,以前使用的raven-js与webpack-sentry-plugin更新成了@sentry/browser @sentry/webpack-plugin旧 新raven-js @sentry/browser 前端错误日志上报SDKw..._@sentry/browser
文章浏览阅读2k次。Problems[show]ClassificationClusteringRegressionAnomaly detectionAssociation rulesReinforcement learningStructured predictionFeature engineeringFeature learningOnline lea..._data mining and machine learning
文章浏览阅读1.3k次,点赞27次,收藏16次。确实是个好平台,部署个项目很简易,免去了很多运维上的事情。明白项目,采用哪个端口号。微信云托管-流水线配置、Dockerfile、服务配置都会有端口号,要明确配置的端口号是哪个。http 80 和 https 443 ,这两个协议默认的端口,大家都知道,但是也很容易忽略!Dockerfile文件和要部署的项目目录,同级目录才可。(可以通过 目标目录 来锁定目录位置。)在微信云托管中,通过配置环境变量,你可以向容器传递需要的配置信息。这在 Docker 中使用 -e 或 --env 选项_微信云托管
文章浏览阅读1.2w次,点赞2次,收藏10次。1_数学形态学结构元素类型
文章浏览阅读214次。7月至8月,第十一届中国大学生计算机设计大赛在南京、上海和杭州等八个分赛区举行。我校现代教育技术中心负责人带领17名学生携6件作品参加了此次大赛。经过紧张、激烈的技能测试和现场答辩,我校荣获1个二等奖、5个三等奖的好成绩。本届全国大学生计算机设计大赛的参赛作品共分软件应用与开发、微课与教学辅助和数字媒体设计等九个大类,同时又细分为移动应用开发、物联网与智能设备、微电影、数字短片、纪录片等多个小类。..._2018全国计算机大学生设计大赛杭州
文章浏览阅读8.2k次,点赞4次,收藏27次。做为中小站长来说,一般购买了云服务器之后,可以自己在云服务器ECS上搭建数据库,并不需要另外购买云数据库。但是当网站的数据量规模已经大到一定程度之后,这种应用与数据库不分离的模式就会显露弊端了,会出现服务器反应迟缓卡顿现象。云数据库结合云服务器使用,布局站库分离的网站,这样的站库分离模式速度更快,也减少了数据安全风险,更降低了运营成本。云数据库RDS提供高可用、高可靠、高安全、可扩展的托管数据库服务,性能等同于商业数据库,但是价格相比ECS自建数据库,仅需约1/3,相比自购服务器搭建数据库,仅需约._是否有必须云数据库
文章浏览阅读4k次。python安装panas库时,出现Non-zero exit code (1)问题原因:pip版本过低 方法:window+R →cmd→python -m pip install --upgrade pip(要先输入pip确定pip存在,不存在要下载pip)_non-zero exit code (1)
文章浏览阅读356次。(注:本文内容源自Anandtech,雷锋网(公众号:雷锋网)翻译) 对前沿半导体感兴趣的人都知道,Intel最新的制造工艺已经跳票许久了。10nm工艺首次发布是在2014年,最初定于2016年量产,但却一直延期至今。虽然首批使用10nm工艺的移动处理器在2017年底出货,却是以“特供”笔记本电脑的形式与国内一些大学合作推出。 Intel的10..._栅间距 cpp 金属间距 mmp
文章浏览阅读2.5w次。mq:Function not implemented 解决方案_mq_open function not implemented
文章浏览阅读332次。A - 打牌HDU - 1584蜘蛛牌是windows xp操作系统自带的一款纸牌游戏,游戏规则是这样的:只能将牌拖到比她大一的牌上面(A最小,K最大),如果拖动的牌上有按顺序排好的牌时,那么这些牌也跟着一起移动,游戏的目的是将所有的牌按同一花色从小到大排好,为了简单起见,我们的游戏只有同一花色的10张牌,从A到10,且随机的在一行上展开,编号从1到10,把第i号上的牌移到第j号牌上,..._蜘蛛纸牌答案
文章浏览阅读830次,点赞21次,收藏19次。自定义LayoutManager,并且继承LinearLayoutManager,这样就得到一个可以水平排向或者竖向排向的布局策略。如果你接触过SnapHelper应该了解一下LinearSnapHelper和PagerSnapHelper这两个子类类,LinearSnapHelper可以实现让列表的Item居中显示的效果,PagerSnapHelper就可以做到一次滚动一个item显示的效果。