205 lines
4.7 KiB
JSON
205 lines
4.7 KiB
JSON
{
|
|
"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",
|
|
"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": {
|
|
"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
|
|
}
|
|
},
|
|
"axisTick": {
|
|
"show": false
|
|
},
|
|
"splitLine": {
|
|
"show": false
|
|
},
|
|
"axisLabel": {
|
|
"show": false
|
|
},
|
|
"title": {
|
|
"offsetCenter": [
|
|
0,
|
|
"28%"
|
|
],
|
|
"fontSize": 13
|
|
},
|
|
"detail": {
|
|
"valueAnimation": true,
|
|
"offsetCenter": [
|
|
0,
|
|
"-8%"
|
|
],
|
|
"fontSize": 30,
|
|
"fontWeight": "bold",
|
|
"formatter": "{value}%"
|
|
},
|
|
"encode": {
|
|
"itemName": "name",
|
|
"value": "value"
|
|
}
|
|
}
|
|
]
|
|
}
|
|
},
|
|
"style": null,
|
|
"events": []
|
|
}
|
|
}
|