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

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

相关推荐
林希_Rachel_傻希希1 小时前
1小时速通React之Hooks
前端·javascript·面试
石山代码1 小时前
JavaScript 进阶核心知识点
开发语言·javascript·ecmascript
Darling噜啦啦3 小时前
Canvas 游戏开发与数据可视化实战:从飞机大战到 ECharts 报表
前端·echarts·canvas
m0_547486663 小时前
《HTML+CSS+JavaScript+Vue前端开发技术教程》全套PPT课件
javascript·css·html
FliPPeDround3 小时前
告别离线 Agent:deepseek-kit 内置 Web Search,零配置联网搜索
javascript·agent·deepseek
米丘3 小时前
SSE (server-sent events)
javascript·网络协议
桜吹雪4 小时前
所有智能体架构(3):Planning(计划任务)
javascript·人工智能·langchain
gCode Teacher 格码致知4 小时前
Javascript技术:CSS 中rem、vh 和 px各有其最佳适用场景-由Deepseek产生
开发语言·javascript·css
fastjson_4 小时前
Edge浏览器开启IE兼容模式
javascript·edge·html
饼饼饼5 小时前
React19 新手指南:JSX 没那么难,用好这几条规则就够了
前端·javascript·react.js