{
  "order": 15,
  "key": "progress-ring-chart",
  "type": "progress-ring-chart",
  "name": "进度环",
  "description": "用环形进度条展示单个指标的完成百分比",
  "tags": [
    "charts",
    "进度环",
    "progress-ring-chart",
    "进度",
    "完成率",
    "百分比"
  ],
  "renderer": "echarts",
  "group": "charts",
  "icon": "solar:pie-chart-3-linear",
  "sample_data": true,
  "usage_notes": [
    "默认图表数据仅用于演示，不是真实业务数据",
    "通过顶层 dataId 关联已有数据源，当前后端尚未实现绑定操作",
    "基于 gauge 系列，数据源取第一行，前端按 encode 转成 series.data"
  ],
  "field_groups": [
    "node-base",
    "chart-title",
    "chart-gauge-value",
    {
      "key": "progress-ring-shape",
      "label": "环形",
      "description": "进度环和底环的粗细与端点",
      "fields": [
        {
          "path": "props.option.series.0.progress.width",
          "label": "环宽度",
          "description": "进度环的粗细",
          "value_type": "number",
          "span": 12,
          "minimum": 1,
          "maximum": 60,
          "unit": "px",
          "aliases": [
            "进度环宽度",
            "环的粗细"
          ]
        },
        {
          "path": "props.option.series.0.axisLine.lineStyle.width",
          "label": "底环宽度",
          "description": "进度环下方灰色底环的粗细，通常与环宽度相同",
          "value_type": "number",
          "span": 12,
          "minimum": 1,
          "maximum": 60,
          "unit": "px"
        },
        {
          "path": "props.option.series.0.progress.roundCap",
          "label": "圆角端点",
          "description": "开启后进度环两端为圆角",
          "value_type": "boolean",
          "aliases": [
            "圆角"
          ]
        }
      ]
    },
    "chart-dataset",
    "chart-encode-item"
  ],
  "eventOptions": [
    {
      "label": "点击事件",
      "value": "click"
    },
    {
      "label": "双击事件",
      "value": "dblclick"
    },
    {
      "label": "鼠标进入事件",
      "value": "mouseenter"
    },
    {
      "label": "鼠标离开事件",
      "value": "mouseleave"
    },
    {
      "label": "鼠标按下事件",
      "value": "mousedown"
    },
    {
      "label": "鼠标抬起事件",
      "value": "mouseup"
    },
    {
      "label": "鼠标移动事件",
      "value": "mousemove"
    },
    {
      "label": "鼠标滚轮事件",
      "value": "mousewheel"
    },
    {
      "label": "生命周期事件",
      "value": "vnodeMounted"
    }
  ],
  "schema": {
    "type": "progress-ring-chart",
    "name": "进度环",
    "layout": {
      "x": 0,
      "y": 0,
      "width": 260,
      "height": 260
    },
    "props": {
      "option": {
        "title": {
          "text": "年度目标完成率",
          "top": 8,
          "left": "center",
          "textStyle": {
            "color": "#e5eaf3",
            "fontSize": 16
          }
        },
        "tooltip": {
          "trigger": "item",
          "formatter": "{b}: {c}%"
        },
        "dataset": {
          "source": [
            {
              "name": "完成率",
              "value": 68
            }
          ]
        },
        "series": [
          {
            "type": "gauge",
            "min": 0,
            "max": 100,
            "startAngle": 90,
            "endAngle": -270,
            "center": [
              "50%",
              "56%"
            ],
            "radius": "72%",
            "pointer": {
              "show": false
            },
            "progress": {
              "show": true,
              "roundCap": true,
              "width": 14,
              "itemStyle": {
                "color": "#409eff"
              }
            },
            "axisLine": {
              "lineStyle": {
                "width": 14,
                "color": [
                  [
                    1,
                    "rgba(255, 255, 255, 0.1)"
                  ]
                ]
              }
            },
            "axisTick": {
              "show": false
            },
            "splitLine": {
              "show": false
            },
            "axisLabel": {
              "show": false
            },
            "title": {
              "offsetCenter": [
                0,
                "28%"
              ],
              "color": "#cfd3dc",
              "fontSize": 13
            },
            "detail": {
              "valueAnimation": true,
              "offsetCenter": [
                0,
                "-8%"
              ],
              "color": "#e5eaf3",
              "fontSize": 30,
              "fontWeight": "bold",
              "formatter": "{value}%"
            },
            "encode": {
              "itemName": "name",
              "value": "value"
            }
          }
        ]
      }
    },
    "style": null,
    "events": []
  }
}