【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都有可能不小心进行多次安装

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

相关推荐
2401_8818283233 分钟前
简易文本处理网页工具|AI 通识课第三次作业
前端·javascript·html
障碍的枫子1 小时前
Vue组件导出&渲染
前端·javascript·vue.js
海带紫菜菠萝汤2 小时前
MSE (Media Source Extensions) 实战:流媒体分块加载与自适应码率
前端·javascript·音视频
张元清2 小时前
React useMount Hook:只在挂载时执行一次的正确姿势 (2026)
javascript·react.js
breeze jiang2 小时前
JavaScript 单例模式:用静态属性保证 Popup 只创建一次
开发语言·javascript·单例模式
No Silver Bullet2 小时前
Vue进阶(贰幺叁)vue.config.js 中 productionSourceMap 作用详解
前端·javascript·vue.js
用户847181054193 小时前
LangChain中间件教程及DeepAgents应用
javascript·agent
huabuyu3 小时前
INP 自动化归因与自愈:如何自动定位、修复并验证一次卡顿
前端·javascript
只一3 小时前
React 性能优化精讲:useCallback 与 useMemo 彻底吃透(附实战案例)
前端·react.js
BreezeJiang3 小时前
浏览器里的 DeepSeek 到底怎么跑起来?关键在 Worker、缓存和流式消息
javascript