echarts-liquidfill实现渐变色水波纹

以下是使用echarts-liquidfill实现渐变色水波纹的方法：

1. 在HTML文件中引入echarts.js和liquidfill.js文件。

2. 在HTML文件中添加一个div元素，用于显示水波纹图表。

   <div id="chart" style="width: 600px; height: 400px;"></div>

3. 在JavaScript文件中定义一个echarts实例，并配置水波纹图表的参数。

   // 初始化echarts实例
   var myChart = echarts.init(document.getElementById('chart'));

   // 配置参数
   var option = {
       series: [{
           type: 'liquidFill',           data: [0.6, 0.5, 0.4, 0.3],
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
               offset: 0,
               color: '#00FFFF'
           }, {
               offset: 0.5,
               color: '#00BFFF'
           }, {
               offset: 1,
               color: '#1E90FF'
           }]),
           backgroundStyle: {
               color: '#FFFFFF'
           },
           label: {
               normal: {
                   formatter: (value) => {
                       return (value.value * 100).toFixed(0) + '%';
                   },
                   textStyle: {
                       fontSize: 20
                   }
               }
           }
       }]
   };

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

其中，type为'liquidFill'表示使用水波纹图表，data为一个数组，表示水波纹的高度，color为渐变色，backgroundStyle为背景颜色，label为标签。

4. 在CSS文件中设置div元素的样式。

   #chart {
       margin: 0 auto;
       width: 600px;
       height: 400px;
   }