Sruirui.-CSDN博客

原创 Echarts图表公共封装组件

在父组件中发请求获取数据，修改option,希望子组件能重新渲染，此时，必须修改后的option和原option不一样。其他组件需要使用图表的时候，导入子组件，传入不同的option就可以渲染。

2024-06-27 15:00:28 107 1

原创 react网页适配和Echars图表适配(个人推荐使用适配2)

启动项目用的是webpack或vite，所以这个插件是运行在打包工具中==>就是给webpack或vite做配置。命令运行完成后，会创建一个config文件夹，其中就包含webpack的配置文件webpack.config.js，就可以对webpack做配置了。在自动生成的config文件里找到像盾牌一样的webpack点进去找到如下图的位置粘贴一段代码。2.对webpack做配置(这个插件是用来将px单位转为rem单位的)1下载插件 npm i postcss-px-to-viewport。

2024-06-26 15:55:56 402 2

原创 react旋转木马动画效果（几个图片椭圆形旋转鼠标移入暂停变色移出继续旋转）

再给dw盒子用onMouseEnter 和 onMouseLeave 写鼠标移入和移出事件。先定义一个数据data 数据中存放旋转的对象给数据绑定状态（useState）在给页面的dom元素绑定一个ref事件在里面遍历渲染出data中的对象。在js页面在useEffect中给每个盒子设置不同的出发时间。在css页面中给渲染的盒子添加定位和动画。

2024-06-25 15:58:35 210

原创 react中国地图渲染点击下钻右击返回

由阿里云DataV数据可视化团队出品，多年深耕数据可视化领域，数据大屏业务开拓者和领航者。致力用震撼而清晰的视觉语言，让更多人读懂大数据，受惠数据驱动的决策方式。并且将复制路径里固定的10000数值改为${data} 后期调用接口根据点击的数值的不同切换不同的地域进行下钻（注意路径外面要用``刀了符号包住！点击事件可以在Echars图表里的配置项手册找到。DataV.GeoAtlas地理小工具系列。

2024-06-25 15:12:42 319

原创 react高德地图渲染(搜索，鹰眼，比例尺，工具条，方向盘)

JS API 结合 React 使用-基础-进阶教程-地图 JS API 2.0 | 高德地图API。地图控件的添加和移除-地图控件-示例中心-JS API 2.0 示例 | 高德地图API。输入提示后查询-POI搜索-示例中心-JS API 2.0 示例 | 高德地图API。再将script里控制查询效果的代码粘到页面里替换掉原来的一小部分。将搜索的盒子放在地图盒子上面（最外面包一个大盒子）再复制效果的代码放到刚刚粘贴的搜索效果样式底下。然后高德地图就出来了（效果如下）然后就完成了（效果如下）

2024-06-24 16:38:00 744

原创 react大屏可视化项目

4.如果需要四个图并且都有标题可以将公共的四个标题封装成一个组件。1.删除多余文件夹并且添加所需要的文件夹。3.主页面根据自己所需要去排版搭建页面。7.未完待续.........

2024-06-22 10:37:02 172

原创 react里Echarts图表引入和调用后台接口渲染数据

将循环的数添加在空数组arr中 : xData.unshift(dayjs(time).format('HH:mm:ss'))然后再根据原本Echarts里的option数据的内容去一一对应替换成你所用接口里的数据。在页面中导入import * as echarts from 'echarts'想要图表数据变成自己需要的去调用后台接口可以先建立一个文件api.js里写接口。const mychart＝echarts.init (useRef绑定的元素)循环所需要数据的长度例如:需要四个数据。

2024-06-21 11:00:30 164

原创 react入门

引入import { useState, useEffect } from 'react'react 脚手架 npm create react-app 项目名称。用useState 定义数据状态用 useEffect 模拟生命周期。在src文件夹中创建router/Router.js路由文件。先下载iconfont文件然后再index.js中引入。下包 npm i react-router-dom。在Home/index.js中写首页内容。在index.js中引入路由文件。

2024-06-20 15:01:17 182 1

2401_85859147的博客