feat:更新物料

This commit is contained in:
2026-10-13 04:06:16 -07:00
parent 828704e3e8
commit b117f21e3a
19 changed files with 650 additions and 336 deletions
+3 -23
View File
@@ -99,17 +99,13 @@
"left": "center", "left": "center",
"itemWidth": 12, "itemWidth": 12,
"itemHeight": 8, "itemHeight": 8,
"show": true, "show": true
"textStyle": {
"color": "#cfd3dc"
}
}, },
"title": { "title": {
"text": "成交额趋势", "text": "成交额趋势",
"top": 8, "top": 8,
"left": "center", "left": "center",
"textStyle": { "textStyle": {
"color": "#e5eaf3",
"fontSize": 16 "fontSize": 16
} }
}, },
@@ -157,26 +153,10 @@
}, },
"xAxis": { "xAxis": {
"type": "category", "type": "category",
"boundaryGap": false, "boundaryGap": false
"axisLine": {
"lineStyle": {
"color": "#4c4d4f"
}
},
"axisLabel": {
"color": "#cfd3dc"
}
}, },
"yAxis": { "yAxis": {
"type": "value", "type": "value"
"axisLabel": {
"color": "#cfd3dc"
},
"splitLine": {
"lineStyle": {
"color": "rgba(255, 255, 255, 0.08)"
}
}
}, },
"series": [ "series": [
{ {
+3 -23
View File
@@ -175,17 +175,13 @@
"left": "center", "left": "center",
"itemWidth": 12, "itemWidth": 12,
"itemHeight": 8, "itemHeight": 8,
"show": true, "show": true
"textStyle": {
"color": "#cfd3dc"
}
}, },
"title": { "title": {
"text": "月度销售额", "text": "月度销售额",
"top": 8, "top": 8,
"left": "center", "left": "center",
"textStyle": { "textStyle": {
"color": "#e5eaf3",
"fontSize": 16 "fontSize": 16
} }
}, },
@@ -226,26 +222,10 @@
"containLabel": true "containLabel": true
}, },
"xAxis": { "xAxis": {
"type": "category", "type": "category"
"axisLine": {
"lineStyle": {
"color": "#4c4d4f"
}
},
"axisLabel": {
"color": "#cfd3dc"
}
}, },
"yAxis": { "yAxis": {
"type": "value", "type": "value"
"axisLabel": {
"color": "#cfd3dc"
},
"splitLine": {
"lineStyle": {
"color": "rgba(255, 255, 255, 0.08)"
}
}
}, },
"series": [ "series": [
{ {
+6 -32
View File
@@ -139,7 +139,8 @@
"aliases": [ "aliases": [
"横轴文字颜色" "横轴文字颜色"
], ],
"panel": false "panel": false,
"themed": true
}, },
{ {
"path": "props.option.xAxis.axisLabel.fontSize", "path": "props.option.xAxis.axisLabel.fontSize",
@@ -259,17 +260,13 @@
"left": "center", "left": "center",
"itemWidth": 12, "itemWidth": 12,
"itemHeight": 8, "itemHeight": 8,
"show": true, "show": true
"textStyle": {
"color": "#cfd3dc"
}
}, },
"title": { "title": {
"text": "销售额与增长率", "text": "销售额与增长率",
"top": 8, "top": 8,
"left": "center", "left": "center",
"textStyle": { "textStyle": {
"color": "#e5eaf3",
"fontSize": 16 "fontSize": 16
} }
}, },
@@ -318,45 +315,22 @@
"containLabel": true "containLabel": true
}, },
"xAxis": { "xAxis": {
"type": "category", "type": "category"
"axisLine": {
"lineStyle": {
"color": "#4c4d4f"
}
},
"axisLabel": {
"color": "#cfd3dc"
}
}, },
"yAxis": [ "yAxis": [
{ {
"type": "value", "type": "value",
"axisLabel": { "name": "销售额"
"color": "#cfd3dc"
},
"splitLine": {
"lineStyle": {
"color": "rgba(255, 255, 255, 0.08)"
}
},
"name": "销售额",
"nameTextStyle": {
"color": "#a3a6ad"
}
}, },
{ {
"type": "value", "type": "value",
"axisLabel": { "axisLabel": {
"color": "#cfd3dc",
"formatter": "{value}%" "formatter": "{value}%"
}, },
"splitLine": { "splitLine": {
"show": false "show": false
}, },
"name": "增长率", "name": "增长率"
"nameTextStyle": {
"color": "#a3a6ad"
}
} }
], ],
"series": [ "series": [
+16 -8
View File
@@ -96,7 +96,8 @@
"aliases": [ "aliases": [
"标题颜色", "标题颜色",
"标题文字颜色" "标题文字颜色"
] ],
"themed": true
}, },
{ {
"path": "props.option.title.left", "path": "props.option.title.left",
@@ -175,7 +176,8 @@
"图例颜色", "图例颜色",
"图例文字颜色" "图例文字颜色"
], ],
"panel": false "panel": false,
"themed": true
}, },
{ {
"path": "props.option.legend.textStyle.fontSize", "path": "props.option.legend.textStyle.fontSize",
@@ -251,7 +253,8 @@
"横轴文字颜色", "横轴文字颜色",
"X轴标签颜色" "X轴标签颜色"
], ],
"panel": false "panel": false,
"themed": true
}, },
{ {
"path": "props.option.xAxis.axisLabel.fontSize", "path": "props.option.xAxis.axisLabel.fontSize",
@@ -277,7 +280,8 @@
"横轴颜色", "横轴颜色",
"坐标轴颜色" "坐标轴颜色"
], ],
"panel": false "panel": false,
"themed": true
}, },
{ {
"path": "props.option.yAxis.axisLabel.color", "path": "props.option.yAxis.axisLabel.color",
@@ -288,7 +292,8 @@
"纵轴文字颜色", "纵轴文字颜色",
"Y轴标签颜色" "Y轴标签颜色"
], ],
"panel": false "panel": false,
"themed": true
}, },
{ {
"path": "props.option.yAxis.axisLabel.fontSize", "path": "props.option.yAxis.axisLabel.fontSize",
@@ -314,7 +319,8 @@
"分隔线颜色", "分隔线颜色",
"背景线颜色" "背景线颜色"
], ],
"panel": false "panel": false,
"themed": true
} }
] ]
}, },
@@ -551,7 +557,8 @@
"aliases": [ "aliases": [
"标签颜色" "标签颜色"
], ],
"panel": false "panel": false,
"themed": true
}, },
{ {
"path": "props.option.series.0.label.fontSize", "path": "props.option.series.0.label.fontSize",
@@ -627,7 +634,8 @@
"aliases": [ "aliases": [
"数字颜色" "数字颜色"
], ],
"panel": false "panel": false,
"themed": true
}, },
{ {
"path": "props.option.series.0.detail.fontSize", "path": "props.option.series.0.detail.fontSize",
+1 -8
View File
@@ -133,17 +133,13 @@
"left": "center", "left": "center",
"itemWidth": 12, "itemWidth": 12,
"itemHeight": 8, "itemHeight": 8,
"show": true, "show": true
"textStyle": {
"color": "#cfd3dc"
}
}, },
"title": { "title": {
"text": "转化漏斗", "text": "转化漏斗",
"top": 8, "top": 8,
"left": "center", "left": "center",
"textStyle": { "textStyle": {
"color": "#e5eaf3",
"fontSize": 16 "fontSize": 16
} }
}, },
@@ -182,9 +178,6 @@
"maxSize": "100%", "maxSize": "100%",
"sort": "descending", "sort": "descending",
"gap": 4, "gap": 4,
"label": {
"color": "#cfd3dc"
},
"itemStyle": { "itemStyle": {
"borderColor": "transparent" "borderColor": "transparent"
}, },
+6 -20
View File
@@ -42,7 +42,8 @@
"label": "指针颜色", "label": "指针颜色",
"description": "指针的颜色", "description": "指针的颜色",
"value_type": "color", "value_type": "color",
"panel": false "panel": false,
"themed": true
}, },
{ {
"path": "props.option.series.0.axisLabel.color", "path": "props.option.series.0.axisLabel.color",
@@ -52,7 +53,8 @@
"aliases": [ "aliases": [
"刻度颜色" "刻度颜色"
], ],
"panel": false "panel": false,
"themed": true
}, },
{ {
"path": "props.option.series.0.axisLabel.fontSize", "path": "props.option.series.0.axisLabel.fontSize",
@@ -153,7 +155,6 @@
"top": 8, "top": 8,
"left": "center", "left": "center",
"textStyle": { "textStyle": {
"color": "#e5eaf3",
"fontSize": 16 "fontSize": 16
} }
}, },
@@ -189,13 +190,7 @@
}, },
"axisLine": { "axisLine": {
"lineStyle": { "lineStyle": {
"width": 12, "width": 12
"color": [
[
1,
"rgba(255, 255, 255, 0.1)"
]
]
} }
}, },
"axisTick": { "axisTick": {
@@ -204,25 +199,17 @@
"splitLine": { "splitLine": {
"length": 8, "length": 8,
"lineStyle": { "lineStyle": {
"width": 1, "width": 1
"color": "#4c4d4f"
} }
}, },
"axisLabel": { "axisLabel": {
"color": "#cfd3dc",
"distance": 16 "distance": 16
}, },
"pointer": {
"itemStyle": {
"color": "#e5eaf3"
}
},
"title": { "title": {
"offsetCenter": [ "offsetCenter": [
0, 0,
"72%" "72%"
], ],
"color": "#cfd3dc",
"fontSize": 13 "fontSize": 13
}, },
"detail": { "detail": {
@@ -231,7 +218,6 @@
0, 0,
"46%" "46%"
], ],
"color": "#e5eaf3",
"fontSize": 28, "fontSize": 28,
"formatter": "{value}%" "formatter": "{value}%"
}, },
+11 -27
View File
@@ -36,7 +36,8 @@
"横轴文字颜色", "横轴文字颜色",
"数值轴文字颜色" "数值轴文字颜色"
], ],
"panel": false "panel": false,
"themed": true
}, },
{ {
"path": "props.option.xAxis.axisLabel.fontSize", "path": "props.option.xAxis.axisLabel.fontSize",
@@ -62,7 +63,8 @@
"分隔线颜色", "分隔线颜色",
"背景线颜色" "背景线颜色"
], ],
"panel": false "panel": false,
"themed": true
}, },
{ {
"path": "props.option.yAxis.axisLabel.color", "path": "props.option.yAxis.axisLabel.color",
@@ -73,7 +75,8 @@
"纵轴文字颜色", "纵轴文字颜色",
"类目文字颜色" "类目文字颜色"
], ],
"panel": false "panel": false,
"themed": true
}, },
{ {
"path": "props.option.yAxis.axisLabel.fontSize", "path": "props.option.yAxis.axisLabel.fontSize",
@@ -99,7 +102,8 @@
"纵轴颜色", "纵轴颜色",
"坐标轴颜色" "坐标轴颜色"
], ],
"panel": false "panel": false,
"themed": true
} }
] ]
}, },
@@ -255,17 +259,13 @@
"left": "center", "left": "center",
"itemWidth": 12, "itemWidth": 12,
"itemHeight": 8, "itemHeight": 8,
"show": true, "show": true
"textStyle": {
"color": "#cfd3dc"
}
}, },
"title": { "title": {
"text": "地区销售额", "text": "地区销售额",
"top": 8, "top": 8,
"left": "center", "left": "center",
"textStyle": { "textStyle": {
"color": "#e5eaf3",
"fontSize": 16 "fontSize": 16
} }
}, },
@@ -302,26 +302,10 @@
"containLabel": true "containLabel": true
}, },
"xAxis": { "xAxis": {
"type": "value", "type": "value"
"axisLabel": {
"color": "#cfd3dc"
},
"splitLine": {
"lineStyle": {
"color": "rgba(255, 255, 255, 0.08)"
}
}
}, },
"yAxis": { "yAxis": {
"type": "category", "type": "category"
"axisLine": {
"lineStyle": {
"color": "#4c4d4f"
}
},
"axisLabel": {
"color": "#cfd3dc"
}
}, },
"series": [ "series": [
{ {
+4 -23
View File
@@ -40,7 +40,8 @@
"aliases": [ "aliases": [
"横轴文字颜色" "横轴文字颜色"
], ],
"panel": false "panel": false,
"themed": true
}, },
{ {
"path": "props.option.xAxis.axisLabel.fontSize", "path": "props.option.xAxis.axisLabel.fontSize",
@@ -64,7 +65,8 @@
"aliases": [ "aliases": [
"纵轴文字颜色" "纵轴文字颜色"
], ],
"panel": false "panel": false,
"themed": true
}, },
{ {
"path": "props.option.yAxis.axisLabel.fontSize", "path": "props.option.yAxis.axisLabel.fontSize",
@@ -251,7 +253,6 @@
"top": 8, "top": 8,
"left": "center", "left": "center",
"textStyle": { "textStyle": {
"color": "#e5eaf3",
"fontSize": 16 "fontSize": 16
} }
}, },
@@ -481,28 +482,12 @@
}, },
"xAxis": { "xAxis": {
"type": "category", "type": "category",
"axisLine": {
"lineStyle": {
"color": "#4c4d4f"
}
},
"axisLabel": {
"color": "#cfd3dc"
},
"splitArea": { "splitArea": {
"show": true "show": true
} }
}, },
"yAxis": { "yAxis": {
"type": "category", "type": "category",
"axisLine": {
"lineStyle": {
"color": "#4c4d4f"
}
},
"axisLabel": {
"color": "#cfd3dc"
},
"inverse": true, "inverse": true,
"splitArea": { "splitArea": {
"show": true "show": true
@@ -516,9 +501,6 @@
"left": "center", "left": "center",
"bottom": 4, "bottom": 4,
"itemHeight": 120, "itemHeight": 120,
"textStyle": {
"color": "#cfd3dc"
},
"inRange": { "inRange": {
"color": [ "color": [
"#1d2b44", "#1d2b44",
@@ -540,7 +522,6 @@
"fontSize": 11 "fontSize": 11
}, },
"itemStyle": { "itemStyle": {
"borderColor": "#141414",
"borderWidth": 2 "borderWidth": 2
}, },
"encode": { "encode": {
+3 -23
View File
@@ -81,17 +81,13 @@
"left": "center", "left": "center",
"itemWidth": 12, "itemWidth": 12,
"itemHeight": 8, "itemHeight": 8,
"show": true, "show": true
"textStyle": {
"color": "#cfd3dc"
}
}, },
"title": { "title": {
"text": "访问量趋势", "text": "访问量趋势",
"top": 8, "top": 8,
"left": "center", "left": "center",
"textStyle": { "textStyle": {
"color": "#e5eaf3",
"fontSize": 16 "fontSize": 16
} }
}, },
@@ -139,26 +135,10 @@
}, },
"xAxis": { "xAxis": {
"type": "category", "type": "category",
"boundaryGap": false, "boundaryGap": false
"axisLine": {
"lineStyle": {
"color": "#4c4d4f"
}
},
"axisLabel": {
"color": "#cfd3dc"
}
}, },
"yAxis": { "yAxis": {
"type": "value", "type": "value"
"axisLabel": {
"color": "#cfd3dc"
},
"splitLine": {
"lineStyle": {
"color": "rgba(255, 255, 255, 0.08)"
}
}
}, },
"series": [ "series": [
{ {
@@ -181,7 +181,6 @@
"top": 8, "top": 8,
"left": "center", "left": "center",
"textStyle": { "textStyle": {
"color": "#e5eaf3",
"fontSize": 16 "fontSize": 16
} }
}, },
@@ -223,26 +222,10 @@
"containLabel": true "containLabel": true
}, },
"xAxis": { "xAxis": {
"type": "category", "type": "category"
"axisLine": {
"lineStyle": {
"color": "#4c4d4f"
}
},
"axisLabel": {
"color": "#cfd3dc"
}
}, },
"yAxis": { "yAxis": {
"type": "value", "type": "value"
"axisLabel": {
"color": "#cfd3dc"
},
"splitLine": {
"lineStyle": {
"color": "rgba(255, 255, 255, 0.08)"
}
}
}, },
"series": [ "series": [
{ {
+1 -13
View File
@@ -87,17 +87,13 @@
"left": "center", "left": "center",
"itemWidth": 12, "itemWidth": 12,
"itemHeight": 8, "itemHeight": 8,
"show": true, "show": true
"textStyle": {
"color": "#cfd3dc"
}
}, },
"title": { "title": {
"text": "访问来源占比", "text": "访问来源占比",
"top": 8, "top": 8,
"left": "center", "left": "center",
"textStyle": { "textStyle": {
"color": "#e5eaf3",
"fontSize": 16 "fontSize": 16
} }
}, },
@@ -133,14 +129,6 @@
"62%" "62%"
], ],
"avoidLabelOverlap": true, "avoidLabelOverlap": true,
"label": {
"color": "#cfd3dc"
},
"labelLine": {
"lineStyle": {
"color": "#a3a6ad"
}
},
"encode": { "encode": {
"itemName": "channel", "itemName": "channel",
"value": "value" "value": "value"
@@ -122,7 +122,6 @@
"top": 8, "top": 8,
"left": "center", "left": "center",
"textStyle": { "textStyle": {
"color": "#e5eaf3",
"fontSize": 16 "fontSize": 16
} }
}, },
@@ -163,13 +162,7 @@
}, },
"axisLine": { "axisLine": {
"lineStyle": { "lineStyle": {
"width": 14, "width": 14
"color": [
[
1,
"rgba(255, 255, 255, 0.1)"
]
]
} }
}, },
"axisTick": { "axisTick": {
@@ -186,7 +179,6 @@
0, 0,
"28%" "28%"
], ],
"color": "#cfd3dc",
"fontSize": 13 "fontSize": 13
}, },
"detail": { "detail": {
@@ -195,7 +187,6 @@
0, 0,
"-8%" "-8%"
], ],
"color": "#e5eaf3",
"fontSize": 30, "fontSize": 30,
"fontWeight": "bold", "fontWeight": "bold",
"formatter": "{value}%" "formatter": "{value}%"
+4 -28
View File
@@ -98,7 +98,8 @@
"维度颜色", "维度颜色",
"指标文字颜色" "指标文字颜色"
], ],
"panel": false "panel": false,
"themed": true
}, },
{ {
"path": "props.option.radar.axisName.fontSize", "path": "props.option.radar.axisName.fontSize",
@@ -209,17 +210,13 @@
"left": "center", "left": "center",
"itemWidth": 12, "itemWidth": 12,
"itemHeight": 8, "itemHeight": 8,
"show": true, "show": true
"textStyle": {
"color": "#cfd3dc"
}
}, },
"title": { "title": {
"text": "店铺服务评分", "text": "店铺服务评分",
"top": 8, "top": 8,
"left": "center", "left": "center",
"textStyle": { "textStyle": {
"color": "#e5eaf3",
"fontSize": 16 "fontSize": 16
} }
}, },
@@ -251,28 +248,7 @@
"name": "售后保障", "name": "售后保障",
"max": 100 "max": 100
} }
], ]
"axisName": {
"color": "#cfd3dc"
},
"splitLine": {
"lineStyle": {
"color": "rgba(255, 255, 255, 0.12)"
}
},
"splitArea": {
"areaStyle": {
"color": [
"rgba(255, 255, 255, 0.03)",
"rgba(255, 255, 255, 0.06)"
]
}
},
"axisLine": {
"lineStyle": {
"color": "rgba(255, 255, 255, 0.16)"
}
}
}, },
"dataset": { "dataset": {
"source": [ "source": [
+1 -13
View File
@@ -107,17 +107,13 @@
"left": "center", "left": "center",
"itemWidth": 12, "itemWidth": 12,
"itemHeight": 8, "itemHeight": 8,
"show": true, "show": true
"textStyle": {
"color": "#cfd3dc"
}
}, },
"title": { "title": {
"text": "设备占比", "text": "设备占比",
"top": 8, "top": 8,
"left": "center", "left": "center",
"textStyle": { "textStyle": {
"color": "#e5eaf3",
"fontSize": 16 "fontSize": 16
} }
}, },
@@ -157,14 +153,6 @@
"62%" "62%"
], ],
"avoidLabelOverlap": true, "avoidLabelOverlap": true,
"label": {
"color": "#cfd3dc"
},
"labelLine": {
"lineStyle": {
"color": "#a3a6ad"
}
},
"encode": { "encode": {
"itemName": "device", "itemName": "device",
"value": "value" "value": "value"
+1 -13
View File
@@ -129,17 +129,13 @@
"left": "center", "left": "center",
"itemWidth": 12, "itemWidth": 12,
"itemHeight": 8, "itemHeight": 8,
"show": true, "show": true
"textStyle": {
"color": "#cfd3dc"
}
}, },
"title": { "title": {
"text": "区域销售分布", "text": "区域销售分布",
"top": 8, "top": 8,
"left": "center", "left": "center",
"textStyle": { "textStyle": {
"color": "#e5eaf3",
"fontSize": 16 "fontSize": 16
} }
}, },
@@ -190,14 +186,6 @@
"itemStyle": { "itemStyle": {
"borderRadius": 4 "borderRadius": 4
}, },
"label": {
"color": "#cfd3dc"
},
"labelLine": {
"lineStyle": {
"color": "#a3a6ad"
}
},
"encode": { "encode": {
"itemName": "region", "itemName": "region",
"value": "value" "value": "value"
+3 -28
View File
@@ -124,17 +124,13 @@
"left": "center", "left": "center",
"itemWidth": 12, "itemWidth": 12,
"itemHeight": 8, "itemHeight": 8,
"show": true, "show": true
"textStyle": {
"color": "#cfd3dc"
}
}, },
"title": { "title": {
"text": "访客数与销售额", "text": "访客数与销售额",
"top": 8, "top": 8,
"left": "center", "left": "center",
"textStyle": { "textStyle": {
"color": "#e5eaf3",
"fontSize": 16 "fontSize": 16
} }
}, },
@@ -185,31 +181,10 @@
"containLabel": true "containLabel": true
}, },
"xAxis": { "xAxis": {
"type": "value", "type": "value"
"axisLine": {
"lineStyle": {
"color": "#4c4d4f"
}
},
"axisLabel": {
"color": "#cfd3dc"
},
"splitLine": {
"lineStyle": {
"color": "rgba(255, 255, 255, 0.08)"
}
}
}, },
"yAxis": { "yAxis": {
"type": "value", "type": "value"
"axisLabel": {
"color": "#cfd3dc"
},
"splitLine": {
"lineStyle": {
"color": "rgba(255, 255, 255, 0.08)"
}
}
}, },
"series": [ "series": [
{ {
+3 -23
View File
@@ -210,17 +210,13 @@
"left": "center", "left": "center",
"itemWidth": 12, "itemWidth": 12,
"itemHeight": 8, "itemHeight": 8,
"show": true, "show": true
"textStyle": {
"color": "#cfd3dc"
}
}, },
"title": { "title": {
"text": "各渠道月度销售额", "text": "各渠道月度销售额",
"top": 8, "top": 8,
"left": "center", "left": "center",
"textStyle": { "textStyle": {
"color": "#e5eaf3",
"fontSize": 16 "fontSize": 16
} }
}, },
@@ -278,26 +274,10 @@
"containLabel": true "containLabel": true
}, },
"xAxis": { "xAxis": {
"type": "category", "type": "category"
"axisLine": {
"lineStyle": {
"color": "#4c4d4f"
}
},
"axisLabel": {
"color": "#cfd3dc"
}
}, },
"yAxis": { "yAxis": {
"type": "value", "type": "value"
"axisLabel": {
"color": "#cfd3dc"
},
"splitLine": {
"lineStyle": {
"color": "rgba(255, 255, 255, 0.08)"
}
}
}, },
"series": [ "series": [
{ {
+579
View File
@@ -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": []
}
}
+2 -2
View File
@@ -50,7 +50,8 @@
"aliases": [ "aliases": [
"文字颜色", "文字颜色",
"字体颜色" "字体颜色"
] ],
"themed": true
}, },
{ {
"path": "style.fontSize", "path": "style.fontSize",
@@ -196,7 +197,6 @@
"content": "电商运营数据看板" "content": "电商运营数据看板"
}, },
"style": { "style": {
"color": "#e5eaf3",
"fontSize": 16, "fontSize": 16,
"textAlign": "center", "textAlign": "center",
"alignItems": "center" "alignItems": "center"