echarts-liquidfill 水球图使用

╰半橙微兮° 2022-03-17 02:38 1049阅读 0赞

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

下载好之后把 echarts-liquidfill.js  导入项目即可

水球图支持非常高度定制化的需求，包括颜色（color）、大小（radius）、波的振幅（amplitude）、波长（waveLength）、相位（phase）、周期（period）、移动方向（direction）、形状（shape）、动画（waveAnimation）等等，完整的配置项参数参见[水球图 API][API]。

一些常见用途：

*  [在图表中使用多个波形][Link 1]
 *  [改变波浪颜色和不透明度][Link 2]
 *  [使波浪静止][Link 3]
 *  [没有波浪的水][Link 4]
 *  [设置单个波的属性][Link 5]
 *  [更改背景和边框样式][Link 6]
 *  [隐藏图表中的轮廓][Link 7]
 *  [用SVG改变形状][SVG]
 *  [设置动画][Link 8]
 *  [更改文本内容和样式][Link 9]
 *  [改变阴影风格][Link 10]
 *  [设置工具提示][Link 11]
 *  [点击活动][Link 12]
 *  [使元素不可交互][Link 13]

### 一、使用 ###

**1、基本使用**

1）引入 js 文件：

2）准备一个具有宽度的 DOM 容器：

3）通过  [echarts.init][]  方法初始化 echarts 实例并通过 [setOption ][setOption]方法生成水球图：

var myChart = echarts.init(document.getElementById('demo_echarts'));
    
        var option = {
            series: [{
                type: 'liquidFill',
                data: [0.6]
            }]
        };
    
        myChart.setOption(option);

![20190222094214974.png][]     ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70][]

**2、添加一些样式**

var option = {
            title:{
                text: "水球图",
                left: "center"
            },
            backgroundColor: '#ccc', //背景色
            series: [{
                type: 'liquidFill',
                data: [0.6],
                color: ['#afb11b'],
                itemStyle: {         //普通样式
                    opacity: 0.6
                },
                emphasis: {
                    itemStyle: {     //悬停样式
                        opacity: 0.9
                    }
                }
            }]
        };

**3、添加点击事件：**

myChart.setOption(option);
    //添加点击事件
        myChart.on("click",function () {
            console.log(arguments)
            alert(arguments[0].data);
        });

![20190222100031133.png][]

基本使用就 OK 啦

[https_github.com_ecomfe_echarts-liquidfill_api]: https://github.com/ecomfe/echarts-liquidfill#api
[API]: https://github.com/ecomfe/echarts-liquidfill
[Link 1]: https://github.com/ecomfe/echarts-liquidfill#multiple-waves
[Link 2]: https://github.com/ecomfe/echarts-liquidfill#color-and-opacity
[Link 3]: https://github.com/ecomfe/echarts-liquidfill#static-waves
[Link 4]: https://github.com/ecomfe/echarts-liquidfill#still-water
[Link 5]: https://github.com/ecomfe/echarts-liquidfill#change-a-single-wave
[Link 6]: https://github.com/ecomfe/echarts-liquidfill#background-style
[Link 7]: https://github.com/ecomfe/echarts-liquidfill#outline-style
[SVG]: https://github.com/ecomfe/echarts-liquidfill#shape
[Link 8]: https://github.com/ecomfe/echarts-liquidfill#animation
[Link 9]: https://github.com/ecomfe/echarts-liquidfill#change-text
[Link 10]: https://github.com/ecomfe/echarts-liquidfill#shadow
[Link 11]: https://github.com/ecomfe/echarts-liquidfill#tooltip
[Link 12]: https://github.com/ecomfe/echarts-liquidfill#click-event
[Link 13]: https://github.com/ecomfe/echarts-liquidfill#non-interactable
[echarts.init]: https://echarts.baidu.com/api.html#echarts.init
[setOption]: https://echarts.baidu.com/api.html#echartsInstance.setOption
[20190222094214974.png]: https://img-blog.csdnimg.cn/20190222094214974.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70]: /images/20220317/a187296270fd42b981b2b4a1e8296c3c.png
[20190222100031133.png]: /images/20220317/e6666eb7c1f0453495eae45132afeb92.png