echarts-for-react 使用echarts-liquidfill 报错 Uncaught Error: Component series.liquidFill not exists. Load it first.

[zlkjzxj]

import echarts from 'echarts'
import 'echarts-liquidfill';
import ReactCharts from 'echarts-for-react'

const liquidoption = {
            series: [{
                type: 'liquidFill',
                data: [0.6, 0.5, 0.4, 0.3],
                radius: '80%'
            }]
        }

<ReactCharts
            option={liquidoption}
            style={{ height: '340px', width: '100%', }} />

用的create-react-app 创建的项目，不管修改版本还是把js文件放到html里面都不行

一直报错
 Uncaught Error: Component series.liquidFill not exists. Load it first.

[zlkjzxj]

问题已解决，最主要的问题是echarts-liquidfill 版本必须是1.0.5，最新的不行 "echarts": "^3.8.5", "echarts-for-react": "^2.0.4", "echarts-liquidfill": "^1.0.5",

import React, { Component } from 'react' import echarts from 'echarts' import 'echarts-liquidfill' import ReactCharts from 'echarts-for-react'

class MainPanelPhone extends Component {

render() {
    const option = {
        series: [{
            type: 'liquidFill',
            data: [0.6]
        }]
    };
    return (
        <ReactCharts
            option={option}
            style={{ height: '340px', width: '100%' }} />
    )
}

}

export default MainPanelPhone

[Ovilia]

看一下水球图最新版的需要 ECharts 对应版本号

[cn-xufei]

echarts 4.1.0 出现 Component series.liquidFill not exists. Load it first。。。 有临时解决方案吗

[confidence68]

遇到相同问题，用npm or cnpm install echarts-liquidfill 就会出现Component series.liquidFill not exists. Load it first.

然后把node_modules删掉，用yarn重新安装了一下，就好了！

请问这是为什么？cnpm 也是提示安装成功了，node_modules也能找到，也引入了，但是就是提示找不到！

[james55open]

遇到同样问题，有大神能指条明路？

[james55open]

解决了，版本的问题，安装的时候 echarts的版本和echarts-liquidfill 的版本就好写死

[Ovilia]

我之前忘记更新 npm 的版本了……刚刚发布了一下，现在应该可以了

[alexsaurora]

是像楼上一下直接写死echarts和echarts-liquidfill的版本号吗，我写了重新npm install怎么也不行？？

[Ovilia]

直接 npm i echarts-liquidfill 装的 ECharts 和 水球图版本分别是多少？@alexsaurora

[zhangdp]

直接 npm i echarts-liquidfill 装的 ECharts 和 水球图版本分别是多少？@alexsaurora

请问我import ECharts from 'echarts';import 'echarts-liquidfill';echarts v4.1.0，echarts-liquidfill v2.0.2还是提示Component series.liquidFill not exists. Load it first，要怎么弄？

[zsl1549]

问题已解决，最主要的问题是echarts-liquidfill版本必须是1.0.5，最新的不行 “echarts”：“^ 3.8.5”， “echarts-for-react”：“^ 2.0.4”， “echarts -liquidfill“：”^ 1.0.5“，

导入React，来自'react'的{Component} 导入来自 'echarts'import'echarts- liquidfill' 的echarts 导入来自'echarts-for-react'的ReactCharts

class MainPanelPhone扩展Component {

render() {
    const option = {
        series: [{
            type: 'liquidFill',
            data: [0.6]
        }]
    };
    return (
        <ReactCharts
            option={option}
            style={{ height: '340px', width: '100%' }} />
    )
}

}

导出默认MainPanelPhone

指定版本就可以了 ，无奈了。终于不报错了！谢谢！

[gm18235158245]

直接 npm i echarts-liquidfill 装的 ECharts 和 水球图版本分别是多少？@alexsaurora

2.0.3

[summerwintericeman]

"echarts": "^4.9.0", "echarts-for-react": "^2.0.16", "echarts-liquidfill": "1.0.5",

Component series.liquidFill not exists. Load it first. 我的也报错了我是真的不想问的，毕竟上面问了那么多次 有没有个 固定的版本给用的，

[yanghy0403]

echarts4.0以上版本echarts-liquidfill用2.0及以上版本的，echarts4.0以下的echarts-liquidfill用1.0版本

这是我本人的json文件，亲测好用 { "name": "react-mange", "version": "0.1.0", "private": true, "dependencies": { "@ant-design/icons": "^4.3.0", "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "@types/jest": "^26.0.15", "@types/node": "^12.0.0", "@types/react": "^16.9.53", "@types/react-dom": "^16.9.8", "antd": "^4.9.2", "echarts": "^4.9.0", "echarts-for-react": "^2.0.16", "echarts-liquidfill": "^2.0.6", "history": "^5.0.0", "node-sass": "^4.14.1", "react": "^17.0.1", "react-dom": "^17.0.1", "react-router-dom": "^5.2.0", "react-scripts": "4.0.1", "typescript": "^4.0.3", "web-vitals": "^0.2.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "@types/echarts": "^4.9.3", "@types/react-router-dom": "^5.1.6", "node-sass": "^5.0.0", "sass-loader": "^10.1.0" } }

[Lemon-szh]

我的是vue2.0的项目 最初我的也出现相同报错，在我切换过多次版本之后突然就好了 最后使用下面的版本 "echarts": "^4.9.0", "echarts-liquidfill": "^2.0.6", 但是同样的项目在别人拉取并install之后依然出现相同报错

[Lemon-szh]

我的是vue2.0的项目最初我的也出现相同报错，在我切换过多次版本之后突然就好了 最后使用下面的版本 “ echarts”：“ ^ 4.9.0”， “ echarts-liquidfill”： “ ^ 2.0.6”， 但是同样的项目在别人拉取并安装之后依然出现相同报错

解决了，cdn引入webpack配置打包排除的问题.....