水球图

前提

• 属于echart扩展，需要另外下载
• 安装：pnpm install echarts-liquidfill

配置项

type:'liquidFill',
phase:0.5,                          // 起始相位
amplitude:10,                       // 波浪高度
shape:'diamond',                    // 水球形状 'circle'， 'rect'， 'roundRect'， 'triangle'， 'pin'， 'arrow'，'container'
shape:'path://',                    // 自定义形状，svg路径
direction:'left',                   // 水波运动方向
data:[0.5,0.2],                     // 写法一，这里设置多个值时就会出现多个波浪 取值 0到1
data:[
  0.2,{
    value:0.5,                      // 写法二
    direction:'left',               // 水波运动方向
    itemStyle:{},                   // 水波样式内容下同  
    emphasis:{}                     // 鼠标移入之后的样式内容与  itemStyle一致        
  }               
]，
radius:'100%',
color:['#C23531','#fff','red']      // 波浪颜色调色板
center:['50%','50%'],
waveAnimation:true,                 // 是否开启水波动画效果
amplitude:8,                        // 水波的振幅大小
waveLength:10,                      // 水波的长度
waveSpeed:0.05,                     // 水波的速度
animationEasing:'smooth',           // 初始动画加载效果 linear、加速（ease-in）、减速（ease-out）
animationEasingUpdate:'smooth',     // 数据更新动画的缓动效果,同上
animationDuration:100,              // 初始动画时长单位毫秒
animationDurationUpdate:100,        // 数据更新时长单位毫秒
// 水波样式
itemStyle:{
  opacity:0.5,
  color:'red',                      // 水的颜色 
  shadowBlur:10,                    // 水波阴影大小
  shadowColor:'red',                // 水上方空气的颜色
  shadowOffsetX:10,
  shadowOffsetY:10,
},
// 鼠标移入水波时的样式(内容与 itemStyle 一致)
emphasis:{},
// 内圈的背景颜色
backgroundStyle:{
  borderWidth:0,
  color:'red',
  borderColor:'#fff',
  shadowBlur: 0,
  shadowColor: 'none',
  shadowOffsetX: 0,
  shadowOffsetY: 0
},         
// 外圈轮廓的样式
outline:{
  show: false,
  borderDistance: 10,               // 控制内圈与外圈间距
  itemStyle: {
    color: 'none',
    borderWidth:3,
    borderColor:"rgba(40, 36, 36, 1)",
    borderType: "dashed",           // 'solid'、'dotted'
    borderDashOffset: 10,
    shadowBlur:2.5,
    shadowColor:"rgba(228, 2, 2, 1)",
    shadowOffsetX: -1.5,
    shadowOffsetY: 1.5,
    opacity:0.5,
  }
},
label:{
  show: false,
  position: 'inside',         // 标签位置 'left'、'right'、'top'、'bottom'
  baseline: 'middle'          // 标签对齐 "top"、"bottom"
  align:'left',               // 水平对齐方式 "right" 
  color: '#000',              // 文本没被水碰到的原色
  insideColor:'red',          // 文本碰水后的颜色
  fontSize: 12,
  fontWeight: 'normal',
  fontFamily: 'sans-serif',
  formatter: null,            // 格式化标签文本的回调函数
  backgroundColor: 'none',    // 文本框颜色
  borderRadius: 0,
  borderColor: 'none',
  borderWidth: 0,
  padding: [0, 0, 0, 0],
  shadowBlur: 0,
  shadowColor: 'none',
  shadowBlur:20,
  textBorderColor:'red',
  textBorderWidth:10,
  textBorderType:'solid',        // 描边类型
  textBorderDashOffset:10,       // 描边为虚线时的偏移量
  textShadowColor:'transparent', // 文字阴影颜色
  textShadowBlur:10,             // 文字阴影长度
  textShadowOffsetX:10,          // 文字阴影水平偏移量
  textShadowOffsetY:10,          // 文字阴影竖直偏移量
  overflow:'none',               // 文字超出是否截断
  ellipsis:'···',                // 文字截断时末尾显示内容
  shadowOffsetX:20,              // 文本标签的阴影水平偏移
  shadowOffsetY:20,              // 文本标签的阴影竖直偏移
}