vue使用echarts的水球图--Component series.liquidFill not exists. Load it first

布满荆棘的人生 2023-02-15 05:27 15阅读 0赞

![在这里插入图片描述][20200604172653454.png]  
[这是官方github][github],

// 它依赖于echarts，先下载echarts，再下载：
    npm install echarts-liquidfill
    
    //  组件内：
    let echarts = require('echarts/lib/echarts')
    import  'echarts-liquidfill'
    
    // 使用
    var chart = echarts.init(document.getElementById('meter'));
    window.onresize = function () {
        chart.resize();
    };
    chart.setOption({
        grid:{
            left: 0,
            top: 0,
            bottom: 0
        },
        series: [{
            type: 'liquidFill',
            waveAnimation: true,
            animation: true,
            data: [0.5, 0.4, 0.3,0.2],   // 波浪
            label: {
                formatter: val + ' m³',    //  值
                fontSize: 30,
                fontFamily: 'Lobster Two',
            },
            radius: '90%',
        }]
    });

--------------------

但是控制台报错：`Component series.liquidFill not exists. Load it first`，修改版本：  
![在这里插入图片描述][20200604172949374.png]

搞定！

[20200604172653454.png]: https://img-blog.csdnimg.cn/20200604172653454.png
[github]: https://github.com/ecomfe/echarts-liquidfill
[20200604172949374.png]: https://img-blog.csdnimg.cn/20200604172949374.png

发表评论取消回复

表情：

评论列表（有 0 条评论，15人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue3+echarts使用水球图

水球图不是echarts内置组件，需要安装搭配vue-echarts组件，该组件可以省略很多开发echarts图表的重复操作，如果init，setOptions等

矫情吗；*/ 2024年03月23日 13:17/ 0 赞/ 125 阅读

相关 Echarts：象形柱图实现水塔水位的动画、水球图和液位柱子图

一、象形柱图 1、vue中使用象形柱图效果图： ![24cf581855754913a012f7522ec802bb.png][] 2、代码实现

柔光的暖阳◎/ 2023年10月14日 22:34/ 0 赞/ 157 阅读

相关 vue使用echarts的水球图--Component series.liquidFill not exists. Load it first

![在这里插入图片描述][20200604172653454.png] [这是官方github][github], // 它依赖于echarts，先下载echar

布满荆棘的人生/ 2023年02月15日 05:27/ 0 赞/ 16 阅读

相关 vue中使用echarts-liquidfill实现水球图

先看效果图 ![在这里插入图片描述][20201021142935315.gif_pic_center] [echarts-liquidfill查看官方文档][echa

冷不防/ 2022年12月17日 02:21/ 0 赞/ 680 阅读

相关 vue2+ts+vue-echart+echart+echarts-liquidfill.js: 画水球图

vue-echart 和 echart的安装参考上文链接 https://blog.csdn.net/u014686399?spm=1003.2018.

冷不防/ 2022年11月12日 11:52/ 0 赞/ 263 阅读

相关 Uncaught (in promise) Error: Component series.map not exists. Load it first

1、错误描述 Uncaught (in promise) Error: Component series.map not exists. Load it first.

布满荆棘的人生/ 2022年04月05日 12:11/ 0 赞/ 587 阅读

相关 echarts-liquidfill 水球图使用

下载及文档：[https://github.com/ecomfe/echarts-liquidfill\api][https_github.com_ecomfe_echarts

╰半橙微兮°/ 2022年03月17日 02:38/ 0 赞/ 1117 阅读

相关 js echarts 水球图

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3

向右看齐/ 2022年02月21日 08:55/ 0 赞/ 414 阅读

相关 ECharts之水球图

效果图 ![在这里插入图片描述][20190725170044129.gif] 背景图片 ![20190725170845879.png][] ![2019072

末蓝、/ 2021年09月30日 05:44/ 0 赞/ 749 阅读

相关 vue大屏中的水球图

参考：[https://www.makeapie.com/editor.html?c=xr1NbmrIZQ][https_www.makeapie.com_editor.htm

深碍√TFBOYSˉ_/ 2021年07月25日 20:32/ 0 赞/ 661 阅读