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

小技巧:(如果想对网页图片中的内容进行复制 可以使用超级复制 破解一下网页就可以就行复制)

以下代码可以直接复制 不用使用插件复制

一般都使用pxtorem,源代码用的是px单位进行布局,但是运行起来以后，使用rem进行解析。启动项目用的是webpack或vite，所以这个插件是运行在打包工具中==>就是给webpack或vite做配置。默认使用react脚手架创建的项目,是没有webpack的配置文件,需要执行命令，创建配置文件:

1.先初始化  添加一个临时仓库 进入

2.接下来下包  npm run eject（就会生成如下图所展示文件）

 npm run eject

命令运行完成后，会创建一个config文件夹，其中就包含webpack的配置文件webpack.config.js，就可以对webpack做配置了。

适配方案1:

1下载插件 npm i postcss-px-to-viewport

npm i postcss-px-to-viewport

2.在webpack的配置文件中进行配置

代码:

 require('postcss-px-to-viewport')({
                      viewportWidth: 1920,//设计稿宽度
                         unitPrecision: 3,//转换后的精度
                         viewportHeight: 1080,//设计稿高度
                          unitToConvert: 'vw',//要转换的单位
                         selectorBlackList: [],//忽略转换正则匹配项
                         minPixelValue: 1,//小于等于1px不转换
                         mediaQuery: false,//媒体查询不转换
    
                  })

适配方案2:

1.下载插件 npm i postcss-pxtorem amfe-flexible

在自动生成的config文件里找到像盾牌一样的webpack点进去 找到如下图的位置 粘贴一段代码

2.对webpack做配置(这个插件是用来将px单位转为rem单位的)

代码:

    require('postcss-pxtorem')({
                    rootValue: 192,//换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
                    propList: ['*'],//要转换的属性，默认值['*']
                    mediaQuery: false,//是否使用媒体查询转换
                    minPixelValue: 1,//小于或等于1px不转换为rem
                    unitPrecision: 3,//转换后的精度，即小数点位数
                    exclude: /(node_modules)///忽略某些文件夹
                  })

3.在入口文件中导入另一个插件(监听窗口大小变化,执行转换插件的。)

Echars图表适配网页链接:图表容器及大小 - 概念篇 - 使用手册 - Apache EChartshttps://echarts.apache.org/handbook/zh/concepts/chart-size/

1.找到如下图所示三行代码复制粘贴到所需要的Echars图表页面生命周期里就可以实现效果

代码:

   window.addEventListener('resize', function () {
      myChart.resize();
    });