Echarts typescript liquidfill 水球图波浪渐变色

在 ECharts 中使用水球图（liquidFill）并实现波浪渐变色，可以通过设置 liquidFill.waveAnimation 的相关属性来实现。以下是一个简单的 TypeScript 示例代码：

import * as echarts from 'echarts';
 
// 初始化echarts实例
const chart = echarts.init(document.getElementById('main') as HTMLDivElement);
 
// 配置项
const option = {
    series: [
        {
            type: 'liquidFill',
            radius: '50%',
            center: ['50%', '50%'],
            data: [0.6],
            backgroundStyle: {
                borderColor: 'transparent',
                borderWidth: 0,
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0, color: 'lightblue' // 0% 处的颜色
                        },
                        {
                            offset: 1, color: 'blue' // 100% 处的颜色
                        }
                    ],
                    global: false // 缺省为 false
                }
            },
            waveAnimation: {
                waveLength: '100',
                duration: 3000,
                amplitude: 10
            },
            outline: {
                borderDistance: 0,
                itemStyle: {
                    borderColor: 'rgba(255,255,255,0.5)',
                    borderWidth: 2
                }
            }
        }
    ]
};
 
// 设置配置项
chart.setOption(option);

在这个例子中，backgroundStyle 属性被用来定义水球图背景的样式，包括渐变色。渐变色是通过 color 属性中的 linear 类型来定义的，它包含一个颜色停靠数组 colorStops，其中定义了从上到下的渐变色。waveAnimation 属性用来定义波浪动画的行为，比如波长、持续时间和振幅。