React.js项目安装Recharts报错解决及React图表库推荐

按以下步骤逐一排查即可完成安全安装：

• 清理包管理器缓存
  缓存损坏是安装失败的常见诱因，根据你用的包管理器执行对应命令：
  npm用户执行：npm cache clean --force
  yarn用户执行：yarn cache clean
  pnpm用户执行：pnpm store prune

• 解决依赖版本冲突
  先执行npm list react查看当前项目的React版本：最新版Recharts要求React版本≥18.0.0，2.x旧分支要求React≥16.0.0。如果版本不匹配，要么升级React到要求版本，要么安装适配当前React版本的Recharts版本，比如适配React17的最后一个稳定版安装命令为npm install recharts@2.1.16。
  如果确认版本匹配仍报依赖冲突错误，可执行npm install recharts --legacy-peer-deps跳过peer依赖强校验完成安装，该操作在版本匹配的前提下不会带来安全风险。

• 重置本地依赖环境
  先删除项目下的node_modules文件夹和对应锁文件：npm用户删除package-lock.json，yarn用户删除yarn.lock，pnpm用户删除pnpm-lock.yaml。
  Mac/Linux用户如果报EACCES权限错误，不要用sudo执行安装命令，先修正本地node全局目录权限再操作。
  先执行对应包管理器的install命令重装现有基础依赖，再执行Recharts安装命令。

• 切换国内安装源（国内用户适用）
  如果报错带network timeout、ETIMEDOUT类提示，是官方源网络连接问题，执行npm config set registry https://registry.npmmirror.com/切换到国内镜像源后，重新执行安装命令即可。

• Recharts：React原生声明式API，和React语法适配度最高，常规折线、柱状、饼图、雷达图等通用图表覆盖全，中文文档完善，社区活跃度高，是后台系统常规图表需求的首选，包体积适中。
• echarts-for-react：基于ECharts封装的React适配版本，图表类型覆盖最全，支持3D图表、地图、关系图、热力图等特殊可视化需求，性能优异，自定义程度高，适合做复杂可视化大屏、定制化图表场景，缺点是包体积相对较大。
• Victory：跨端支持的React原生图表库，同时兼容React和React Native，动画交互流畅，API设计简洁优雅，适合对交互细节、动效要求高的C端页面。
• react-chartjs-2：基于Chart.js封装的轻量图表库，包体积极小，基础图表功能完备，适合对包体积敏感、只需要简单图表展示的轻量站点、移动端项目。
• Visx：Airbnb开源的原子化可视化组件库，底层基于D3封装，把图表能力拆成独立的React原子组件，自定义程度拉满，可以完全自由实现符合设计要求的特殊图表，缺点是上手成本高，需要自行拼装图表逻辑。

内容的提问来源于stack exchange，提问作者spectra.shohan