新增JeecgBoot BPM流程自动生成器，包含流程创建、修改及审批人配置功能，支持自然语言描述转化为BPMN XML，并通过API与JeecgBoot系统交互。
This commit is contained in:
geht
@@ -0,0 +1,891 @@
|
||||
# 大屏组件配置修改参考
|
||||
|
||||
修改大屏组件样式时，根据组件类型和修改目标，使用对应的配置路径。
|
||||
|
||||
## 修改输出格式
|
||||
|
||||
只返回需要修改的属性，不包含未修改的配置：
|
||||
|
||||
```json
|
||||
{
|
||||
"compConfig": {
|
||||
"option": {
|
||||
"series": [{ "itemStyle": { "color": "#FFFF00" } }]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
修改名称/背景等基础属性：
|
||||
```json
|
||||
{
|
||||
"compConfig": {
|
||||
"name": "京东销量柱形图",
|
||||
"background": "#000000"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 颜色修改规则
|
||||
|
||||
### customColor 组件列表
|
||||
以下组件的颜色属性使用 `customColor` 格式修改：
|
||||
- JRadioButton, JRadialBar, JActiveRing, JRing, JPyramidFunnel, JFunnel
|
||||
- JBubble, DoubleLineBar, JMultipleLine, JArea, JLine
|
||||
- JRotatePie, JRose, JPie, JMixLineBar, JPercentBar
|
||||
- JMultipleBar, JCapsuleChart, JStackBar, JQuadrant
|
||||
|
||||
格式：
|
||||
```json
|
||||
"customColor": [
|
||||
{"color1": "#FF0000", "color": "#FF0000"},
|
||||
{"color1": "#00FF00", "color": "#00FF00"}
|
||||
]
|
||||
```
|
||||
|
||||
### 柱体颜色
|
||||
普通柱状图使用 `option.series[${index}].itemStyle.color`
|
||||
JDynamicBar 等也使用 `option.series[${index}].itemStyle.color`
|
||||
|
||||
### 其他组件
|
||||
不包含 customColor 属性的组件，按照对应组件配置的属性 value 值修改
|
||||
|
||||
## 通用规则
|
||||
|
||||
- 颜色使用具体色值（如 `#000000`），不使用英文单词（如 black）
|
||||
- 字体粗细可选值：`normal`（默认）、`bold`（粗体）、`lighter`（细体）
|
||||
- Y轴单位 `option.yAxis.yUnit`：预设值有 `%`（百分比）、`K`（千）、`W`（万）、`M`（亿）；自定义单位时设 `yUnit: 'CUSTOM'` 并设 `yCustomUnit: '元'`
|
||||
|
||||
## 基础配置 (BasicOption)
|
||||
|
||||
| 说明 | 配置路径 |
|
||||
|------|---------|
|
||||
| 图层名称 | `name` |
|
||||
| 图层背景色 | `background` |
|
||||
| 图层边框线 | `borderColor` |
|
||||
| 提示语显隐 | `option.tooltip.show` |
|
||||
| 提示语字体大小 | `option.tooltip.textStyle.fontSize` |
|
||||
| 提示语字体颜色 | `option.tooltip.textStyle.color` |
|
||||
|
||||
## 标题设置 (TitleOption)
|
||||
|
||||
| 说明 | 配置路径 |
|
||||
|------|---------|
|
||||
| 标题名称 | `option.title.text` |
|
||||
| 标题字体大小 | `option.title.textStyle.fontSize` |
|
||||
| 标题字体颜色 | `option.title.textStyle.fontColor` |
|
||||
| 标题字体粗细 | `option.title.textStyle.fontWeight` |
|
||||
| 副标题名称 | `option.title.subtextStyle` |
|
||||
| 副标题字体大小 | `option.title.subtextStyle.fontSize` |
|
||||
| 副标题字体颜色 | `option.title.subtextStyle.fontColor` |
|
||||
| 左对齐 | `option.title.left` |
|
||||
| 垂直居中 | `option.title.top` |
|
||||
|
||||
## X轴设置 (XAxisOption)
|
||||
|
||||
| 说明 | 配置路径 |
|
||||
|------|---------|
|
||||
| X轴名称 | `option.xAxis.name` |
|
||||
| X轴名称颜色 | `option.xAxis.nameTextStyle.color` |
|
||||
| X轴名称字体大小 | `option.xAxis.nameTextStyle.fontSize` |
|
||||
| X轴标签颜色 | `option.xAxis.axisLabel.color` |
|
||||
| X轴标签角度 | `option.xAxis.axisLabel.rotate` |
|
||||
| X轴轴线颜色 | `option.xAxis.axisLine.lineStyle.color` |
|
||||
| X轴类型 | `option.xAxis.type` |
|
||||
| X轴网格线显隐 | `option.xAxis.splitLine.show` |
|
||||
| X轴网格线颜色 | `option.xAxis.splitLine.lineStyle.color` |
|
||||
|
||||
## Y轴设置 (YAxisOption)
|
||||
|
||||
| 说明 | 配置路径 | 备注 |
|
||||
|------|---------|------|
|
||||
| Y轴名称 | `option.yAxis.name` | |
|
||||
| Y轴名称颜色 | `option.yAxis.nameTextStyle.color` | |
|
||||
| Y轴名称字体大小 | `option.yAxis.nameTextStyle.fontSize` | |
|
||||
| Y轴标签颜色 | `option.yAxis.axisLabel.color` | |
|
||||
| Y轴标签角度 | `option.yAxis.axisLabel.rotate` | |
|
||||
| Y轴轴线颜色 | `option.yAxis.axisLine.lineStyle.color` | |
|
||||
| Y轴类型 | `option.yAxis.type` | |
|
||||
| Y轴网格线显隐 | `option.yAxis.splitLine.show` | |
|
||||
| Y轴网格线颜色 | `option.yAxis.splitLine.lineStyle.color` | |
|
||||
| Y轴单位 | `option.yAxis.yUnit` | 预设: `%`, `K`, `W`, `M`；自定义: 设为 `CUSTOM` 并设 `yCustomUnit` |
|
||||
|
||||
## 图例设置 (LegendOption)
|
||||
|
||||
| 说明 | 配置路径 |
|
||||
|------|---------|
|
||||
| 图例字体大小 | `option.legend.textStyle.fontSize` |
|
||||
| 图例排列方向 | `option.legend.orient` |
|
||||
| 图例上下边距 | `option.legend.t` |
|
||||
| 图例左右边距 | `option.legend.r` |
|
||||
|
||||
## 柱体设置 (BarCylinder)
|
||||
|
||||
| 说明 | 配置路径 |
|
||||
|------|---------|
|
||||
| 柱体宽度 | `option.series[${index}].barWidth` |
|
||||
| 柱体圆角 | `option.series[${index}].itemStyle.borderRadius` |
|
||||
| 柱体颜色 | `option.series[${index}].itemStyle.color` |
|
||||
| 柱体背景色显隐 | `option.series[${index}].showBackground` |
|
||||
| 柱体背景色颜色 | `option.series[${index}].backgroundStyle.color` |
|
||||
|
||||
## 折线设置 (PolyglineOption)
|
||||
|
||||
| 说明 | 配置路径 | 可选值 |
|
||||
|------|---------|--------|
|
||||
| 折线类型 | `option.series[${index}].lineType` | `line`（折线）, `smooth`（曲线）, `area`（面积） |
|
||||
| 透明度 | `option.series[0].areaStyleOpacity` | |
|
||||
| 线条宽度 | `option.series[${index}].lineWidth` | |
|
||||
| 标记点 | `option.series[${index}].symbol` | |
|
||||
| 点的大小 | `option.series[${index}].symbolSize` | |
|
||||
|
||||
## 饼图设置 (pieSettingOption)
|
||||
|
||||
| 说明 | 配置路径 |
|
||||
|------|---------|
|
||||
| 设置成环形 | `option.isRadius` |
|
||||
| 内环半径 | `option.innerRadius` |
|
||||
| 外环半径 | `option.outRadius` |
|
||||
| 南丁格尔玫瑰 | `option.isRose` |
|
||||
| 标签显示位置 | `option.pieLabelPosition` |
|
||||
|
||||
## 坐标轴边距 (GridOption)
|
||||
|
||||
| 说明 | 配置路径 |
|
||||
|------|---------|
|
||||
| 左边距 | `option.grid.left` |
|
||||
| 顶边距 | `option.grid.top` |
|
||||
| 右边距 | `option.grid.right` |
|
||||
| 底边距 | `option.grid.bottom` |
|
||||
|
||||
## 数值设置 (NumOption)
|
||||
|
||||
| 说明 | 配置路径 | 可选值 |
|
||||
|------|---------|--------|
|
||||
| 显示数值 | `option.series[${index}].label.show` | |
|
||||
| 数值位置 | `option.series[${index}].label.position` | `top`（顶部）, `""`（中间）, `insideBottom`（底部） |
|
||||
| 数值格式 | `option.label.format` | |
|
||||
| 数值颜色 | `option.series[${index}].label.color` | |
|
||||
| 数值字体大小 | `option.series[${index}].label.fontSize` | |
|
||||
| 数值字体粗细 | `option.series[${index}].label.fontWeight` | |
|
||||
| 数值单位显隐 | `option.showUnit.show` | |
|
||||
| 数值单位数量级 | `option.showUnit.numberLevel` | `1`（百分比）, `3`（千）, `4`（万） |
|
||||
| 数值单位小数位 | `option.showUnit.decimal` | |
|
||||
|
||||
## 文本设置 (TextOption) - JText 组件
|
||||
|
||||
| 说明 | 配置路径 |
|
||||
|------|---------|
|
||||
| 字体大小 | `option.body.fontSize` |
|
||||
| 字体间距 | `option.body.letterSpacing` |
|
||||
| 字体颜色 | `option.body.color` |
|
||||
| 千分符 | `option.body.thousandSeparator` |
|
||||
| 水平间距 | `option.body.marginLeft` |
|
||||
| 垂直间距 | `option.body.marginTop` |
|
||||
| 跑马灯 | `option.horseLamp` |
|
||||
| 超链接开关 | `option.isLink` |
|
||||
| 超链接地址 | `option.openUrl` |
|
||||
|
||||
## 翻牌器设置 (CountToTextOption) - JCountTo 组件
|
||||
|
||||
| 说明 | 配置路径 |
|
||||
|------|---------|
|
||||
| 字体粗细 | `option.fontWeight` |
|
||||
| 字体颜色 | `option.fontColor` |
|
||||
| 字体大小 | `option.fontSize` |
|
||||
| 前缀文本 | `option.prefix` |
|
||||
| 前缀字体大小 | `option.prefixFontSize` |
|
||||
| 前缀字体颜色 | `option.prefixColor` |
|
||||
| 前缀字体粗细 | `option.prefixFontWeight` |
|
||||
| 前缀对齐方式 | `option.prefixTextAlign` |
|
||||
| 前缀X间距 | `option.prefixGridX` |
|
||||
| 前缀Y间距 | `option.prefixGridY` |
|
||||
| 后缀文本 | `option.suffix` |
|
||||
| 后缀字体大小 | `option.suffixFontSize` |
|
||||
| 后缀字体颜色 | `option.suffixColor` |
|
||||
| 后缀字体粗细 | `option.suffixFontWeight` |
|
||||
| 后缀对齐方式 | `option.suffixTextAlign` |
|
||||
| 后缀X间距 | `option.suffixGridX` |
|
||||
| 后缀Y间距 | `option.suffixGridY` |
|
||||
|
||||
## 进度条设置 (CustomProgressOption)
|
||||
|
||||
| 说明 | 配置路径 |
|
||||
|------|---------|
|
||||
| 目标颜色 | `option.backgroundColor` |
|
||||
| 进度颜色 | `option.progressColor` |
|
||||
| 进度条宽度 | `option.barWidth` |
|
||||
| 边距 | `option.padding` |
|
||||
| 标题颜色 | `option.titleColor` |
|
||||
| 标题字体大小 | `option.titleFontSize` |
|
||||
| 标题位置 | `option.titlePosition` |
|
||||
| 数值颜色 | `option.valueColor` |
|
||||
| 数值字体大小 | `option.valueFontSize` |
|
||||
| 数值位置 | `option.valuePosition` |
|
||||
| 数值横向偏移 | `option.valueXOffset` |
|
||||
|
||||
## 列表进度图设置 (ListProgressOption)
|
||||
|
||||
| 说明 | 配置路径 |
|
||||
|------|---------|
|
||||
| 行高度 | `option.row.height` |
|
||||
| 行左边距 | `option.row.marginLeft` |
|
||||
| 行右边距 | `option.row.marginRight` |
|
||||
| 行上边距 | `option.row.marginTop` |
|
||||
| 进度条颜色 | `option.bar.background.color` |
|
||||
| 进度条填充色 | `option.bar.fill.color` |
|
||||
| 进度条高度 | `option.bar.height` |
|
||||
| 进度条圆角 | `option.bar.borderRadius` |
|
||||
| 指示点大小 | `option.bar.indicatorSize` |
|
||||
| 指示点颜色 | `option.bar.indicatorColor` |
|
||||
| 显示边框 | `option.bar.border.enabled` |
|
||||
| 边框颜色 | `option.bar.border.color` |
|
||||
| 边框大小 | `option.bar.border.width` |
|
||||
| 边框边距 | `option.bar.border.padding` |
|
||||
|
||||
## 水波图设置 (LiquidPlotOption) - JLiquid 组件
|
||||
|
||||
| 说明 | 配置路径 |
|
||||
|------|---------|
|
||||
| 显示类型 | `option.liquidType` |
|
||||
| 波纹颜色 | `option.color` |
|
||||
| 波纹个数 | `option.count` |
|
||||
| 波纹长度 | `option.length` |
|
||||
| 外框颜色 | `option.borderColor` |
|
||||
| 外框宽度 | `option.borderWidth` |
|
||||
| 间距 | `option.distance` |
|
||||
| 透明度 | `option.strokeOpacity` |
|
||||
| 文本颜色 | `option.textColor` |
|
||||
| 文本字体大小 | `option.textFontSize` |
|
||||
|
||||
## 象形图设置 (PictorialOption)
|
||||
|
||||
| 说明 | 配置路径 |
|
||||
|------|---------|
|
||||
| 柱体颜色 | `option.barColor` |
|
||||
| 透明度 | `option.barOpacity` |
|
||||
| 间距 | `option.count` |
|
||||
|
||||
## 仪表盘设置 (GaugeOption)
|
||||
|
||||
| 说明 | 配置路径 |
|
||||
|------|---------|
|
||||
| 刻度值显隐 | `option.series[0].axisLabel.show` |
|
||||
| 刻度值颜色 | `option.series[0].axisLabel.color` |
|
||||
| 刻度值字体大小 | `option.series[0].axisLabel.fontSize` |
|
||||
| 刻度线显隐 | `option.series[0].axisTick.show` |
|
||||
| 刻度线长度 | `option.series[0].axisTick.length` |
|
||||
| 刻度线颜色 | `option.series[0].axisTick.lineStyle.color` |
|
||||
| 分割线显隐 | `option.series[0].splitLine.show` |
|
||||
| 分割线长度 | `option.series[0].splitLine.length` |
|
||||
| 分割线颜色 | `option.series[0].splitLine.lineStyle.color` |
|
||||
| 指标字号 | `option.series[0].detail.fontSize` |
|
||||
|
||||
## 渐变仪表盘设置 (AntvGaugeOption)
|
||||
|
||||
| 说明 | 配置路径 |
|
||||
|------|---------|
|
||||
| 粗细 | `option.gaugeWidth` |
|
||||
| 刻度值显隐 | `option.axisLabelShow` |
|
||||
| 刻度值颜色 | `option.axisLabelColor` |
|
||||
| 刻度值字体大小 | `option.axisLabelFontSize` |
|
||||
| 刻度线显隐 | `option.axisTickShow` |
|
||||
| 刻度线颜色 | `option.lineColor` |
|
||||
| 文本颜色 | `option.valueColor` |
|
||||
| 文本字体大小 | `option.valueFontSize` |
|
||||
| 指针颜色 | `option.indicatorColor` |
|
||||
| 指针粗细 | `option.indicatorLength` |
|
||||
|
||||
## 环形图设置 (ActiveRingPlotOption)
|
||||
|
||||
| 说明 | 配置路径 |
|
||||
|------|---------|
|
||||
| 颜色 | `option.color` |
|
||||
| 背景色 | `option.bgColor` |
|
||||
| 外环半径 | `option.outRadius` |
|
||||
| 内环半径 | `option.innerRadius` |
|
||||
| 标题字体大小 | `option.fontSize` |
|
||||
| 标题字体颜色 | `option.fontColor` |
|
||||
| 标题字体粗细 | `option.fontWeight` |
|
||||
| 数值字体大小 | `option.valueFontSize` |
|
||||
| 数值字体颜色 | `option.valueFontColor` |
|
||||
| 数值字体粗细 | `option.valueFontWeight` |
|
||||
|
||||
## 动态环形图设置 (ActiveRingOption)
|
||||
|
||||
| 说明 | 配置路径 |
|
||||
|------|---------|
|
||||
| 显示原始值 | `option.showOriginValue` |
|
||||
| 文字颜色 | `option.textColor` |
|
||||
| 文字大小 | `option.textFontSize` |
|
||||
| 线条宽度 | `option.lineWidth` |
|
||||
| 环半径 | `option.radius` |
|
||||
| 动态环半径 | `option.activeRadius` |
|
||||
|
||||
## 玉珏设置 (RadialBarOption)
|
||||
|
||||
| 说明 | 配置路径 |
|
||||
|------|---------|
|
||||
| 显示圆角 | `option.radiuShow` |
|
||||
| 背景显示 | `option.bgShow` |
|
||||
| 外环半径 | `option.radius` |
|
||||
| 内环半径 | `option.innerRadius` |
|
||||
| 最大旋转角 | `option.maxAngle` |
|
||||
|
||||
## 矩形图设置 (RectangleOption)
|
||||
|
||||
| 说明 | 配置路径 |
|
||||
|------|---------|
|
||||
| 文本颜色 | `option.titleColor` |
|
||||
| 文本字体大小 | `option.titleFontSize` |
|
||||
| 显示图例 | `option.showLegend` |
|
||||
|
||||
## 颜色块设置 (ColorBlockOption)
|
||||
|
||||
| 说明 | 配置路径 |
|
||||
|------|---------|
|
||||
| 行数 | `option.lineNum` |
|
||||
| 边距 | `option.padding` |
|
||||
| X间距 | `option.borderSplitx` |
|
||||
| Y间距 | `option.borderSplity` |
|
||||
| 小数位数 | `option.decimals` |
|
||||
| 字体大小 | `option.fontSize` |
|
||||
| 字体颜色 | `option.color` |
|
||||
| 字体粗细 | `option.fontWeight` |
|
||||
| 对齐方式 | `option.textAlign` |
|
||||
| 前缀字体颜色 | `option.prefixColor` |
|
||||
| 前缀字体粗细 | `option.prefixFontWeight` |
|
||||
| 前缀X间距 | `option.prefixSplitx` |
|
||||
| 前缀Y间距 | `option.prefixSplity` |
|
||||
| 后缀字体大小 | `option.suffixFontSize` |
|
||||
| 后缀字体颜色 | `option.suffixColor` |
|
||||
| 后缀字体粗细 | `option.suffixFontWeight` |
|
||||
| 后缀X间距 | `option.suffixSplitx` |
|
||||
|
||||
## 字符云设置 (WordCloudOption)
|
||||
|
||||
| 说明 | 配置路径 |
|
||||
|------|---------|
|
||||
| 字体颜色 | `option.color` |
|
||||
| 字体间距 | `option.padding` |
|
||||
| 字体旋转 | `option.rotation` |
|
||||
| 字体最大值 | `option.minSize` |
|
||||
| 字体最小值 | `option.maxSize` |
|
||||
| 形状 | `option.series[0].shape` |
|
||||
|
||||
## 闪光云设置 (FlashCloudOption)
|
||||
|
||||
| 说明 | 配置路径 |
|
||||
|------|---------|
|
||||
| 缩放 | `option.zoom` |
|
||||
| 字体大小 | `option.textSize` |
|
||||
| 字体颜色 | `option.textColor` |
|
||||
|
||||
## 轮播表格设置 (ScrollBoardOpt)
|
||||
|
||||
| 说明 | 配置路径 |
|
||||
|------|---------|
|
||||
| 悬浮暂停 | `option.hoverPause` |
|
||||
| 等待时间 | `option.waitTime` |
|
||||
| 开启排名 | `option.index` |
|
||||
| 列宽 | `option.indexWidth` |
|
||||
| 显示表头 | `option.headShow` |
|
||||
| 表头颜色 | `option.headerBGC` |
|
||||
| 表头行高 | `option.headerHeight` |
|
||||
| 每页行数 | `option.rowNum` |
|
||||
| 奇行颜色 | `option.oddRowBGC` |
|
||||
| 偶行颜色 | `option.evenRowBGC` |
|
||||
|
||||
## 表格设置 (ScrollTableStyle)
|
||||
|
||||
| 说明 | 配置路径 |
|
||||
|------|---------|
|
||||
| 开启排名 | `option.ranking` |
|
||||
| 开启滚动 | `option.scroll` |
|
||||
| 滚动时间 | `option.scrollTime` |
|
||||
| 显示表头 | `option.showHead` |
|
||||
| 表头背景颜色 | `option.headerBgColor` |
|
||||
| 表头字体颜色 | `option.headerFontColor` |
|
||||
| 表头字体大小 | `option.fontSize` |
|
||||
| 行高 | `option.lineHeight` |
|
||||
| 边框显示 | `option.showBorder` |
|
||||
| 边框宽度 | `option.borderWidth` |
|
||||
| 边框颜色 | `option.borderColor` |
|
||||
| 边框线类型 | `option.borderStyle` |
|
||||
| 表格字体颜色 | `option.bodyFontColor` |
|
||||
| 表格字体大小 | `option.bodyFontSize` |
|
||||
| 奇行颜色 | `option.oddColor` |
|
||||
| 偶行颜色 | `option.evenColor` |
|
||||
|
||||
## 数据表格设置 (TableStyle)
|
||||
|
||||
| 说明 | 配置路径 |
|
||||
|------|---------|
|
||||
| 表头背景颜色 | `option.headerBgColor` |
|
||||
| 表头字体大小 | `option.headerFontSize` |
|
||||
| 表头字体颜色 | `option.headerColor` |
|
||||
| 内容字体颜色 | `option.bodyColor` |
|
||||
| 内容字体大小 | `option.bodyFontSize` |
|
||||
| 内容背景颜色 | `option.bodyBgColor` |
|
||||
|
||||
## 列表设置 (ListStyle)
|
||||
|
||||
| 说明 | 配置路径 |
|
||||
|------|---------|
|
||||
| 显示标题前缀 | `option.showTitlePrefix` |
|
||||
| 显示时间前缀 | `option.showTimePrefix` |
|
||||
| 布局 | `option.layout` |
|
||||
| 标题字体颜色 | `option.titleFontColor` |
|
||||
| 标题字体粗细 | `option.titleFontWeight` |
|
||||
| 标题字体大小 | `option.titleFontSize` |
|
||||
| 图标颜色 | `option.iconColor` |
|
||||
| 内容颜色 | `option.contentColor` |
|
||||
| 开启动画 | `option.isEnableAnimation` |
|
||||
| 轮播时间(ms) | `option.scrollTime` |
|
||||
|
||||
## 滚动设置 (ScrollOption)
|
||||
|
||||
| 说明 | 配置路径 | 可选值 |
|
||||
|------|---------|--------|
|
||||
| 是否排序 | `option.sort` | |
|
||||
| 轮播方式 | `option.carousel` | `single`（单行）, `page`（整页） |
|
||||
| 显示行数 | `option.rowNum` | |
|
||||
| 滚动时间(ms) | `option.waitTime` | |
|
||||
|
||||
## 历程设置 (DevHistoryOption)
|
||||
|
||||
| 说明 | 配置路径 |
|
||||
|------|---------|
|
||||
| 缩放 | `option.zoom` |
|
||||
| 轮播间隔 | `option.waitTime` |
|
||||
| 背景色 | `option.typeBackColor` |
|
||||
| 字体颜色 | `option.typeFontColor` |
|
||||
| 内容字体颜色 | `option.titleColor` |
|
||||
| 内容字体大小 | `option.titleFontSize` |
|
||||
|
||||
## 气泡排名设置 (BubbleRankingStyle)
|
||||
|
||||
| 说明 | 配置路径 |
|
||||
|------|---------|
|
||||
| 比例 | `option.zoom` |
|
||||
| 显示提示词 | `option.showTip` |
|
||||
| 提示词颜色 | `option.titleColor` |
|
||||
| 提示词宽度 | `option.tipWidth` |
|
||||
| 提示词内容颜色 | `option.tipFontColor` |
|
||||
| 提示词内容字体大小 | `option.tipFontSize` |
|
||||
|
||||
## 3D金字塔/漏斗设置 (Pyramid3DOption)
|
||||
|
||||
| 说明 | 配置路径 |
|
||||
|------|---------|
|
||||
| 缩放 | `option.zoom` |
|
||||
| 尺寸 | `option.size` |
|
||||
|
||||
## 环形设置 (RingOption)
|
||||
|
||||
| 说明 | 配置路径 |
|
||||
|------|---------|
|
||||
| 内半径 | `option.innerRadius` |
|
||||
| 外半径 | `option.outRadius` |
|
||||
|
||||
## 南丁格尔玫瑰设置 (RoseOption)
|
||||
|
||||
| 说明 | 配置路径 |
|
||||
|------|---------|
|
||||
| 边框宽度 | `option.series[0].itemStyle.borderWidth` |
|
||||
| 颜色透明度 | `option.series[0].itemStyle.colorOpacity` |
|
||||
|
||||
## 胶囊图设置 (CapsuleChartOption)
|
||||
|
||||
| 说明 | 配置路径 |
|
||||
|------|---------|
|
||||
| 显示数值 | `option.showValue` |
|
||||
| X轴名称 | `option.unit` |
|
||||
|
||||
## 百分比柱状图样式 (PercentBarStyle)
|
||||
|
||||
| 说明 | 配置路径 | 可选值 |
|
||||
|------|---------|--------|
|
||||
| Y轴刻度颜色 | `option.yNameFontColor` | |
|
||||
| Y轴刻度字体大小 | `option.yNameFontSize` | |
|
||||
| X轴刻度颜色 | `option.xNameFontColor` | |
|
||||
| X轴刻度字体大小 | `option.xNameFontSize` | |
|
||||
| 图例位置 | `option.legendPosition` | `top`（居上）, `bottom`（居下） |
|
||||
| 图例字体颜色 | `option.legendFontColor` | |
|
||||
| 图例字体大小 | `option.legendFontSize` | |
|
||||
|
||||
## 进度条 ECharts 设置 (ProgressOption)
|
||||
|
||||
| 说明 | 配置路径 |
|
||||
|------|---------|
|
||||
| 显示标题 | `option.yAxis.axisLabel.show` |
|
||||
| 标题字体颜色 | `option.yAxis.axisLabel.color` |
|
||||
| 标题字体大小 | `option.yAxis.axisLabel.fontSize` |
|
||||
| 数值字体颜色 | `option.series[1].label.color` |
|
||||
| 数值字体大小 | `option.series[1].label.fontSize` |
|
||||
| 横向偏移 | `option.valueXOffset` |
|
||||
| 纵向偏移 | `option.valueYOffset` |
|
||||
| 柱体宽度 | `option.series[0].barWidth` |
|
||||
| 进度颜色 | `option.series[0].color` |
|
||||
| 目标颜色 | `option.series[1].color` |
|
||||
|
||||
## 地图设置 (MapOption)
|
||||
|
||||
| 说明 | 配置路径 |
|
||||
|------|---------|
|
||||
| 显示区域名称 | `option.geo.label.normal.show` |
|
||||
| 区域名称颜色 | `option.geo.label.normal.color` |
|
||||
| 区域名称字体大小 | `option.geo.label.normal.fontSize` |
|
||||
| 开启钻取 | `commonOption.breadcrumb.drillDown` |
|
||||
| 鼠标缩放 | `option.geo.roam` |
|
||||
| 缩放比例 | `option.geo.zoom` |
|
||||
| 长宽比 | `option.geo.aspectScale` |
|
||||
| 顶边距 | `option.geo.top` |
|
||||
| 左边距 | `option.geo.left` |
|
||||
|
||||
## 地图配色设置 (LineMapColorOption)
|
||||
|
||||
| 说明 | 配置路径 |
|
||||
|------|---------|
|
||||
| 启用渐变色 | `commonOption.gradientColor` |
|
||||
| 中心颜色 | `commonOption.areaColor.color1` |
|
||||
| 边缘颜色 | `commonOption.areaColor.color2` |
|
||||
| 区域颜色 | `commonOption.areaColor.color1` |
|
||||
| 区域高亮颜色 | `option.geo.itemStyle.emphasis.areaColor` |
|
||||
| 区域边界颜色 | `option.geo.itemStyle.normal.borderColor` |
|
||||
| 阴影大小 | `option.geo.itemStyle.normal.shadowBlur` |
|
||||
| 阴影水平偏移 | `option.geo.itemStyle.normal.shadowOffsetX` |
|
||||
| 阴影垂直偏移 | `option.geo.itemStyle.normal.shadowOffsetY` |
|
||||
| 阴影颜色 | `option.geo.itemStyle.normal.shadowColor` |
|
||||
|
||||
## 视觉映射设置 (VisualMapOption)
|
||||
|
||||
| 说明 | 配置路径 | 可选值 |
|
||||
|------|---------|--------|
|
||||
| 开启视觉映射 | `option.visualMap.show` | |
|
||||
| 类型 | `option.visualMap.type` | `continuous`, `piecewise` |
|
||||
| 文本颜色 | `option.visualMap.textStyle.color` | |
|
||||
| 文本粗细 | `option.visualMap.textStyle.fontWeight` | |
|
||||
| 文本字体大小 | `option.visualMap.textStyle.fontSize` | |
|
||||
| 最小值 | `option.visualMap.min` | |
|
||||
| 最大值 | `option.visualMap.max` | |
|
||||
|
||||
## 地图散点设置 (ScatterOption)
|
||||
|
||||
| 说明 | 配置路径 |
|
||||
|------|---------|
|
||||
| 散点大小 | `option.area.markerSize` |
|
||||
| 散点形状 | `option.area.markerShape` |
|
||||
| 散点类型 | `option.area.markerType` |
|
||||
| 散点颜色 | `option.area.markerColor` |
|
||||
| 散点文本显示 | `option.area.scatterLabelShow` |
|
||||
| 散点文本颜色 | `option.area.scatterLabelColor` |
|
||||
| 散点文本位置 | `option.area.scatterLabelPosition` |
|
||||
| 散点文本字体大小 | `option.area.scatterFontSize` |
|
||||
| 散点数量 | `option.area.markerCount` |
|
||||
| 散点透明度 | `option.area.markerOpacity` |
|
||||
|
||||
## 热力地图设置 (HeatOption)
|
||||
|
||||
| 说明 | 配置路径 |
|
||||
|------|---------|
|
||||
| 热力点大小 | `commonOption.heat.pointSize` |
|
||||
| 模糊大小 | `commonOption.heat.blurSize` |
|
||||
| 最大透明度 | `commonOption.heat.maxOpacity` |
|
||||
|
||||
## 柱体地图设置 (BarMapOption)
|
||||
|
||||
| 说明 | 配置路径 |
|
||||
|------|---------|
|
||||
| 柱体大小 | `commonOption.barSize` |
|
||||
| 柱体左侧颜色 | `commonOption.barColor` |
|
||||
| 柱体右侧颜色 | `commonOption.barColor2` |
|
||||
|
||||
## 飞线地图设置 (FlyLineOption)
|
||||
|
||||
| 说明 | 配置路径 |
|
||||
|------|---------|
|
||||
| 动画时间 | `commonOption.effect.period` |
|
||||
| 标记形状 | `commonOption.effect.markerShape` |
|
||||
| 标记大小 | `commonOption.effect.symbolSize` |
|
||||
| 标记颜色 | `commonOption.effect.markerColor` |
|
||||
| 尾迹长度 | `commonOption.effect.trailLength` |
|
||||
|
||||
---
|
||||
|
||||
## 组件数据格式 (chartData)
|
||||
|
||||
### 柱状图/折线图/混合图
|
||||
JBar, JStackBar, JLine, JSmoothLine, JStepLine, JMultipleLine, JArea, JMixLineBar, DoubleLineBar, JHorizontalBar, JBackgroundBar, JMultipleBar, JNegativeBar, JPercentBar
|
||||
```json
|
||||
[{"name": "一月", "value": 820, "type": "系列名"}]
|
||||
```
|
||||
双轴图额外字段：`"yAxisIndex": "0"` 或 `"1"`
|
||||
|
||||
### 饼图/环形图/玫瑰图
|
||||
JPie, JRose, JRing, JRotatePie, JBreakRing, JActiveRing, JRadialBar, JFunnel, JPyramidFunnel
|
||||
```json
|
||||
[{"name": "类别", "value": 800}]
|
||||
```
|
||||
|
||||
### 仪表盘
|
||||
JGauge, JColorGauge, JAntvGauge
|
||||
```json
|
||||
[{"min": 0, "max": 100, "label": "完成率", "value": 76}]
|
||||
```
|
||||
|
||||
### 半圆仪表盘
|
||||
JSemiGauge
|
||||
```json
|
||||
[{"total": 800, "used": 500}]
|
||||
```
|
||||
|
||||
### 水球图
|
||||
JLiquid（值为 0-100，前端自动除以100）
|
||||
```json
|
||||
[{"value": 75}]
|
||||
```
|
||||
|
||||
### 数字指标
|
||||
JNumber（对象格式，不是数组）
|
||||
```json
|
||||
{"value": 128560}
|
||||
```
|
||||
|
||||
### 翻牌器
|
||||
JCountTo
|
||||
```json
|
||||
{"value": 1024}
|
||||
```
|
||||
|
||||
### 文本
|
||||
JText
|
||||
```json
|
||||
{"value": "显示的文字内容"}
|
||||
```
|
||||
|
||||
### 排行榜
|
||||
JScrollRankingBoard（直接数组，不要 JSON.stringify）
|
||||
```json
|
||||
[{"name": "北京", "value": 1200}, {"name": "上海", "value": 1050}]
|
||||
```
|
||||
|
||||
### 滚动表格
|
||||
JScrollTable（数组 + option.fieldMapping）
|
||||
```json
|
||||
[{"col1": "值1", "col2": "值2"}]
|
||||
```
|
||||
option 需配合 `fieldMapping: [{"name": "列名", "key": "col1", "width": "30%"}]`
|
||||
|
||||
### 数据表格
|
||||
JTable, JCommonTable
|
||||
```json
|
||||
[
|
||||
{"fieldTxt": "姓名", "fieldName": "name", "type": "field", "isShow": "Y"},
|
||||
{"fieldTxt": "年龄", "fieldName": "age", "type": "field", "isShow": "Y"}
|
||||
]
|
||||
```
|
||||
|
||||
### 数据列表
|
||||
JList
|
||||
```json
|
||||
[{"title": "标题", "date": "2026-03-18", "desc": "描述", "avatar": "url"}]
|
||||
```
|
||||
|
||||
### 词云
|
||||
JWordCloud, JImgWordCloud, JFlashCloud
|
||||
```json
|
||||
[{"name": "关键词", "value": 100}]
|
||||
```
|
||||
|
||||
### 地图组件
|
||||
JAreaMap, JBubbleMap, JFlyLineMap, JBarMap, JHeatMap
|
||||
```json
|
||||
[{"name": "城市名", "value": 199}]
|
||||
```
|
||||
|
||||
### 按钮
|
||||
JRadioButton, JCustomButton
|
||||
```json
|
||||
[{"title": "按钮文字", "value": 0, "href": "https://example.com"}]
|
||||
```
|
||||
|
||||
### 轮播图
|
||||
JCarousel
|
||||
```json
|
||||
[{"src": "https://example.com/1.png"}, {"src": "https://example.com/2.png"}]
|
||||
```
|
||||
|
||||
### 进度条
|
||||
JProgress
|
||||
```json
|
||||
[{"name": "任务A", "value": 80, "total": 100}]
|
||||
```
|
||||
|
||||
### 胶囊图
|
||||
JCapsuleChart
|
||||
```json
|
||||
[{"name": "类目", "value": 500}]
|
||||
```
|
||||
|
||||
### 性别比例
|
||||
JGender
|
||||
```json
|
||||
[{"man": 60, "woman": 40}]
|
||||
```
|
||||
|
||||
### 统计卡片
|
||||
JStatsSummary
|
||||
```json
|
||||
[{"title": "指标名", "value": 1234, "unit": "元", "compare": 12.5, "label": "同比", "state": "up"}]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件与设置面板映射表
|
||||
|
||||
每个组件在设计器右侧面板显示的配置项列表（optionList），以下为完整映射：
|
||||
|
||||
### 柱状图系列
|
||||
| 组件 | 设置面板 |
|
||||
|------|---------|
|
||||
| JBar | BasicOption, TitleOption, XAxisOption, YAxisOption, LegendOption, GridOption, NumOption, BarCylinder, CustomColorOption, OtherOption |
|
||||
| JStackBar | BasicOption, TitleOption, XAxisOption, YAxisOption, LegendOption, GridOption, NumOption, BarCylinder, CustomColorOption |
|
||||
| JDynamicBar | BasicOption, TitleOption, XAxisOption, YAxisOption, GridOption, BarCylinder |
|
||||
| JHorizontalBar | BasicOption, TitleOption, XAxisOption, YAxisOption, LegendOption, GridOption, NumOption, BarCylinder, CustomColorOption |
|
||||
| JBackgroundBar | BasicOption, TitleOption, XAxisOption, YAxisOption, GridOption, NumOption, BarCylinder |
|
||||
| JMultipleBar | BasicOption, TitleOption, XAxisOption, YAxisOption, LegendOption, GridOption, NumOption, BarCylinder, CustomColorOption |
|
||||
| JNegativeBar | BasicOption, TitleOption, XAxisOption, YAxisOption, LegendOption, GridOption, CustomColorOption |
|
||||
| JPercentBar | BasicOption, PercentBarStyle, CustomColorOption |
|
||||
| JCapsuleChart | BasicOption, CapsuleChartOption, CustomColorOption |
|
||||
|
||||
### 折线/面积图系列
|
||||
| 组件 | 设置面板 |
|
||||
|------|---------|
|
||||
| JLine | BasicOption, TitleOption, XAxisOption, YAxisOption, LegendOption, GridOption, NumOption, PolyglineOption, CustomColorOption, OtherOption |
|
||||
| JSmoothLine | BasicOption, TitleOption, XAxisOption, YAxisOption, LegendOption, GridOption, NumOption, PolyglineOption |
|
||||
| JStepLine | BasicOption, TitleOption, XAxisOption, YAxisOption, LegendOption, GridOption, NumOption |
|
||||
| JArea | BasicOption, TitleOption, XAxisOption, YAxisOption, LegendOption, GridOption, NumOption, PolyglineOption, CustomColorOption |
|
||||
| JMultipleLine | BasicOption, TitleOption, XAxisOption, YAxisOption, LegendOption, GridOption, NumOption, PolyglineOption, CustomColorOption |
|
||||
|
||||
### 混合图系列
|
||||
| 组件 | 设置面板 |
|
||||
|------|---------|
|
||||
| JMixLineBar | BasicOption, TitleOption, XAxisOption, YAxisOption, LegendOption, GridOption, NumOption, BarCylinder, PolyglineOption, CustomColorOption |
|
||||
| DoubleLineBar | BasicOption, TitleOption, XAxisOption, YLeftAxisOption, YRightAxisOption, LegendOption, GridOption, NumOption, BarCylinder, PolyglineOption, CustomColorOption |
|
||||
|
||||
### 饼图/环形图系列
|
||||
| 组件 | 设置面板 |
|
||||
|------|---------|
|
||||
| JPie | BasicOption, TitleOption, LegendOption, gridPieOption, pieSettingOption, NumOption, CustomColorOption |
|
||||
| JRose | BasicOption, TitleOption, LegendOption, gridPieOption, RoseOption, NumOption, CustomColorOption |
|
||||
| JRotatePie | BasicOption, TitleOption, LegendOption, gridPieOption, CustomColorOption |
|
||||
| JRing | BasicOption, TitleOption, LegendOption, gridPieOption, RingOption, NumOption, CustomColorOption |
|
||||
| JBreakRing | BasicOption, BreakRingOption |
|
||||
| JActiveRing | BasicOption, ActiveRingOption, CustomColorOption |
|
||||
| JRadialBar | BasicOption, RadialBarOption, CustomColorOption |
|
||||
|
||||
### 仪表/进度系列
|
||||
| 组件 | 设置面板 |
|
||||
|------|---------|
|
||||
| JGauge | BasicOption, GaugeOption, CustomColorOption |
|
||||
| JColorGauge | BasicOption, GaugeOption, CustomColorOption |
|
||||
| JAntvGauge | BasicOption, AntvGaugeOption, CustomColorOption |
|
||||
| JSemiGauge | BasicOption, SemiGaugeOption |
|
||||
| JProgress | BasicOption, ProgressOption, CustomColorOption |
|
||||
| JCustomProgress | BasicOption, CustomProgressOption |
|
||||
| JListProgress | BasicOption, ListProgressOption |
|
||||
| JRoundProgress | BasicOption, RoundProgressOption |
|
||||
| JRingProgress | BasicOption, ActiveRingPlotOption |
|
||||
| JLiquid | BasicOption, LiquidPlotOption |
|
||||
|
||||
### 散点/气泡/漏斗系列
|
||||
| 组件 | 设置面板 |
|
||||
|------|---------|
|
||||
| JScatter | BasicOption, TitleOption, XAxisOption, YAxisOption, LegendOption, GridOption |
|
||||
| JBubble | BasicOption, TitleOption, XAxisOption, YAxisOption, LegendOption, GridOption, CustomColorOption |
|
||||
| JQuadrant | BasicOption, TitleOption, XAxisOption, YAxisOption, LegendOption, GridOption, CustomColorOption |
|
||||
| JFunnel | BasicOption, TitleOption, LegendOption, NumOption, CustomColorOption |
|
||||
| JPyramidFunnel | BasicOption, TitleOption, LegendOption, NumOption, CustomColorOption |
|
||||
| JPyramid3D | BasicOption, Pyramid3DOption, CustomColorOption |
|
||||
| JRadar | BasicOption, TitleOption, LegendOption, CustomColorOption |
|
||||
|
||||
### 文本/数字系列
|
||||
| 组件 | 设置面板 |
|
||||
|------|---------|
|
||||
| JText | BasicOption, TextOption |
|
||||
| JCountTo | BasicOption, CountToTextOption |
|
||||
| JNumber | BasicOption |
|
||||
| JColorBlock | BasicOption, ColorBlockOption |
|
||||
| JCurrentTime | BasicOption, CountToTextOption |
|
||||
|
||||
### 表格/列表系列
|
||||
| 组件 | 设置面板 |
|
||||
|------|---------|
|
||||
| JScrollBoard | BasicOption, ScrollBoardOpt |
|
||||
| JScrollTable | BasicOption, ScrollTableStyle |
|
||||
| JCommonTable | BasicOption, TableStyle |
|
||||
| JTable | BasicOption, TableStyle |
|
||||
| JList | BasicOption, ListStyle |
|
||||
| JScrollList | BasicOption, ScrollListOption |
|
||||
| JScrollRankingBoard | BasicOption, ScrollOption |
|
||||
| JFlashList | BasicOption |
|
||||
| JBubbleRank | BasicOption, BubbleRankingStyle |
|
||||
| JDevHistory | BasicOption, DevHistoryOption |
|
||||
|
||||
### 地图系列
|
||||
| 组件 | 设置面板 |
|
||||
|------|---------|
|
||||
| JAreaMap | BasicOption, MapOption, LineMapColorOption, VisualMapOptoin |
|
||||
| JBubbleMap | BasicOption, MapOption, LineMapColorOption, ScatterOption, VisualMapOptoin |
|
||||
| JFlyLineMap | BasicOption, MapOption, LineMapColorOption, FlyLineOption, ScatterOption |
|
||||
| JBarMap | BasicOption, MapOption, LineMapColorOption, BarMapOption |
|
||||
| JHeatMap | BasicOption, MapOption, LineMapColorOption, HeatOption |
|
||||
| JTotalFlyLineMap | BasicOption, MapOption, LineMapColorOption, FlyLineOption, ScatterOption, TimeLineOption |
|
||||
| JTotalBarMap | BasicOption, MapOption, LineMapColorOption, BarMapOption, TimeLineOption |
|
||||
|
||||
### 其他组件
|
||||
| 组件 | 设置面板 |
|
||||
|------|---------|
|
||||
| JWordCloud | BasicOption, WordCloudOption |
|
||||
| JFlashCloud | BasicOption, FlashCloudOption |
|
||||
| JRadioButton | BasicOption, CustomColorOption |
|
||||
| JSelectRadio | BasicOption |
|
||||
| JPictorialBar | BasicOption, TitleOption, XAxisOption, YAxisOption, PictorialOption |
|
||||
| JGender | BasicOption |
|
||||
| JStatsSummary | BasicOption |
|
||||
| JCarousel | BasicOption, CarouselOption |
|
||||
| JVideoPlay | BasicOption |
|
||||
| JIframe | BasicOption |
|
||||
| JRectangle | BasicOption, RectangleOption |
|
||||
|
||||
---
|
||||
|
||||
## ECharts 与非 ECharts 组件区分
|
||||
|
||||
**ECharts 组件**（底层用 ECharts 渲染，option 遵循 ECharts 规范 + 扩展属性）：
|
||||
JBar, JStackBar, JDynamicBar, JHorizontalBar, JBackgroundBar, JMultipleBar, JNegativeBar,
|
||||
JLine, JSmoothLine, JStepLine, JMultipleLine, JArea,
|
||||
JMixLineBar, DoubleLineBar,
|
||||
JPie, JRose, JRotatePie, JRing,
|
||||
JScatter, JBubble, JQuadrant,
|
||||
JFunnel, JPyramidFunnel,
|
||||
JRadar, JCircleRadar,
|
||||
JGauge, JColorGauge,
|
||||
JProgress, JPictorialBar,
|
||||
JBar3d, JBarGroup3d,
|
||||
JWordCloud,
|
||||
JAreaMap, JBubbleMap, JFlyLineMap, JBarMap, JHeatMap, JTotalFlyLineMap, JTotalBarMap,
|
||||
JCustomEchart
|
||||
|
||||
**非 ECharts 组件**（自定义渲染，option 使用组件私有属性）：
|
||||
JNumber, JCountTo, JText, JColorBlock, JCurrentTime,
|
||||
JLiquid, JAntvGauge, JSemiGauge, JCustomProgress, JListProgress, JRoundProgress, JRingProgress,
|
||||
JActiveRing, JRadialBar, JBreakRing,
|
||||
JCapsuleChart, JPercentBar,
|
||||
JScrollBoard, JScrollTable, JCommonTable, JTable, JList, JScrollList, JScrollRankingBoard, JFlashList, JBubbleRank,
|
||||
JCarousel, JVideoPlay, JImg, JIframe,
|
||||
JRadioButton, JSelectRadio, JTabToggle, JForm,
|
||||
JDragBorder, JDragDecoration, JDragEditor,
|
||||
JPyramid3D, JGender, JStatsSummary,
|
||||
JFlashCloud, JImgWordCloud, JOrbitRing, JRectangle, JDevHistory
|
||||
469
.trae/skills/jimubi-bigscreen/references/bi-component-types.md
Normal file
469
.trae/skills/jimubi-bigscreen/references/bi-component-types.md
Normal file
@@ -0,0 +1,469 @@
|
||||
# 大屏/仪表盘组件类型完整参考
|
||||
|
||||
## 组件分类总览
|
||||
|
||||
共 142+ 组件，分为以下大类：
|
||||
|
||||
---
|
||||
|
||||
## 一、图表组件（ECharts）
|
||||
|
||||
### 柱状图系列
|
||||
| component | 名称 | 适用场景 |
|
||||
|-----------|------|---------|
|
||||
| `JBar` | 基础柱状图 | 分类数据对比 |
|
||||
| `JHorizontalBar` | 横向柱状图 | 类目名较长 |
|
||||
| `JBackgroundBar` | 背景柱状图 | 带背景色柱状图 |
|
||||
| `JMultipleBar` | 分组柱状图 | 多系列对比 |
|
||||
| `JNegativeBar` | 正负柱状图 | 正负值对比 |
|
||||
| `JStackBar` | 堆叠柱状图 | 部分与整体 |
|
||||
| `JDynamicBar` | 动态柱状图 | 动画排名效果 |
|
||||
| `JCapsuleChart` | 胶囊柱状图 | 进度/占比展示 |
|
||||
| `JPercentBar` | 百分比柱状图 | 占比可视化 |
|
||||
|
||||
### 折线图系列
|
||||
| component | 名称 | 适用场景 |
|
||||
|-----------|------|---------|
|
||||
| `JLine` | 基础折线图 | 趋势变化 |
|
||||
| `JSmoothLine` | 平滑曲线图 | 柔和趋势展示 |
|
||||
| `JStepLine` | 阶梯折线图 | 离散变化 |
|
||||
| `JMultipleLine` | 多折线图 | 多系列趋势 |
|
||||
|
||||
### 混合图系列
|
||||
| component | 名称 | 适用场景 |
|
||||
|-----------|------|---------|
|
||||
| `JMixLineBar` | 柱线混合图 | 不同量级对比 |
|
||||
| `DoubleLineBar` | 双轴图 | 双Y轴混合 |
|
||||
|
||||
### 饼图/环形图系列
|
||||
| component | 名称 | 适用场景 |
|
||||
|-----------|------|---------|
|
||||
| `JPie` | 饼图 | 占比分析 |
|
||||
| `JRose` | 玫瑰图 | 带大小的占比 |
|
||||
| `JRing` | 环形图 | 占比（中心可放数字） |
|
||||
| `JBreakRing` | 断裂环形图 | 特殊视觉效果 |
|
||||
| `JRotatePie` | 旋转饼图 | 动态展示 |
|
||||
| `JActiveRing` | 活动环形图 | 动画环形 |
|
||||
|
||||
### 仪表/进度系列
|
||||
| component | 名称 | 适用场景 |
|
||||
|-----------|------|---------|
|
||||
| `JGauge` | 仪表盘 | 完成度/达标率 |
|
||||
| `JColorGauge` | 彩色仪表盘 | 多色阈值 |
|
||||
| `JAntvGauge` | AntV仪表盘 | G2Plot风格 |
|
||||
| `JSemiGauge` | 半圆仪表盘 | 半圆展示 |
|
||||
| `JProgress` | 进度条 | 完成进度 |
|
||||
| `JCustomProgress` | 自定义进度条 | 自定义样式 |
|
||||
| `JListProgress` | 列表进度条 | 多项进度对比 |
|
||||
| `JRoundProgress` | 圆形进度 | 圆形完成度 |
|
||||
| `JRingProgress` | 环形进度 | 环形完成度 |
|
||||
| `JLiquid` | 水球图 | 百分比/液位 |
|
||||
| `JRadialBar` | 径向柱状图 | 环形对比 |
|
||||
|
||||
### 散点/气泡系列
|
||||
| component | 名称 | 适用场景 |
|
||||
|-----------|------|---------|
|
||||
| `JScatter` | 散点图 | 分布/相关性 |
|
||||
| `JBubble` | 气泡图 | 三维数据 |
|
||||
| `JQuadrant` | 象限图 | 四象限分析 |
|
||||
| `JBubbleRank` | 气泡排名 | 排名可视化 |
|
||||
|
||||
### 漏斗系列
|
||||
| component | 名称 | 适用场景 |
|
||||
|-----------|------|---------|
|
||||
| `JFunnel` | 漏斗图 | 转化分析 |
|
||||
| `JPyramidFunnel` | 金字塔漏斗 | 层级占比 |
|
||||
| `JPyramid3D` | 3D金字塔 | 立体效果 |
|
||||
|
||||
### 雷达/其他
|
||||
| component | 名称 | 适用场景 |
|
||||
|-----------|------|---------|
|
||||
| `JRadar` | 雷达图 | 多维度对比 |
|
||||
| `JCircleRadar` | 圆形雷达 | 圆形多维 |
|
||||
| `JRectangle` | 矩形树图 | 层级占比 |
|
||||
| `JGraphSimple` | 关系图 | 节点关系 |
|
||||
| `JWordCloud` | 词云 | 关键词频率 |
|
||||
| `JImgWordCloud` | 图片词云 | 图形词云 |
|
||||
| `JCustomEchart` | 自定义ECharts | 自定义配置 |
|
||||
|
||||
### 地图系列
|
||||
| component | 名称 | 适用场景 |
|
||||
|-----------|------|---------|
|
||||
| `JAreaMap` | 区域地图 | 区域数据着色 |
|
||||
| `JBubbleMap` | 气泡地图 | 地理数据标注 |
|
||||
| `JFlyLineMap` | 飞线地图 | 迁徙/物流 |
|
||||
| `JBarMap` | 柱状地图 | 地理柱状 |
|
||||
| `JHeatMap` | 热力地图 | 密度分布 |
|
||||
| `JTotalFlyLineMap` | 多节点飞线 | 多点流动 |
|
||||
| `JTotalBarMap` | 多柱状地图 | 多地理柱状 |
|
||||
| `JGaoDeMap` | 高德地图 | 实际地图 |
|
||||
| `JFly3dMap` | 3D飞线地图 | 3D效果 |
|
||||
|
||||
### 3D图表
|
||||
| component | 名称 | 适用场景 |
|
||||
|-----------|------|---------|
|
||||
| `JBar3d` | 3D柱状图 | 立体柱状 |
|
||||
| `JBarGroup3d` | 3D分组柱状图 | 立体分组 |
|
||||
|
||||
---
|
||||
|
||||
## 二、数据展示组件
|
||||
|
||||
### 表格系列
|
||||
| component | 名称 | 适用场景 |
|
||||
|-----------|------|---------|
|
||||
| `JTable` | 数据表格 | 详细数据列表 |
|
||||
| `JCommonTable` | 通用表格 | 基础表格 |
|
||||
| `JScrollTable` | 滚动表格 | 自动轮播表格 |
|
||||
| `JPivotTable` | 透视表 | 交叉分析 |
|
||||
|
||||
### 列表/排行系列
|
||||
| component | 名称 | 适用场景 |
|
||||
|-----------|------|---------|
|
||||
| `JList` | 列表 | 通用列表 |
|
||||
| `JScrollBoard` | 滚动看板 | 信息滚动 |
|
||||
| `JScrollList` | 滚动列表 | 列表轮播 |
|
||||
| `JScrollRankingBoard` | 排行榜 | 排名展示 |
|
||||
| `JFlashList` | 闪烁列表 | 动态列表 |
|
||||
| `JFlashCloud` | 闪烁云 | 标签云 |
|
||||
| `JRankingList` | 排名列表 | 静态排名 |
|
||||
| `JDynamicInfo` | 动态信息 | 实时信息流 |
|
||||
|
||||
---
|
||||
|
||||
## 三、数字/统计卡片
|
||||
|
||||
| component | 名称 | 适用场景 |
|
||||
|-----------|------|---------|
|
||||
| `JNumber` | 数字指标 | KPI核心指标 |
|
||||
| `JCountTo` | 数字翻牌 | 动画计数 |
|
||||
| `JCurrentTime` | 实时时钟 | 当前时间 |
|
||||
| `JColorBlock` | 色块指标 | 颜色+数字 |
|
||||
| `JGrowCard` | 增长卡片 | 增长率指标 |
|
||||
| `JSimpleCard` | 简单卡片 | 信息卡片 |
|
||||
| `JProjectCard` | 项目卡片 | 项目概览 |
|
||||
| `JCustomCard` | 自定义卡片 | 灵活卡片 |
|
||||
| `JStatsSummary` | 统计概要 | 多指标汇总 |
|
||||
|
||||
---
|
||||
|
||||
## 四、交互/容器组件
|
||||
|
||||
| component | 名称 | 适用场景 |
|
||||
|-----------|------|---------|
|
||||
| `JTabs` | 选项卡 | Tab切换 |
|
||||
| `JTabToggle` | 切换选项卡 | 简化Tab |
|
||||
| `JGrid` | 栅格布局 | 布局容器 |
|
||||
| `JQuickNav` | 快捷导航 | 菜单导航 |
|
||||
| `JRadioButton` | 单选按钮组 | 筛选切换 |
|
||||
| `JSelectRadio` | 下拉/单选 | 数据筛选 |
|
||||
| `JFilterQuery` | 筛选查询 | 复合查询 |
|
||||
| `JCustomButton` | 自定义按钮 | 操作按钮 |
|
||||
| `JForm` | 表单 | 查询表单 |
|
||||
| `JGroup` | 组合 | 组件编组（大屏） |
|
||||
|
||||
---
|
||||
|
||||
## 五、媒体组件
|
||||
|
||||
| component | 名称 | 适用场景 |
|
||||
|-----------|------|---------|
|
||||
| `JImg` | 图片 | 图片展示 |
|
||||
| `JCarousel` | 轮播 | 图片/内容轮播 |
|
||||
| `JVideoPlay` | 视频 | 视频播放 |
|
||||
| `JVideoJs` | Video.js | 高级视频 |
|
||||
| `JIframe` | 内嵌页 | 嵌入外部页面 |
|
||||
| `JWeatherForecast` | 天气 | 天气预报 |
|
||||
|
||||
---
|
||||
|
||||
## 六、文本/装饰组件
|
||||
|
||||
| component | 名称 | 适用场景 |
|
||||
|-----------|------|---------|
|
||||
| `JText` | 文本 | 标题/说明文字 |
|
||||
| `JOrbitRing` | 轨道环 | 科技感装饰 |
|
||||
| `JCustomIcon` | 图标 | 自定义图标 |
|
||||
| `JDragBorder` | 装饰边框 | 13种边框样式 |
|
||||
| `JDragDecoration` | 装饰条 | 12种装饰样式 |
|
||||
| `JDragEditor` | 富文本 | TinyMCE编辑器 |
|
||||
| `JCalendar` | 日历 | 日历展示 |
|
||||
| `JPermanentCalendar` | 静态日历 | 固定日历 |
|
||||
|
||||
---
|
||||
|
||||
## 组件通用配置结构
|
||||
|
||||
### 大屏模式（bigScreen）组件 config
|
||||
|
||||
```json
|
||||
{
|
||||
"w": 450,
|
||||
"h": 300,
|
||||
"dataType": 1,
|
||||
"url": "",
|
||||
"timeOut": 0,
|
||||
"turnConfig": {
|
||||
"url": "",
|
||||
"type": "_blank"
|
||||
},
|
||||
"linkType": "url",
|
||||
"linkageConfig": [],
|
||||
"markLineConfig": {
|
||||
"show": false,
|
||||
"markLine": []
|
||||
},
|
||||
"dataMapping": [
|
||||
{"filed": "维度", "mapping": ""},
|
||||
{"filed": "数值", "mapping": ""}
|
||||
],
|
||||
"chartData": [],
|
||||
"option": {}
|
||||
}
|
||||
```
|
||||
|
||||
### 数据源类型（dataType）
|
||||
|
||||
| dataType | 说明 |
|
||||
|----------|------|
|
||||
| 1 | 静态数据（chartData 中直接写入） |
|
||||
| 2 | API 接口（url 字段指定） |
|
||||
| 3 | SQL 查询（数据集配置） |
|
||||
| 4 | 关联表单数据 |
|
||||
|
||||
### JNumber 组件 config 示例
|
||||
|
||||
```json
|
||||
{
|
||||
"dataType": 4,
|
||||
"formId": "form_code",
|
||||
"formName": "表单名称",
|
||||
"tableName": "table_name",
|
||||
"formType": "design",
|
||||
"valueFields": [{
|
||||
"fieldName": "record_count",
|
||||
"fieldTxt": "记录数量",
|
||||
"fieldType": "count",
|
||||
"widgetType": "text"
|
||||
}],
|
||||
"analysis": {
|
||||
"showData": 1,
|
||||
"isRawData": true,
|
||||
"isCompare": false,
|
||||
"showMode": 1,
|
||||
"trendType": "1"
|
||||
},
|
||||
"filter": {
|
||||
"conditionMode": "and",
|
||||
"conditionFields": [],
|
||||
"queryField": "create_time",
|
||||
"queryRange": "month"
|
||||
},
|
||||
"size": {"height": 500},
|
||||
"chart": {
|
||||
"subclass": "JNumber",
|
||||
"category": "Number"
|
||||
},
|
||||
"option": {
|
||||
"isCompare": false,
|
||||
"trendType": "1",
|
||||
"body": {"color": "#000000", "fontWeight": "bold"},
|
||||
"card": {"size": "small"}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### JBar/JLine 等轴类图表 config 示例
|
||||
|
||||
```json
|
||||
{
|
||||
"dataType": 1,
|
||||
"chartData": [
|
||||
{"name": "一月", "value": 820},
|
||||
{"name": "二月", "value": 932},
|
||||
{"name": "三月", "value": 901}
|
||||
],
|
||||
"size": {"width": 860, "height": 380},
|
||||
"chart": {
|
||||
"subclass": "JBar",
|
||||
"category": "Bar"
|
||||
},
|
||||
"option": {
|
||||
"title": {"text": "月度销售", "show": true},
|
||||
"tooltip": {"show": true},
|
||||
"legend": {"show": true},
|
||||
"xAxis": {
|
||||
"type": "category",
|
||||
"show": true,
|
||||
"data": ["一月", "二月", "三月"]
|
||||
},
|
||||
"yAxis": {"type": "value", "show": true},
|
||||
"series": [{
|
||||
"name": "销售额",
|
||||
"type": "bar",
|
||||
"data": [820, 932, 901]
|
||||
}],
|
||||
"grid": {"left": "10%", "right": "10%", "top": "15%", "bottom": "15%"}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### JPie 饼图 config 示例
|
||||
|
||||
```json
|
||||
{
|
||||
"dataType": 1,
|
||||
"chartData": [
|
||||
{"name": "直接访问", "value": 335},
|
||||
{"name": "邮件营销", "value": 310},
|
||||
{"name": "联盟广告", "value": 234}
|
||||
],
|
||||
"size": {"width": 500, "height": 350},
|
||||
"chart": {
|
||||
"subclass": "JPie",
|
||||
"category": "Pie"
|
||||
},
|
||||
"option": {
|
||||
"title": {"text": "访问来源", "show": true},
|
||||
"tooltip": {"show": true},
|
||||
"legend": {"show": true, "orient": "vertical", "left": "left"},
|
||||
"series": [{
|
||||
"name": "来源",
|
||||
"type": "pie",
|
||||
"radius": "55%",
|
||||
"data": [
|
||||
{"name": "直接访问", "value": 335},
|
||||
{"name": "邮件营销", "value": 310},
|
||||
{"name": "联盟广告", "value": 234}
|
||||
]
|
||||
}]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### JTable 表格 config 示例
|
||||
|
||||
```json
|
||||
{
|
||||
"dataType": 1,
|
||||
"chartData": [
|
||||
{"fieldTxt": "姓名", "fieldName": "name", "type": "field", "isShow": "Y", "isTotal": "N"},
|
||||
{"fieldTxt": "年龄", "fieldName": "age", "type": "field", "isShow": "Y", "isTotal": "Y"},
|
||||
{"fieldTxt": "地址", "fieldName": "address", "type": "field", "isShow": "Y", "isTotal": "N"}
|
||||
],
|
||||
"url": "http://api.jeecg.com/mock/42/tableData",
|
||||
"tableList": "http://api.jeecg.com/mock/42/tableList",
|
||||
"size": {"width": 700, "height": 350},
|
||||
"option": {
|
||||
"bordered": true,
|
||||
"size": "small"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### JCustomButton 按钮 config 示例
|
||||
|
||||
```json
|
||||
{
|
||||
"dataType": 1,
|
||||
"chartData": [{
|
||||
"btnId": "74591654852155",
|
||||
"title": "请假申请",
|
||||
"color": "#ED4B82",
|
||||
"icon": "ant-design:calendar-twotone",
|
||||
"operationType": "1",
|
||||
"openMode": "2",
|
||||
"worksheet": {
|
||||
"label": "请假申请",
|
||||
"value": "form_code",
|
||||
"key": "form_code"
|
||||
},
|
||||
"click": {
|
||||
"type": "1",
|
||||
"message": {"title": "确认执行？", "okText": "确认", "cancelText": "取消"}
|
||||
}
|
||||
}],
|
||||
"option": {
|
||||
"btnDirection": "column",
|
||||
"btnStyle": "solid",
|
||||
"rowNum": 5,
|
||||
"title": "常用操作",
|
||||
"btnType": "button",
|
||||
"btnWidth": "custom"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### JCarousel 轮播 config 示例
|
||||
|
||||
```json
|
||||
{
|
||||
"dataType": 1,
|
||||
"chartData": "[{\"src\":\"https://example.com/1.png\"},{\"src\":\"https://example.com/2.png\"}]",
|
||||
"size": {"width": 800, "height": 300},
|
||||
"option": {
|
||||
"dots": true,
|
||||
"autoplay": true,
|
||||
"dotPosition": "bottom"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 大屏 vs 仪表盘 布局差异
|
||||
|
||||
### 大屏（bigScreen）
|
||||
- **布局方式**：绝对定位（像素坐标）
|
||||
- **坐标单位**：x/y 为像素值
|
||||
- **尺寸单位**：w/h 为像素值
|
||||
- **典型画布**：1920×1080 像素
|
||||
- **支持旋转**：是（angle 属性）
|
||||
- **背景**：深色 + 背景图
|
||||
|
||||
### 仪表盘（default）
|
||||
- **布局方式**：网格布局（vue-grid-layout）
|
||||
- **坐标单位**：x 为列号（0-23），y 为行号
|
||||
- **尺寸单位**：w 为列数（1-24），h 为行数（rowHeight=1px）
|
||||
- **支持旋转**：否
|
||||
- **背景**：浅色/白色
|
||||
|
||||
### template 中的坐标字段
|
||||
|
||||
| 字段 | 大屏 | 仪表盘 | 说明 |
|
||||
|------|------|--------|------|
|
||||
| `x` | 像素 | 栅格列 | 水平位置 |
|
||||
| `y` | 像素 | 栅格行 | 垂直位置 |
|
||||
| `w` | 像素 | 列数(1-24) | 宽度 |
|
||||
| `h` | 像素 | 行数 | 高度 |
|
||||
| `pcX` | 像素 | — | PC端水平位置 |
|
||||
| `pcY` | 像素 | — | PC端垂直位置 |
|
||||
| `pcW` | 像素 | — | PC端宽度 |
|
||||
|
||||
---
|
||||
|
||||
## 主题配置
|
||||
|
||||
### 大屏主题
|
||||
```json
|
||||
{
|
||||
"theme": "dark",
|
||||
"style": "bigScreen",
|
||||
"backgroundColor": "",
|
||||
"backgroundImage": "/img/bg/bg4.png"
|
||||
}
|
||||
```
|
||||
|
||||
可用背景图：
|
||||
- `/img/bg/bg1.png` ~ `/img/bg/bg10.png`
|
||||
|
||||
### 仪表盘主题
|
||||
```json
|
||||
{
|
||||
"theme": "default",
|
||||
"style": "default",
|
||||
"backgroundColor": "#f3f5f8"
|
||||
}
|
||||
```
|
||||
|
||||
组件主题颜色：`default`, `gray`, `green`, `red`, `blue`, `dark`
|
||||
1165
.trae/skills/jimubi-bigscreen/references/bi_utils.py
Normal file
1165
.trae/skills/jimubi-bigscreen/references/bi_utils.py
Normal file
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user