- 博客(10)
- 收藏
- 关注
原创 根据滚动条滚动实现控制盒子的大小
思路如下:创建一个盒子,创建两个滚动条,通过使用React Hooks中的useState来定义一个名为state的状态变量,并初始化为一个包含width和height属性的对象。这两个函数会根据输入的值更新state对象中对应的属性。定义了一个接口(interface)叫做State,其中包含了两个属性:width(宽度)和height(高度),它们的类型分别为number(数字)。接口用于描述对象的结构或形状,这里State接口描述了具有width和height属性的对象应该具有的结构。
2024-07-25 14:39:02
180
原创 react可视化大屏中间旋转木马
时间:北京时间2024年6月27日 黄帝纪年第4721年 青龙年今天呢我们来做 react 中间部分的旋转木马。
2024-07-17 19:28:48
627
原创 react可视化大屏右下
时间:北京时间2024年6月26日 黄帝纪年第4721年 青龙年。在这里有一个点需要把数据里的 [ ] 给删掉。最后更新赋值给我们当前的opiton里。日拱一卒无有尽,功不唐捐终入海。先布局排版,让所有数据先出来。到此我们的右下角也先写完了。今天的你有比昨天更加努力吗?出来了以后我们调用后端数据。今天呢我们来写右下角图表。
2024-06-26 20:27:50
119
原创 react可视化大屏右上
解题思路:把我们想要抽离的文件抽离到一个新的文件夹里通过首页调用来实现页面的效果,这样抽离的好处呢更容易简便的方便我们后期的维护,让我们的结构更加的清晰。解题思路:在计算前还是先声明我们的用水量和用电量,然后我们计算用水量和用电量,再把我们计算好的用水量和用电量赋值到我们当前的页面,最后进行渲染实现效果。需要我们手动添加上去。在我们首页的代码量已经非常的高了,接下来写右上角我们把右上角的 图表给抽离出去减轻首页代码的压力。可以看到我们更改了图表的左边距离和下面距离来实现图标填满我们的盒子。
2024-06-26 15:56:24
357
原创 react可视化大屏左下
我们可以看出,当我们把后端的数据渲染到页面上之后我们没有更新他,也可以说虽然我们渲染但是这些数据还不属于我们,所以我们再想办法在刷新页面,把我们渲染的数据赋值给我当前的 opiton 上,让他变成我们自己的数据,完成之后再设置一遍opiton从而让他永久的成为我们想要的数据,成为我们自己的数据。删除完毕后我们先渲染头部的数据,我们应该知道头部的数据是哪个元素,根据元素名我们来从后端调取获取到此元素,把获取的元素来渲染到页面上。控制台可以看到我们的数据了说明拿到后端legend数据了,说明我们写的没问题。
2024-06-25 19:29:57
764
原创 react可视化大屏左上
iconfont 不然我们所使用的 iconfont时间:北京时间2024年6月22日 黄帝纪年第4721年 青龙年今日任务计划:实现左上角布局,实现天气数据渲染现在我们来实现一下这个iconfont 图标先登录iconfont图标官网 :iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具搜索进入,选择喜欢的图标进行添加入库。
2024-06-23 21:31:03
563
1
原创 react大屏可视化布局
这样我们四个部分的小盒子就都出来了,下一次我们写左上角的内容布局排版。{/* 身体左盒子里上盒子 */}{/* 身体左盒子里下盒子 */}{/* 身体右盒子里上盒子 */}{/* 身体右盒子里下盒子 */}1为单独的第一部分,2、3、4为单独的第二部分。/* 身体左盒子里上盒子 *//* 身体左盒子里下盒子 *//* 身体右盒子里上盒子 *//* 身体右盒子里下盒子 */{/* 身体左盒子 */}{/* 身体中盒子 */}{/* 身体右盒子 */}{/* 头部内容盒子 */}{/* 身体内容盒子 */}
2024-06-22 10:22:42
588
6
原创 react项目创建
下面进行创建我们路由包 router文件夹在文件夹里创建 index.js 文件。五、创建我们需要的文件路径 比如我们项目的首页呀等等...... 在。所以在写项目时一定要细心,碰到报错不要害怕慢慢找,看是哪里的问题。文件中导入我们刚才设置好的又有文件并实用这个路由组件并且包裹原始。最后大家在写项目的时候无报错,就算碰到报错也可以轻松找到.下载完毕后开始搭建路由 我们需要一个路由包 在。删除index.js里面不要的相关代码。在App.js里面删除不要的相关代码。文件夹 里面放入我们的相关路径。
2024-06-22 09:30:42
706
原创 react初始创建及使用
要注意:因为这里我只有两个文件夹,所以在配置路由的页面进行路由路径配置而不用重新封装新的组件调用,相对而言这样写比较简洁方便(偷懒方法)文件中导入我们刚才设置好的又有文件并实用这个路由组件并且包裹原始。3、搭建路由:下载包。1、初始显现在相应的。
2024-06-20 18:56:05
687
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人