html页面中实现echarts的水波纹效果

先上效果如图
api地址： https://github.com/ecomfe/echarts-liquidfill#api

第一、引入所需的js

<script src="./dist/echarts/echarts.js"></script>
<script src="./dist/echarts/echarts-liquidfill.min.js"></script>

备注—js资源如下：
1、echarts.js 资源： https://registry.npmjs.org/echarts/-/echarts-5.3.2.tgz
2、echarts-liquidfill 资源： https://codeload.github.com/ecomfe/echarts-liquidfill/zip/refs/heads/master
的dist中

第二、页面结构

<div class="chart" id="chartLiquidfill"></div>

第三、js

// 基于准备好的DOM，初始化echarts实例
var chartLiquidfill= echarts.init(document.getElementById('chartLiquidfill'));

// 指定图表的配置项和数据
var options = {
  series: [{
    type: 'liquidFill',
    radius: '60%',           // 水球图的半径
    center: ['50%', '45%'],  // 整体所在位置
    outline: {
        show: true,
        borderDistance: 2,   // 边框线与图表的距离 数字
        itemStyle: {
            opacity: 1,     // 边框的透明度   默认为 1
            borderWidth: 4, // 边框的宽度
            shadowBlur: 1,  // 边框的阴影范围 一旦设置了内外都有阴影
            shadowColor: '#fff',   // 边框的阴影颜色,
            borderColor: '#73C0DE' // 边框颜色
        }
    },
    // 图形样式
    itemStyle: {
        // color: '#73C0DE', // 水球显示的背景颜色-单色
        // 水球显示的背景颜色-渐变色
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#1ECFFF'
        },{
            offset: 1,
            color: '#1770FD'
        }]),
        opacity: 0.9,   // 波浪的透明度
        shadowBlur: 15, // 波浪的阴影范围
        
    },
    label:{
        normal:{
          textStyle: {
              color: '#242038',           // 在波浪上方时的文字颜色
              insideColor: '#242038',     // 在波浪下方时的文字颜色
              fontSize: 54                // 文字大小

          }
        }
    },
    backgroundStyle: {
        color: '#E3F7FF', // 水球未到的背景颜色
        opacity: 0.1,     // 水球未到的背景颜色的透明度
    },
    // color: ['red', '#0f0', 'rgb(0, 0, 255)'],// 多条水波纹的颜色顺序
    // data: [0.8, 0.6, 0.4], // 多条水波纹的值
    data: [0.8]
  }]
}


// 使用刚指定的配置项和数据显示图表
chartLiquidfill.setOption(options);