feat：更新物料
This commit is contained in:
@@ -0,0 +1,579 @@
|
||||
{
|
||||
"order": 17,
|
||||
"key": "stat-card",
|
||||
"type": "stat-card",
|
||||
"name": "指标卡",
|
||||
"description": "突出显示一个关键数字（如销售额、订单数、转化率），可带前后缀、万/亿换算、环比同比等对比和涨跌颜色，以及迷你趋势线",
|
||||
"tags": [
|
||||
"info",
|
||||
"指标卡",
|
||||
"KPI",
|
||||
"数字",
|
||||
"统计",
|
||||
"stat"
|
||||
],
|
||||
"renderer": "stat",
|
||||
"group": "info",
|
||||
"icon": "solar:graph-up-bold",
|
||||
"sample_data": true,
|
||||
"usage_notes": [
|
||||
"默认数值仅用于演示，不是真实业务数据",
|
||||
"一个指标卡只显示一个指标，多个指标用多个指标卡并排",
|
||||
"百分比指标写成百分数，例如 4.2 表示 4.2%，后缀写 %",
|
||||
"对比的数值是变化量：正数上升、负数下降，前端按正负显示箭头；百分比变化写百分数，比率指标的变化后缀写“个百分点”",
|
||||
"成本、退款率、投诉量等越低越好的指标把 downIsGood 设为 true，涨跌颜色随之反过来",
|
||||
"数值、对比的变化量和趋势数据可以写 $query：数值和变化量的结果要一行一列，趋势数据只选一列",
|
||||
"迷你趋势线的 trend.data 是按时间先后排列的一组数字；trend.show 设为 true 才显示",
|
||||
"前缀、后缀、说明为空字符串时不显示；对比用 show 控制是否显示"
|
||||
],
|
||||
"field_groups": [
|
||||
"node-base",
|
||||
{
|
||||
"key": "stat-content",
|
||||
"label": "指标",
|
||||
"description": "指标名、数值、前后缀和数值下方的补充说明",
|
||||
"fields": [
|
||||
{
|
||||
"path": "props.title",
|
||||
"label": "指标名",
|
||||
"description": "显示在数值上方的指标名称，是用户在大屏上看到的卡片名字",
|
||||
"value_type": "string",
|
||||
"aliases": [
|
||||
"标题",
|
||||
"名称",
|
||||
"指标名称",
|
||||
"卡片标题"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.value",
|
||||
"label": "数值",
|
||||
"description": "指标的数值，写原始数字；万/亿换算、小数位和千分位由数值格式控制",
|
||||
"value_type": "number",
|
||||
"aliases": [
|
||||
"数字",
|
||||
"指标值",
|
||||
"数据"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.prefix",
|
||||
"label": "前缀",
|
||||
"description": "数值前面的符号，例如 ¥；为空时不显示",
|
||||
"value_type": "string",
|
||||
"aliases": [
|
||||
"货币符号",
|
||||
"符号"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.suffix",
|
||||
"label": "后缀",
|
||||
"description": "数值后面的单位，例如 %、单、人；为空时不显示",
|
||||
"value_type": "string",
|
||||
"aliases": [
|
||||
"单位"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.detail",
|
||||
"label": "说明",
|
||||
"description": "数值下方的一行补充说明，例如“目标完成率 86%”；为空时不显示",
|
||||
"value_type": "string",
|
||||
"aliases": [
|
||||
"补充说明",
|
||||
"备注",
|
||||
"副标题",
|
||||
"描述"
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "stat-format",
|
||||
"label": "数值格式",
|
||||
"description": "数值的万/亿换算、小数位数、千分位和数字滚动动画",
|
||||
"fields": [
|
||||
{
|
||||
"path": "props.scale",
|
||||
"label": "大数单位",
|
||||
"description": "数值换算成万或亿后显示，单位字紧跟在数值后面、后缀前面；换算后至少保留三位有效数字",
|
||||
"value_type": "enum",
|
||||
"options": [
|
||||
{
|
||||
"value": "none",
|
||||
"label": "原值",
|
||||
"description": "不换算"
|
||||
},
|
||||
{
|
||||
"value": "auto",
|
||||
"label": "自动",
|
||||
"description": "1 亿及以上显示为亿，10 万及以上显示为万，更小的显示完整数字"
|
||||
},
|
||||
{
|
||||
"value": "wan",
|
||||
"label": "万"
|
||||
},
|
||||
{
|
||||
"value": "yi",
|
||||
"label": "亿"
|
||||
}
|
||||
],
|
||||
"aliases": [
|
||||
"单位换算",
|
||||
"万元",
|
||||
"亿元",
|
||||
"数量级"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.precision",
|
||||
"label": "小数位",
|
||||
"description": "最多保留的小数位数，末尾的 0 不显示",
|
||||
"value_type": "integer",
|
||||
"minimum": 0,
|
||||
"maximum": 4,
|
||||
"aliases": [
|
||||
"精度",
|
||||
"小数位数",
|
||||
"保留几位小数"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.separator",
|
||||
"label": "千分位",
|
||||
"description": "整数部分是否每三位加逗号，例如 8,420",
|
||||
"value_type": "boolean",
|
||||
"aliases": [
|
||||
"千分位分隔符",
|
||||
"逗号"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.animate",
|
||||
"label": "数字动画",
|
||||
"description": "数值变化时从旧值滚动到新值",
|
||||
"value_type": "boolean",
|
||||
"aliases": [
|
||||
"滚动动画",
|
||||
"动画",
|
||||
"数字滚动"
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "stat-compare",
|
||||
"label": "对比",
|
||||
"description": "数值下方最多两项对比（如环比、同比），以及涨跌对应的好坏颜色",
|
||||
"fields": [
|
||||
{
|
||||
"path": "props.downIsGood",
|
||||
"label": "下降为好",
|
||||
"description": "指标越低越好时开启（成本、退款率等），下降显示好的颜色、上升显示坏的颜色",
|
||||
"value_type": "boolean",
|
||||
"aliases": [
|
||||
"越低越好",
|
||||
"反转涨跌颜色",
|
||||
"涨跌颜色反转"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.compare.show",
|
||||
"label": "显示对比1",
|
||||
"description": "是否显示第一项对比",
|
||||
"value_type": "boolean",
|
||||
"aliases": [
|
||||
"显示环比",
|
||||
"隐藏环比",
|
||||
"显示对比"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.compare.label",
|
||||
"label": "对比1名称",
|
||||
"description": "第一项对比的名称，例如 环比、较上月",
|
||||
"value_type": "string",
|
||||
"aliases": [
|
||||
"环比名称",
|
||||
"对比名称"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.compare.value",
|
||||
"label": "对比1数值",
|
||||
"description": "第一项对比的变化量，正数上升、负数下降，例如 12.5 配合后缀 % 显示为上升 12.5%",
|
||||
"value_type": "number",
|
||||
"aliases": [
|
||||
"环比",
|
||||
"环比数值",
|
||||
"增长率",
|
||||
"涨幅",
|
||||
"变化"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.compare.suffix",
|
||||
"label": "对比1后缀",
|
||||
"description": "第一项对比数值后的单位，例如 %、个百分点；为空时不显示",
|
||||
"value_type": "string",
|
||||
"aliases": [
|
||||
"环比单位"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.compare2.show",
|
||||
"label": "显示对比2",
|
||||
"description": "是否显示第二项对比",
|
||||
"value_type": "boolean",
|
||||
"aliases": [
|
||||
"显示同比",
|
||||
"隐藏同比"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.compare2.label",
|
||||
"label": "对比2名称",
|
||||
"description": "第二项对比的名称，例如 同比、较目标",
|
||||
"value_type": "string",
|
||||
"aliases": [
|
||||
"同比名称"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.compare2.value",
|
||||
"label": "对比2数值",
|
||||
"description": "第二项对比的变化量，正数上升、负数下降",
|
||||
"value_type": "number",
|
||||
"aliases": [
|
||||
"同比",
|
||||
"同比数值"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.compare2.suffix",
|
||||
"label": "对比2后缀",
|
||||
"description": "第二项对比数值后的单位，例如 %、个百分点；为空时不显示",
|
||||
"value_type": "string",
|
||||
"aliases": [
|
||||
"同比单位"
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "stat-trend",
|
||||
"label": "趋势线",
|
||||
"description": "卡片上的迷你趋势线：只看走势，不显示坐标轴和数值",
|
||||
"fields": [
|
||||
{
|
||||
"path": "props.trend.show",
|
||||
"label": "显示趋势线",
|
||||
"description": "是否显示迷你趋势线",
|
||||
"value_type": "boolean",
|
||||
"aliases": [
|
||||
"迷你图",
|
||||
"迷你趋势线",
|
||||
"走势图",
|
||||
"sparkline",
|
||||
"隐藏趋势线"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.trend.type",
|
||||
"label": "趋势图类型",
|
||||
"description": "迷你趋势线的画法",
|
||||
"value_type": "enum",
|
||||
"options": [
|
||||
{
|
||||
"value": "line",
|
||||
"label": "折线"
|
||||
},
|
||||
{
|
||||
"value": "area",
|
||||
"label": "面积"
|
||||
},
|
||||
{
|
||||
"value": "bar",
|
||||
"label": "柱状"
|
||||
}
|
||||
],
|
||||
"aliases": [
|
||||
"趋势线样式",
|
||||
"迷你图类型"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.trend.position",
|
||||
"label": "趋势线位置",
|
||||
"description": "迷你趋势线放在哪里",
|
||||
"value_type": "enum",
|
||||
"options": [
|
||||
{
|
||||
"value": "right",
|
||||
"label": "数值右侧",
|
||||
"description": "卡片右侧约四成宽度"
|
||||
},
|
||||
{
|
||||
"value": "bottom",
|
||||
"label": "底部背景",
|
||||
"description": "铺满卡片底部，半透明地衬在文字后面"
|
||||
}
|
||||
],
|
||||
"aliases": [
|
||||
"迷你图位置"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.trend.data",
|
||||
"label": "趋势数据",
|
||||
"description": "按时间先后排列的数值，例如近 6 个月每月的销售额；6~12 个点为宜",
|
||||
"value_type": "array",
|
||||
"item_type": "number",
|
||||
"panel": false,
|
||||
"aliases": [
|
||||
"走势数据",
|
||||
"迷你图数据",
|
||||
"趋势"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "style.trendColor",
|
||||
"label": "趋势线色",
|
||||
"description": "迷你趋势线的颜色，面积图的填充由它渐变到透明",
|
||||
"value_type": "color",
|
||||
"aliases": [
|
||||
"迷你图颜色",
|
||||
"走势颜色"
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "stat-style",
|
||||
"label": "样式",
|
||||
"description": "对齐方式、指标名和数值的颜色字号、好坏颜色、卡片背景和边框",
|
||||
"fields": [
|
||||
{
|
||||
"path": "style.textAlign",
|
||||
"label": "对齐",
|
||||
"description": "卡片内容的水平位置",
|
||||
"value_type": "enum",
|
||||
"options": [
|
||||
{
|
||||
"value": "left",
|
||||
"label": "左对齐"
|
||||
},
|
||||
{
|
||||
"value": "center",
|
||||
"label": "居中"
|
||||
},
|
||||
{
|
||||
"value": "right",
|
||||
"label": "右对齐"
|
||||
}
|
||||
],
|
||||
"aliases": [
|
||||
"水平对齐",
|
||||
"对齐方式"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "style.titleColor",
|
||||
"label": "指标名色",
|
||||
"description": "指标名的颜色，对比名称和说明也用这个颜色",
|
||||
"value_type": "color",
|
||||
"aliases": [
|
||||
"标题颜色",
|
||||
"名称颜色"
|
||||
],
|
||||
"themed": true
|
||||
},
|
||||
{
|
||||
"path": "style.titleFontSize",
|
||||
"label": "指标名字号",
|
||||
"description": "指标名的文字大小",
|
||||
"value_type": "number",
|
||||
"minimum": 8,
|
||||
"maximum": 72,
|
||||
"unit": "px",
|
||||
"aliases": [
|
||||
"标题字号",
|
||||
"标题大小"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "style.valueColor",
|
||||
"label": "数值色",
|
||||
"description": "数值、前缀和后缀的颜色",
|
||||
"value_type": "color",
|
||||
"aliases": [
|
||||
"数字颜色",
|
||||
"数值颜色"
|
||||
],
|
||||
"themed": true
|
||||
},
|
||||
{
|
||||
"path": "style.valueFontSize",
|
||||
"label": "数值字号",
|
||||
"description": "数值的文字大小，前后缀按比例缩小",
|
||||
"value_type": "number",
|
||||
"minimum": 12,
|
||||
"maximum": 200,
|
||||
"unit": "px",
|
||||
"aliases": [
|
||||
"数字大小",
|
||||
"数值大小",
|
||||
"数字字号"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "style.goodColor",
|
||||
"label": "向好色",
|
||||
"description": "对比向好时的颜色：默认上升用它，开启下降为好后下降用它",
|
||||
"value_type": "color",
|
||||
"aliases": [
|
||||
"上涨颜色",
|
||||
"增长颜色",
|
||||
"正向颜色"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "style.badColor",
|
||||
"label": "变差色",
|
||||
"description": "对比变差时的颜色：默认下降用它，开启下降为好后上升用它",
|
||||
"value_type": "color",
|
||||
"aliases": [
|
||||
"下跌颜色",
|
||||
"下降颜色",
|
||||
"负向颜色"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "style.backgroundColor",
|
||||
"label": "背景色",
|
||||
"description": "卡片的背景颜色",
|
||||
"value_type": "color",
|
||||
"aliases": [
|
||||
"背景颜色",
|
||||
"底色",
|
||||
"卡片颜色"
|
||||
],
|
||||
"themed": true
|
||||
},
|
||||
{
|
||||
"path": "style.borderColor",
|
||||
"label": "边框色",
|
||||
"description": "卡片 1px 边框的颜色，设为 transparent 不显示边框",
|
||||
"value_type": "color",
|
||||
"aliases": [
|
||||
"边框颜色",
|
||||
"描边颜色"
|
||||
],
|
||||
"themed": true
|
||||
},
|
||||
{
|
||||
"path": "style.borderRadius",
|
||||
"label": "圆角",
|
||||
"description": "卡片四角的圆角半径",
|
||||
"value_type": "number",
|
||||
"minimum": 0,
|
||||
"maximum": 100,
|
||||
"unit": "px",
|
||||
"aliases": [
|
||||
"圆角大小",
|
||||
"边角"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"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": "stat-card",
|
||||
"name": "指标卡",
|
||||
"layout": {
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"width": 320,
|
||||
"height": 150
|
||||
},
|
||||
"props": {
|
||||
"title": "销售额",
|
||||
"value": 1286000,
|
||||
"prefix": "",
|
||||
"suffix": "",
|
||||
"detail": "",
|
||||
"scale": "auto",
|
||||
"precision": 2,
|
||||
"separator": true,
|
||||
"animate": true,
|
||||
"downIsGood": false,
|
||||
"compare": {
|
||||
"show": false,
|
||||
"label": "环比",
|
||||
"value": 0,
|
||||
"suffix": "%"
|
||||
},
|
||||
"compare2": {
|
||||
"show": false,
|
||||
"label": "同比",
|
||||
"value": 0,
|
||||
"suffix": "%"
|
||||
},
|
||||
"trend": {
|
||||
"show": false,
|
||||
"type": "area",
|
||||
"position": "right",
|
||||
"data": []
|
||||
}
|
||||
},
|
||||
"style": {
|
||||
"textAlign": "left",
|
||||
"titleFontSize": 14,
|
||||
"valueFontSize": 32,
|
||||
"goodColor": "#67c23a",
|
||||
"badColor": "#f56c6c",
|
||||
"borderRadius": 8,
|
||||
"trendColor": "#409eff"
|
||||
},
|
||||
"events": []
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user