qhmes/.trae/skills/jimubi-bigscreen/references/bi-comp-option-config.md

# 大屏组件配置修改参考

修改大屏组件样式时，根据组件类型和修改目标，使用对应的配置路径。

## 修改输出格式

只返回需要修改的属性，不包含未修改的配置：

```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