echarts echarts-liquidfill 水球图实现伪3D水波效果

原设计稿为下图

可以看到水波的动态效果，有点头炸，自己写个半天动画都没有实现，后面在网上搜索后发现一个好用的东西

echarts-liquidfill 没错，就是他！

原地址链接 gitcode.com/gh_mirrors/…

大家可以自己去看官方文档自己配置想要的效果

可以实现的效果示例可以看这里 www.jianshu.com/p/172b79fa3…

我自己实现的效果

没错！我不会怎么录成GIF.....

废话不多，上代码

父组件 （没错！我封装了一个可以直接开箱用的！）

<Wave :percentage="35" />

子组件内容

<template>
  <div class="bgFarther">
    <div class="w-100% h-100%" id="wive"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import 'echarts-liquidfill';
const props = defineProps({
  percentage: {
    type: Number,
    default: 50,
  },
});

function init() {
  var chartDom = document.getElementById('wive');
  var myChart = echarts.init(chartDom);
  var option;
  const score = props.percentage || 0;
  option = {
    series: [
      {
        type: 'liquidFill',
        radius: '92%',
        color: ['#44BAFF', '#4267FF'],
        data: [
          score / 100,
          {
            value: score / 100,
            direction: 'left',
          },
        ],
        period: 3000,
        waveLength: 130,
        center: ['50%', '50%'],
        label: {
          normal: {
            formatter: String(score) + '%',
            fontSize: 30,
            fontWeight: 400,
            color: '#303136',
            insideColor: '#fff',
          },
        },
        itemStyle: {
          shadowBlur: 0,
        },
        outline: {
          borderDistance: 0,
          itemStyle: {
            borderWidth: 0,
            borderColor: '#fff',
            shadowBlur: 20,
          },
        },
        backgroundStyle: {
          color: {
            type: 'radial',
            x: 0.3,
            y: 0.3,
            r: 0.5,
            colorStops: [
              {
                offset: 0,
                color: '#fcfffe', // 100% 处的颜色
              },
              {
                offset: 1,
                color: '#d8e7fa', // 0% 处的颜色
              },
            ],
          },
        },
      },
    ],
  };

  option && myChart.setOption(option);
}

watch(
  () => props.percentage,
  () => {
    init();
  }
);

onMounted(() => {
  init();
});
</script>

<style scoped>
.bgFarther {
  padding: 0;
  margin: 0;
  width: 180px;
  height: 180px;
  background: url('@/assets/image/wave/bgimg.png') no-repeat center center;
  background-size: cover;
  margin: 0 auto;
}
</style>