No.12可视化大屏--vite+vue3 dataV 水位图

一、水位图

 

 1.dataV 官网引入水位图

https://datav-vue3.netlify.app/Guide/Guide.html

2.在waterpond.vue中编写水位图的代码

 

 3. 在modelThird引入waterpond.vue

 

效果：

 4.美化一下水位图

在waterpond.vue 中

<script setup>
import { ref,reactive,onMounted} from 'vue';

const config = ref({
  data: [55],
  shape: 'round',
  waveNum: 3,
  colors: ['#00f0ff', '#0050ff'],
  textStyle: {
    fontSize: 28,
    color: '#ffffff',
    align: 'center',
    baseline: 'middle'
  }
})

</script>

<template>
<div>
  <div class="water-detail">
    累计完成<span>8</span>座
  </div>
  <div class="water-container">
    <div class="glow-circle"></div> <!-- 发光圈 -->
    <dv-water-level-pond :config="config" style="width:180px;height:180px;"/>
  </div>
</div>
</template>

<style scoped>
.water-detail {
  text-align: left; /* 让文字靠左 */
  font-weight: 600;
  padding: 0 5px;
  margin: 0 0 10px 0; /* 去掉左边2% margin，增加一点底部间距 */
}
.water-detail span {
  color: chocolate;
  font-size: 30px;
}
.water-container {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto; /* 水平居中 */
  display: flex;
  align-items: center;
  justify-content: center; 
  animation: breathe 4s ease-in-out infinite;
}

.glow-circle {
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,255,255,0.4) 0%, rgba(0,0,255,0.2) 60%, transparent 80%);
  filter: blur(12px);
  animation: rotate 12s linear infinite;
  z-index: 1;
}

.water-container > *:not(.glow-circle) {
  z-index: 2;
}

/* 呼吸动画：轻微缩放 */
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* 旋转动画：发光圈慢慢转 */
@keyframes rotate {
  0% { transform: rotate(0deg);}
  100% { transform: rotate(360deg);}
}
</style>