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

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

相关推荐
We་ct20 小时前
LeetCode 120. 三角形最小路径和:动态规划详解
前端·javascript·算法·leetcode·typescript·动态规划
changshuaihua0011 天前
React 入门
前端·javascript·react.js
掘金安东尼1 天前
本周前端与 AI 技术情报|前端下一步 #462
前端·javascript·面试
qq_12084093711 天前
Three.js 工程向:实例化渲染 InstancedMesh 的批量优化
前端·javascript
WebInfra1 天前
Rspack 2.0 正式发布!
前端·javascript·前端框架
代码随想录1 天前
Agent大厂面试题汇总:ReAct、Function Calling、MCP、RAG高频问题
前端·react.js·前端框架
Highcharts.js1 天前
在 React 中使用 useState 和 @highcharts/react 构建动态图表
开发语言·前端·javascript·react.js·信息可视化·前端框架·highcharts
|晴 天|1 天前
Vue 3 实战:打造可拖拽歌词、播放列表的嵌入式音乐播放器
前端·javascript·vue.js
Liu.7741 天前
Vue 3 开发中遇到的报错(2)
前端·javascript·vue.js
|晴 天|1 天前
Vue 3 实现实时通知系统:支持未读计数、红点提醒、一键已读
javascript·vue.js·ecmascript