250 lines
5.8 KiB
JSON
250 lines
5.8 KiB
JSON
{
|
|
"order": 9,
|
|
"key": "gauge-chart",
|
|
"type": "gauge-chart",
|
|
"name": "仪表盘",
|
|
"description": "用指针和进度弧展示单个指标的当前值或完成率",
|
|
"tags": [
|
|
"charts",
|
|
"仪表盘",
|
|
"gauge-chart"
|
|
],
|
|
"renderer": "echarts",
|
|
"group": "charts",
|
|
"icon": "solar:speedometer-middle-bold",
|
|
"sample_data": true,
|
|
"usage_notes": [
|
|
"默认图表数据仅用于演示，不是真实业务数据",
|
|
"通过顶层 dataId 关联已有数据源，当前后端尚未实现绑定操作"
|
|
],
|
|
"field_groups": [
|
|
"node-base",
|
|
"chart-title",
|
|
"chart-gauge-value",
|
|
{
|
|
"key": "gauge-dial",
|
|
"label": "表盘",
|
|
"description": "仪表盘的指针、刻度和表盘宽度",
|
|
"fields": [
|
|
{
|
|
"path": "props.option.series.0.pointer.show",
|
|
"label": "显示指针",
|
|
"description": "是否显示指针",
|
|
"value_type": "boolean",
|
|
"default": true,
|
|
"aliases": [
|
|
"指针"
|
|
],
|
|
"panel": false
|
|
},
|
|
{
|
|
"path": "props.option.series.0.pointer.itemStyle.color",
|
|
"label": "指针颜色",
|
|
"description": "指针的颜色",
|
|
"value_type": "color",
|
|
"panel": false
|
|
},
|
|
{
|
|
"path": "props.option.series.0.axisLabel.color",
|
|
"label": "刻度文字色",
|
|
"description": "表盘刻度数字的颜色",
|
|
"value_type": "color",
|
|
"aliases": [
|
|
"刻度颜色"
|
|
],
|
|
"panel": false
|
|
},
|
|
{
|
|
"path": "props.option.series.0.axisLabel.fontSize",
|
|
"label": "刻度字号",
|
|
"description": "表盘刻度数字的大小",
|
|
"value_type": "number",
|
|
"minimum": 8,
|
|
"maximum": 48,
|
|
"unit": "px",
|
|
"default": 12,
|
|
"aliases": [
|
|
"刻度大小"
|
|
],
|
|
"panel": false
|
|
},
|
|
{
|
|
"path": "props.option.series.0.axisLine.lineStyle.width",
|
|
"label": "表盘宽度",
|
|
"description": "表盘底弧的粗细",
|
|
"value_type": "number",
|
|
"minimum": 1,
|
|
"maximum": 60,
|
|
"unit": "px",
|
|
"aliases": [
|
|
"底弧宽度"
|
|
],
|
|
"panel": false
|
|
},
|
|
{
|
|
"path": "props.option.series.0.progress.width",
|
|
"label": "进度宽度",
|
|
"description": "进度弧的粗细",
|
|
"value_type": "number",
|
|
"minimum": 1,
|
|
"maximum": 60,
|
|
"unit": "px",
|
|
"aliases": [
|
|
"进度条宽度"
|
|
],
|
|
"panel": false
|
|
}
|
|
]
|
|
},
|
|
"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": "gauge-chart",
|
|
"name": "仪表盘",
|
|
"layout": {
|
|
"x": 0,
|
|
"y": 0,
|
|
"width": 320,
|
|
"height": 280
|
|
},
|
|
"props": {
|
|
"option": {
|
|
"title": {
|
|
"text": "销售目标完成率",
|
|
"top": 8,
|
|
"left": "center",
|
|
"textStyle": {
|
|
"color": "#e5eaf3",
|
|
"fontSize": 16
|
|
}
|
|
},
|
|
"tooltip": {
|
|
"trigger": "item"
|
|
},
|
|
"dataset": {
|
|
"source": [
|
|
{
|
|
"name": "销售目标完成率",
|
|
"value": 72
|
|
}
|
|
]
|
|
},
|
|
"series": [
|
|
{
|
|
"type": "gauge",
|
|
"min": 0,
|
|
"max": 100,
|
|
"startAngle": 210,
|
|
"endAngle": -30,
|
|
"center": [
|
|
"50%",
|
|
"58%"
|
|
],
|
|
"radius": "80%",
|
|
"progress": {
|
|
"show": true,
|
|
"width": 12,
|
|
"itemStyle": {
|
|
"color": "#409eff"
|
|
}
|
|
},
|
|
"axisLine": {
|
|
"lineStyle": {
|
|
"width": 12,
|
|
"color": [
|
|
[
|
|
1,
|
|
"rgba(255, 255, 255, 0.1)"
|
|
]
|
|
]
|
|
}
|
|
},
|
|
"axisTick": {
|
|
"show": false
|
|
},
|
|
"splitLine": {
|
|
"length": 8,
|
|
"lineStyle": {
|
|
"width": 1,
|
|
"color": "#4c4d4f"
|
|
}
|
|
},
|
|
"axisLabel": {
|
|
"color": "#cfd3dc",
|
|
"distance": 16
|
|
},
|
|
"pointer": {
|
|
"itemStyle": {
|
|
"color": "#e5eaf3"
|
|
}
|
|
},
|
|
"title": {
|
|
"offsetCenter": [
|
|
0,
|
|
"72%"
|
|
],
|
|
"color": "#cfd3dc",
|
|
"fontSize": 13
|
|
},
|
|
"detail": {
|
|
"valueAnimation": true,
|
|
"offsetCenter": [
|
|
0,
|
|
"46%"
|
|
],
|
|
"color": "#e5eaf3",
|
|
"fontSize": 28,
|
|
"formatter": "{value}%"
|
|
},
|
|
"encode": {
|
|
"itemName": "name",
|
|
"value": "value"
|
|
}
|
|
}
|
|
]
|
|
}
|
|
},
|
|
"style": null,
|
|
"events": []
|
|
}
|
|
}
|