---
url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/elements/circle-counter'
title: '添加环形计数器 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T13:50:37+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  动画圆环填充到关键数字，展示比率或得分。用它在落地页或关于页突出一项数据。

  添加环形计数器
  登录后打开页面：悬停内容区即出现构建器控件。您的第一页介绍基础操作。
tags:
  - 'Data and motion'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T13:50:37+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 添加环形计数器
      description: |-
        动画圆环填充到关键数字，展示比率或得分。用它在落地页或关于页突出一项数据。

        添加环形计数器
        登录后打开页面：悬停内容区即出现构建器控件。您的第一页介绍基础操作。
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T13:50:37+0000'
      dateModified: '2026-10-24T13:50:37+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/elements/circle-counter'
      articleSection: 数据与动效
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/elements/circle-counter'
      description: |-
        动画圆环填充到关键数字，展示比率或得分。用它在落地页或关于页突出一项数据。

        添加环形计数器
        登录后打开页面：悬停内容区即出现构建器控件。您的第一页介绍基础操作。
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: 首页
            item: 'https://dxpr.com/zh-hans'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: zh-hans
---
[帮助中心](/zh-hans/node/75)/[文档](/zh-hans/hc/documentation) /[学习 DXPR Builder](/zh-hans/hc/documentation/learn-dxpr-builder) /[搭建页面](/zh-hans/hc/documentation/learn-dxpr-builder/build) /[添加内容](/zh-hans/hc/documentation/learn-dxpr-builder/elements) /[数据与动效](/zh-hans/hc/documentation/learn-dxpr-builder/elements/data-and-motion) # 添加环形计数器.

 学习 DXPR Builder搭建页面添加内容数据与动效

   ## 本指南内容

 相关指南

- [在样式面板中改变元素外观](/zh-hans/hc/documentation/learn-dxpr-builder/element-settings/style-tab)

动画圆环填充到关键数字，展示比率或得分。用它在落地页或关于页突出一项数据。

## 添加环形计数器

登录后打开页面：悬停内容区即出现构建器控件。[您的第一页](/hc/documentation/learn-dxpr-builder/getting-started/first-page)介绍基础操作。

1. 悬停列，点击其控制栏中的 **+**；空白页面请点击 **Add Elements**。打开 **Content** 选项卡并点击 **Circle counter**。它落在列顶部，设置对话框打开。
2. 拖动 **Percent** 滑杆设置圆环填充比例，或在旁边的框中输入数值。这里设为 78。
3. 在 **Foreground color** 中选择弧线颜色。
4. 打开 Circle content 分区，输入指标的 **Text** 标签。
5. 在下方的 **Icon** 字段中，在 **Search** 框输入 chart 并点击网格中的图标。
6. 点击对话框中的 **Save**。再点击内容区顶部工具栏中的 **Save** 保存页面。

  ## 您会看到的内容

圆环填充到您设置的百分比，图标和标签居中。视频中它是紫色，填充到 78%，文字为 Renewal rate。圆环滚入视野时播放动画。保存并发布页面后访客可见。

## 设置您的环形计数器

悬停元素，在其控制栏打开 **More > Settings**。选项：

- **Percent:** 圆环填充比例，0 到 100。
- **Dimension:** 圆的尺寸，单位像素，100 到 500。
- **Foreground color:** 填充弧的颜色。
- **Background color:** 空轨道的颜色。
- **Fill color:** 圆内的颜色。
- **Foreground width:** 弧线的粗细。
- **Animation:** 弧线从零填充。**Animation duration** 和 **Animation delay** 以毫秒设置时间。
- **Animation in-viewport:** 等圆环滚入视野再播放动画。

每个滑杆旁边都有数字框，可输入精确值。**Circle content** 分区设置中间显示的内容：

- **Show progress:** 显示百分比数字，替代您自己的文本和图标。默认关闭。
- **Text:** 短标签。**Font size** 和 **Text color** 设置其样式。
- **Info:** 文本下方小一号的第二行。
- **Icon:** 文本前的图标。**Search** 旁的下拉菜单把网格限定为一个图标集。**Icon size** 和 **Icon color** 设置其样式。

## 如果看不到它

- **Content 选项卡中没有 Circle counter。** 您的用户档案隐藏了它。请管理员到[用户档案](/zh-hans/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin)启用。
- **重新加载后消失。** 页面未保存。请重新添加并点击内容区顶部工具栏中的 **Save**。
- **圆环太淡或缺失。** **Foreground color** 和 **Background color** 与页面颜色太接近。请悬停元素打开 **More > Settings**，选择对比更强的颜色。
- **圆环不动。** **Animation** 已关闭，或圆环等待滚入视野。请打开 **Animation** 并把圆环滚入视野。
- **文本和图标不显示。** **Show progress** 已打开，圆环显示百分比。请在 **Circle content** 下关闭 **Show progress**。

## 接下来做什么？

[样式选项卡](/hc/documentation/learn-dxpr-builder/element-settings/style-tab)：改变环形计数器的间距和背景。