DataProgress 进度指标卡片

使用 avue-data-progress 展示进度指标卡片，通过 option 提供配置和数据。

使用示例

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

修改 count 会同时更新数字和进度条，100 表示完成。

正在加载示例…

<template>
  <el-button style="margin-bottom:12px" @click="option.data.forEach(item => { item.count = (item.count + 10) % 101 })">更新进度</el-button>
  <avue-data-progress :option="option"></avue-data-progress>
</template>
<script setup>
import { ref } from 'vue';
const option = ref({
  span: 6,
  data: [
    {
      click: function (item) {
        alert(JSON.stringify(item));
      },
      title: '转化率（日同比 28%）',
      color: 'rgb(178, 159, 255)',
      count: 32,
      href: 'https://avuejs.com',
      target: '_blank'
    },
    {
      click: function (item) {
        alert(JSON.stringify(item));
      },
      title: '签到率（日同比 11%）',
      color: 'rgb(230, 71, 88)',
      count: 32,
      href: 'https://avuejs.com',
      target: '_blank'
    },
    {
      click: function (item) {
        alert(JSON.stringify(item));
      },
      title: 'CPU使用率',
      color: 'rgb(27, 201, 142)',
      count: 56,
      href: 'https://avuejs.com',
      target: '_blank'
    },
    {
      click: function (item) {
        alert(JSON.stringify(item));
      },
      title: '使用人数',
      color: 'red',
      count: 56,
      href: 'https://avuejs.com',
      target: '_blank'
    }
  ]
})
</script>

Props

参数	类型	默认值	说明
option	object	建议显式传入 { data: [] }	组件配置；不使用 option 外的独立 data 属性

option 配置

字段	类型	默认值	说明
data	array	[]	卡片数据，按数组顺序显示
span	number	8	中等及以上屏幕的 24 栅格占位，24 / span 为每行数量
animation	boolean	true（CountUp 默认）	数字动画，传 false 可整体关闭
decimals	number	0	数字小数位数

data 数据项

字段	类型	默认值	说明
title	string	—	指标名称
count	number	—	数值和进度百分比，业务侧保证在 0～100 之间
color	string / array / function	—	传给 Element Plus Progress 的颜色
animation / decimals	boolean / number	继承 option	单项数字配置；当前使用逻辑或回退，false / 0 不能覆盖 option 中的 true / 非零小数位
href	string	—	点击时跳转的地址；仅执行回调时可不设置
target	string	—	链接打开位置，例如 _blank
click	function	—	点击调用 click(item)，接收当前原始数据项

使用说明

count 同时作为展示值和进度百分比。进度条固定 stroke-width=15、隐藏条内文字；没有独立的 total/max 参数。

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

事件与回调

组件没有通过 $emit 定义业务事件。data[i].click(item) 是配置回调，接收原始数据项；它不是组件 @click 的数据事件。配置 href 时还会进行链接跳转。

插槽与方法

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

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