vue 实现波浪柱状图效果实例，通过补间动画实现柱状图水面上升的效果。通过svg实现波浪的效果。

组件代码

/**
* @Author: 858834013@qq.com
* @Name: waterSpout
* @Date: 2023年03月27日
* @Desc: 水柱
*/
<template>
  <div class="waterSpout">
    <div class="waterInfo">
      <img class="zhuTop" v-if="height>96" src="./assets/zhuTop.png" alt="">
      <svg class="waves" v-if="height<96" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
           viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
        <defs>
          <path id="gentle-wave"
                d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"/>
        </defs>
        <defs>
          <linearGradient id="gradient-test">
            <stop offset="0%" stop-color="rgba(48, 241, 250, 1.00)"/>
            <stop offset="100%" stop-color="rgba(40, 149, 249, 1.00)"/>
          </linearGradient>
        </defs>
        <g class="parallax">
          <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(31, 137, 184, 1.00)"/>
          <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(31, 137, 184, 1.00)"/>
          <use xlink:href="#gentle-wave" x="48" y="5" fill="url(#gradient-test)"/>
          <use xlink:href="#gentle-wave" x="48" y="7" fill="url(#gradient-test)"/>
        </g>
      </svg>
      <div class="zhuMain" ref="zhuMain"></div>
      <div class="zhudi"></div>
    </div>
  </div>
</template>

<script>
import gsap from "gsap";
import echarts from "echarts";

export default {
  name: "waterSpout",
  components: {},
  data() {
    return {}
  },
  props: {
    height: {
      type: Number,
      default() {
        return 50;
      }
    }
  },
  computed: {},
  mounted() {
    gsap.to(this.$refs.zhuMain, {
      duration: 1.5, height: this.height + '%', onComplete: () => {
        console.log('动画完成')
      }
    })
    // this.drawLine()
  },
  methods: {
    drawLine() {
      var that = this
      window.addEventListener('resize', this.drawLine)
      const myChart = echarts.init(this.$refs.echarts)
      var value = 0.9;
      var data = [value, value, value];
      var option = {
        series: [{
          type: 'liquidFill',
          radius: '100%',
          center: ['50%', '50%'],
          shape: 'rect',
          data: data,
          backgroundStyle: {
            color: 'rgba(28, 93, 157, 1.00)',
          },
          outline: {
            borderDistance: 0,
            itemStyle: {
              borderWidth: 0,
              borderColor: "#6d300e",
              shadowBlur: 0,
            }
          },
          color: [
            {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(48, 241, 250, 1.00)', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: 'rgba(42, 152, 250, 1.00)', // 100% 处的颜色
                },
              ],
            },
          ],
          label: {
            normal: {
              formatter: '',
            }
          }
        }]
      };
      myChart.clear()
      myChart.resize()
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.waterSpout {
  background: url("./assets/shuizhu_kong.png") no-repeat;
  width: 70px;
  height: 320px;
  background-size: 100% 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: column;
  align-content: flex-start;
  overflow: hidden;

  .echarts1 {
    position: relative;
    width: calc(100% - 0px);
    height: 69px;
  }

  .zhudi {
    background: url("./assets/zhudi.png") no-repeat;
    width: 100%;
    height: 18px;
    flex-shrink: 0;
  }

  .zhuMain {
    background: linear-gradient(90deg, #28F1FA 0%, #52D5FF 46%, #2895FA 100%);
    width: calc(100% - 1px);
    height: 0px;
  }

  .waterInfo {
    width: 100%;
    position: relative;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
    align-content: flex-start;
    //height: 100px;
  }
}

.zhuTop {
  flex-shrink: 0;
  width: calc(100% - 1px);
  height: 19px;
}

.waves {
  position: relative;
  width: calc(100% - 1px);
  height: 18px;
  margin-bottom: -5px; /*Fix for safari gap*/
}

.parallax > use {
  animation: move-forever 15s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}

.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}

.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 8s;
}

.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 10s;
}

.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 15s;
}

@keyframes move-forever {
  0% {
    transform: translate3d(-90px, 0, 0);
  }
  100% {
    transform: translate3d(85px, 0, 0);
  }
}
</style>

数据大屏页面渲染效果实例

vue3 可视化数据大屏 - 数据资产大屏