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

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

相关推荐
布局呆星28 分钟前
Vue3 计算属性|从基础缓存到可读写
前端·javascript·vue.js
紫_龙8 小时前
最新版vue3+TypeScript开发入门到实战教程之重要详解readonly/shallowReadOnly
前端·javascript·typescript
蓝莓味的口香糖10 小时前
【vue】初始化 Vue 项目
前端·javascript·vue.js
aikongmeng11 小时前
【Ai】Claude Code 初始化引导
javascript
光影少年11 小时前
数组去重方法
开发语言·前端·javascript
我命由我1234511 小时前
浏览器的 JS 模块化支持观察记录
开发语言·前端·javascript·css·html·ecmascript·html5
weixin_4434785112 小时前
Flutter第三方常用组件包之路由管理
前端·javascript·flutter
程序员小寒14 小时前
JavaScript设计模式(八):命令模式实现与应用
前端·javascript·设计模式·ecmascript·命令模式
Z_Wonderful16 小时前
在 Next.js 中,使用 [id] 或 public 作为文件夹或文件名是两种完全不同的概念,分别对应 动态路由 和 静态资源托管
javascript·网络·chrome
Irene199117 小时前
推荐 React 开发需要在 VS Code 中安装的插件
react.js