主题
图表组件
17 类 ECharts 图表 + 仪表盘，属性分段为：内容 · 样式 · 数据 · 行为 · 高级（默认 数据）。
通用配置（多数 Cartesian 图表）
以下项在 内容 / 样式 / 数据 / 行为 / 高级 中出现（具体图表可能隐藏部分项，以面板为准）。
内容
| 配置 | 说明 |
|---|---|
| 主标题 / 副标题 | 图表标题文案 |
| 显示标题、标题位置 | 是否显示及位置 |
| 布局预设 | 图例与标题相对位置快捷布局 |
| 显示图例 | 及图例字号相关项 |
| 显示数据标签 | 柱/点上的数值标签 |
| 显示网格线 / 坐标轴 | 直角坐标系图表 |
| Y 轴单位 / 右轴单位 | 双 Y 轴时 |
| 双 Y 轴 / 右轴系列 | 指定哪些系列走右轴 |
| 数据模式 | 经典 categories+series 或 Dataset 模式（柱/线/阶梯/面积） |
| 柱宽度 / 平滑曲线 / 阶梯线 | 按图表类型 |
| 数值轴标签格式 | 模板格式化 Y 轴刻度 |
样式
| 配置 | 说明 |
|---|---|
| 标题字号 / 标题颜色 | |
| 坐标轴字号 / 颜色 | |
| 图例字号 / 颜色 | |
| 主题色 | 主系列色 |
| 系列色板 | 多系列配色 |
| 维度颜色 | 按系列单独设色 |
| 背景色 | 图表区背景 |
数据
| 配置 | 说明 |
|---|---|
| 图表数据 | JSON 编辑器编辑静态数据 |
| 填入示例数据 | 一键恢复默认示例 |
| 数据源绑定 | HTTP/WS + dataPath |
行为
| 配置 | 说明 |
|---|---|
| 交互事件、入场动画 | 与其它组件相同 |
高级
| 配置 | 说明 |
|---|---|
| 自动刷新 (秒) | 定时重绘（配合静态或拉取后数据） |
| 数据区域缩放 dataZoom | 柱/线/阶梯/面积/折柱混合 |
| 大数据优化渲染 | 万级点性能优化 |
| 工具栏 toolbox | 部分类型支持保存图片等 |
| 绘图区边距 grid | 调整图表绘图区留白 |
| 提示框格式 | tooltip 模板 |
| 手动刷新图表 | 立即重绘 |
柱状图 barChart
用途：分类对比、多系列并列/堆叠。
数据格式（经典）：
json
{
"categories": ["一月", "二月"],
"series": [{ "name": "系列A", "data": [120, 200] }]
}Dataset 模式：dimensions + source 数组。
特有：柱宽、柱间距、堆叠、双 Y 轴、右轴系列、图例项间距、默认隐藏系列。
Dataset 模式怎么切
适合：Excel 式 表头 + 多行数据，或接口返回 { dimensions, source }。
- 选中 柱状图 / 折线图 / 阶梯图 / 面积图。
- 内容 分段 → 数据模式 → 选 Dataset (dimensions + source)。
- 数据 分段 → 编辑 JSON，例如：
json
{
"dimensions": ["月份", "销量", "利润"],
"source": [
["一月", 120, 30],
["二月", 200, 45]
]
}- 从 经典 切到 Dataset 时，编辑器会 自动转换 现有数据（可再微调）。
- 绑 API 时 dataPath 应指向含
dimensions+source的对象。
双 Y 轴（左右两个刻度）
适合：一个系列是 大数值（销量），另一个是 小数值或百分比（增长率）。
- 内容 → 打开 双 Y 轴 开关。
- 右轴系列（多系列时）：勾选走 右轴 的系列名（如「增长率」）。
- Y 轴单位 / 右轴单位：可填
万元、%等。 - 样式 或 高级 里可设 左/右轴标签格式（双 Y 轴时出现）。
- 折线柱状图 默认柱走左轴、折线可走右轴；具体以面板为准。
TIP
单系列或数值量级接近时 不必 开双 Y 轴，避免误读。
跟做教程：实操 · 柱状图 Dataset 模式（静态数据逐步切换，无需接口）。
折线图 lineChart
用途：趋势、时序。
数据格式：同柱状图 classic / dataset。
特有：平滑曲线、数据点形状与大小、是否填充面积（折线可配合 area 系列语义）。
阶梯图 stepChart
用途：阶段型变化（如阶梯电价）。
数据格式：同柱/线图。
特有：阶梯线型（start/middle/end）。
面积图 areaChart
用途：累计趋势、堆叠面积。
数据格式：同柱/线图。
特有：系列填充透明度、堆叠。
折线柱状图 lineBarChart
用途：同一类目下 柱 + 折线 双系列（如销量 + 增长率）。
数据格式：
json
{
"categories": ["一月", "二月"],
"barSeries": [{ "name": "销售额", "data": [120, 200] }],
"lineSeries": [{ "name": "增长率", "data": [30, 45] }]
}特有：折线颜色（与柱系列色区分）、双 Y 轴、dataZoom、工具栏。
饼图 pieChart
用途：占比构成。
数据格式：[{ "name": "A", "value": 100 }, ...]
特有：饼图中心、内外半径（环图）；无坐标轴；可选 toolbox。
玫瑰图 roseChart
用途：分类占比 + 半径表示数值。
数据格式：同饼图。
特有：玫瑰图中心、内外半径。
散点图 scatterChart
用途：分布、相关性。
数据格式：
- 单系列：
[{ "name": "点1", "value": [x, y] }] - 多系列：
{ "series": [{ "name": "S1", "data": [[x,y], ...] }] }
特有：数值轴 tooltip；大数据优化；无 dataZoom（以面板为准）。
雷达图 radarChart
用途：多维度能力对比。
数据格式：
indicators:[{ "name": "销量", "max": 100 }, ...]data:[{ "name": "系列A", "value": [80, 90, ...] }]
特有：雷达大小、交替背景环、填充区域与透明度、线条粗细。
漏斗图 funnelChart
用途：转化漏斗。
数据格式：[{ "name": "访问", "value": 100 }, ...]
特有：侧重数据标签；无坐标轴/图例高级项（面板精简）。
热力图 heatmapChart
用途：二维矩阵强度（如时段 × 类目）。
数据格式：
xAxisData、yAxisData标签数组data:[[xIndex, yIndex, value], ...]
特有：数值范围 / 色条 在 样式（visualMap）；无系列色板。
桑基图 sankeyChart
用途：流量、能量、转化路径。
数据格式：
json
{
"nodes": [{ "name": "A", "depth": 0 }],
"links": [{ "source": "A", "target": "B", "value": 10 }]
}特有：节点字号；无图例/坐标轴/grid。
关系图 graphChart
用途：节点关系网络。
数据格式：
json
{
"categories": [{ "name": "类型A" }],
"nodes": [{ "name": "N1", "category": 0, "symbolSize": 40 }],
"links": [{ "source": "N1", "target": "N2", "value": 1 }]
}特有：布局（力导向 / 环形等）、缩放平移 roam、节点可拖拽、斥力、节点大小。
旭日图 sunburstChart
用途：层级占比。
数据格式：[{ "name": "根", "value": 100, "children": [...] }]
特有：内径、外径。
树图 treeChart
用途：组织架构、目录树。
数据格式：单根 { "name": "根", "children": [...] }
特有：节点字号；无图例。
K 线图 candlestickChart
用途：金融 OHLC。
数据格式：
json
{
"categories": ["1/1", "1/2"],
"series": [{
"name": "股票A",
"data": [[开, 收, 低, 高], ...]
}]
}特有：涨颜色 / 跌颜色；坐标轴与 grid；数值轴格式。
仪表盘 gaugeChart
用途：单指标完成度、仪表盘 KPI。
配置分段（专用面板，非 ChartPropSections）：
| 分段 | 主要配置 |
|---|---|
| 内容 | 标题、副标题、是否显示进度弧、仪表盘大小、圆心水平/垂直位置 |
| 样式 | 主题色、背景色 |
| 数据 | 当前值、最小值、最大值、单位 |
| 行为 | 事件、入场动画 |
| 高级 | 自动刷新 |
支持数据源绑定与示例数据。
使用建议
- 先 填入示例数据 看结构，再改 JSON 或绑 API
- 多系列用 系列色板 统一配色，或工具栏 配色 整页换肤
- 数据量大时开启 大数据优化、dataZoom
- 属性过多时用 搜索 定位「图例」「dataZoom」等