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

目标效果图:

安装:

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

报错:

错误原因:

echartsecharts-liquidfill版本不兼容

echarts-liquidfill插件安装成功,需重启项目(看个人)

echartsecharts-liquidfill版本冲突,(明明重新安装了对应版本缺还是报错),原因:之前进行过多次安转node_modules里面还有之前安装的版本文件,引入文件时有可能会引入不正确(import 'echarts-liquidfill'),例如:
echartsecharts-liquidfill都有可能不小心进行多次安装

解决方法:删除不需要的版本文件,重新启动项目

相关推荐
这是个栗子10 小时前
TypeScript(三)
前端·javascript·typescript·react
前端精髓12 小时前
移除 Effect 依赖
前端·javascript·react.js
lpfasd12314 小时前
TypeScript + Cloudflare 全家桶部署项目全流程
前端·javascript·typescript
前端Hardy14 小时前
字节/腾讯内部流出!Claude Code 2026王炸玩法!效率暴涨10倍
前端·javascript·vue.js
前端Hardy14 小时前
大厂都在偷偷用的 Cursor Rules 封装!告别重复 Prompt,AI 编程效率翻倍
前端·javascript·面试
kyriewen14 小时前
Vite:比Webpack快100倍的“闪电侠”,原理竟然这么简单?
前端·javascript·vite
竹林81814 小时前
RainbowKit快速集成多链钱包连接:从“连不上”到丝滑切换的踩坑实录
前端·javascript
前端Hardy14 小时前
Cursor Rules 完全指南(2026 最新版)
前端·javascript·面试
牛奶15 小时前
浏览器是怎么把代码变成页面的?
前端·javascript·chrome
小智社群15 小时前
贝壳获取小区的名称
开发语言·前端·javascript