当前位置：首页 > news >正文

【React】版本正确安装echarts-liquidfill(水球图表)包引入不成功问题

news 2025/7/28 0:53:28

目标效果图：
在这里插入图片描述

安装：

npm install echarts
npm install echarts-liquidfill

引入：

Import:import * as echarts from 'echarts';
import 'echarts-liquidfill'   或    import 'echarts-liquidfill/src/liquidFill.js'Or:import * as echarts from 'echarts/core';
import 'echarts-liquidfill

需要注意(版本问题)：

echarts5.x 版本适用于 echarts-liquidfill3

echarts4.x 版本适用于 echarts-liquidfill2

在这里插入图片描述

报错：
1.
在这里插入图片描述
2.

错误原因：
1.
echarts与echarts-liquidfill版本不兼容
2.
echarts-liquidfill插件安装成功，需重启项目（看个人）
3.
echarts与echarts-liquidfill版本冲突，（明明重新安装了对应版本缺还是报错），原因：之前进行过多次安转node_modules里面还有之前安装的版本文件，引入文件时有可能会引入不正确（import 'echarts-liquidfill'），例如：
echarts与echarts-liquidfill都有可能不小心进行多次安装
在这里插入图片描述
解决方法：删除不需要的版本文件，重新启动项目