DataDashboard 指标仪表盘

使用 avue-data-dashboard 展示指标仪表盘，通过 option 提供配置和数据。

使用示例

效果预览可直接操作下方示例

查看指标、状态和迷你柱状图，chartData 的每个数字控制一根柱子的高度。

正在加载示例…

<template>
  <avue-data-dashboard :option="option"></avue-data-dashboard>
</template>
<script setup>
import { ref } from 'vue';
const option = ref({
  span: 6,
  data: [
    {
      title: '本周销售额',
      value: 128560,
      unit: '元',
      status: '正常',
      statusType: 'success',
      chartData: [30, 45, 60, 40, 70, 85, 90],
      chartColor: '#67c23a',
      footerText: '周同比',
      footerValue: '+12.5%',
      footerColor: '#67c23a'
    },
    {
      title: '今日访问量',
      value: 8846,
      status: '上升',
      statusType: 'warning',
      chartData: [20, 35, 50, 45, 60, 55, 70],
      chartColor: '#409eff',
      footerText: '日同比',
      footerValue: '+8.2%',
      footerColor: '#409eff'
    },
    {
      title: '新增用户',
      value: 256,
      chartData: [40, 30, 50, 60, 45, 70, 65],
      chartColor: '#e6a23c',
      footerText: '转化率',
      footerValue: '23.5%'
    },
    {
      title: '待处理订单',
      value: 23,
      status: '注意',
      statusType: 'danger',
      chartData: [60, 50, 40, 55, 35, 45, 30],
      chartColor: '#f56c6c',
      footerText: '超时订单',
      footerValue: '3',
      footerColor: '#f56c6c'
    }
  ]
})
</script>

Props

参数	类型	默认值	说明
option	object	{}	组件配置；不使用 option 外的独立 data 属性

option 配置

字段	类型	默认值	说明
data	array	[]	卡片数据，按数组顺序显示
span	number	6	中等及以上屏幕的 24 栅格占位，24 / span 为每行数量
gutter	number	20	栅格间距，单位 px；当前实现传 0 也会回退为 20
animation	boolean	true	是否启用指标数值动画

data 数据项

字段	类型	默认值	说明
title	string	—	指标标题
value	number	—	指标数值
decimals	number	0	小数位数
unit	string	—	单位
status / statusType	string	—	状态标签及 ElTag 类型
chartData	number[]	—	迷你柱状图高度百分比，业务侧提供 0～100 的数值
chartColor	string	#409eff	柱状图颜色
footerText / footerValue / footerColor	string	—	底部说明、值和颜色；footerValue 为 0 时不显示
backgroundColor	string	#fff	背景颜色

使用说明

柱状图直接把 chartData 每项用作 CSS 百分比，不进行归一化、不请求图表数据，也不依赖 ECharts。

span 使用 Element Plus 的 24 栅格体系。布局随屏幕宽度切换，不要把它当成像素宽度；给数字字段传原始数值，单位使用对应的文本字段。

事件与回调

组件未定义业务事件；通过响应式更新 option.data 控制展示。

插槽与方法

当前组件未定义内容插槽。

不需要通过 ref 调用内部渲染方法；更新 option 或 option.data 即可刷新内容。