witDashboard 大屏仪表盘组件

witDashboard是一个基于 ECharts 实现的大屏数据可视化仪表盘组件，采用半环形设计，支持自定义数值、单位和尺寸，具有现代感的渐变色彩效果和流畅的交互体验。

用法实例

<template>
  <div>
    <!-- 基础用法 -->
    <witDashboard :value="65" unit="%" />
    
    <!-- 自定义尺寸 -->
    <witDashboard :value="1200" unit="人" width="200px" height="150px" />
    
    <!-- 动态数据 -->
    <witDashboard :value="dynamicValue" unit="万元" />
    
    <el-button @click="updateValue">更新数值</el-button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const dynamicValue = ref(85)

const updateValue = () => {
  dynamicValue.value = Math.floor(Math.random() * 100)
}
</script>

API

属性名	类型	默认值	描述
width	[String]	'100%'	组件宽度
height	[String]	'100%'	组件高度
value	[String]	'0'	显示的数值
unit	[String]	''	数值单位

功能特性

• 半环形设计：采用优雅的半环形布局，节省空间同时保持视觉冲击力
• 渐变色彩：使用多层次渐变色彩，增强视觉层次感和现代感
• 动态更新：数值变化时自动更新图表，提供平滑的过渡效果
• 响应式设计：自动适应容器尺寸变化，保持良好的显示效果
• 自定义单位：支持设置任意单位，满足不同数据展示需求
• 灵活尺寸：可自定义组件宽度和高度，适应各种布局场景

实现原理

1. ECharts 集成：基于 ECharts 库实现图表绘制，利用 gauge 图表类型构建仪表盘
2. 双层环形结构：
   • 外层环形：装饰性进度环，使用渐变色填充
   • 内层环形：主要数据展示区，显示当前数值和单位
3. 数据驱动：通过监听 value 属性变化，动态更新图表数据
4. 响应式处理：使用 ResizeObserver API 监听容器尺寸变化，自动调整图表大小
5. 视觉优化：
   • 自定义指针样式，隐藏不必要的元素
   • 使用富文本格式分别设置数值和单位的样式
   • 关闭动画效果以提高性能，同时保持数据更新的流畅性

TIP

• 组件依赖 ECharts 库，请确保项目中已正确安装和引入
• value 属性接受字符串类型，但内部会自动转换为数值进行显示
• 单位文本会紧跟在数值后面显示，建议使用简短的单位符号或缩写
• 组件高度建议设置为宽度的 0.7-0.8 倍，以获得最佳的半环形显示效果
• 数值范围默认为 0-100，如果需要展示更大范围的数据，需要修改组件内部的 max 值配置