344 lines
13 KiB
Markdown
344 lines
13 KiB
Markdown
# 图表模板快速参考
|
||
|
||
积木报表内置 30+ 图表模板，文件位于 `static/jmreport/desreport_/chartjson/`。
|
||
可通过 `GET /jmreport/addChart?chartType=bar.simple` 获取模板配置。
|
||
|
||
生成图表时，从模板中取 ECharts 配置，修改 `title.text`，清空 `data`（由数据集驱动），然后放入 `chartList[].config`。
|
||
|
||
## 图表分类速查
|
||
|
||
### 柱状图 (Bar)
|
||
|
||
| chartType | 说明 | 数据集要求 |
|
||
|-----------|------|-----------|
|
||
| `bar.simple` | 单系列柱状图 | `name, value` |
|
||
| `bar.multi` | 多系列柱状图 | `name, value, type` |
|
||
| `bar.stack` | 堆叠柱状图 | `name, value, type` |
|
||
| `bar.horizontal` | 横向柱状图 | `name, value` |
|
||
| `bar.multi.horizontal` | 横向多系列 | `name, value, type` |
|
||
| `bar.stack.horizontal` | 横向堆叠 | `name, value, type` |
|
||
| `bar.negative` | 正负柱状图 | `name, value, type` |
|
||
| `bar.background` | 带背景柱状图 | `name, value` |
|
||
|
||
### 折线图 (Line)
|
||
|
||
| chartType | 说明 | 数据集要求 |
|
||
|-----------|------|-----------|
|
||
| `line.simple` | 单系列折线图 | `name, value` |
|
||
| `line.multi` | 多系列折线图 | `name, value, type` |
|
||
| `line.smooth` | 平滑曲线图 | `name, value` |
|
||
| `line.area` | 面积图 | `name, value, type` |
|
||
| `line.step` | 阶梯折线图 | `name, value` |
|
||
|
||
### 饼图 (Pie)
|
||
|
||
| chartType | 说明 | 数据集要求 |
|
||
|-----------|------|-----------|
|
||
| `pie.simple` | 饼图 | `name, value` |
|
||
| `pie.doughnut` | 环形图 | `name, value` |
|
||
| `pie.rose` | 玫瑰图（南丁格尔） | `name, value` |
|
||
|
||
### 混合图
|
||
|
||
| chartType | 说明 | 数据集要求 |
|
||
|-----------|------|-----------|
|
||
| `mixed.linebar` | 柱状+折线混合 | `name, value, type` |
|
||
|
||
### 其他图表
|
||
|
||
| chartType | 说明 | 数据集要求 |
|
||
|-----------|------|-----------|
|
||
| `gauge.simple` | 仪表盘 | `name, value` |
|
||
| `gauge.simple180` | 半圆仪表盘 | `name, value` |
|
||
| `radar.basic` | 雷达图 | 特殊（indicator） |
|
||
| `radar.custom` | 自定义雷达图 | 特殊 |
|
||
| `funnel.simple` | 漏斗图 | `name, value` |
|
||
| `funnel.pyramid` | 金字塔图 | `name, value` |
|
||
| `scatter.simple` | 散点图 | 特殊 |
|
||
| `scatter.bubble` | 气泡图 | 特殊 |
|
||
| `map.simple` | 地图 | 特殊 |
|
||
| `map.scatter` | 地图散点 | 特殊 |
|
||
| `graph.simple` | 关系图 | 特殊（需两个数据集） |
|
||
| `pictorial.spirits` | 象形柱图 | `name, value` |
|
||
|
||
## 常用图表 ECharts 配置模板
|
||
|
||
### bar.simple — 单系列柱状图
|
||
|
||
```python
|
||
{
|
||
"title": {"show": True, "text": "标题", "left": "left", "top": "5",
|
||
"padding": [5,20,5,20],
|
||
"textStyle": {"fontSize": 18, "fontWeight": "bolder", "color": "#c23531"}},
|
||
"grid": {"left": 60, "top": 60, "right": 100, "bottom": 60},
|
||
"tooltip": {"show": True, "textStyle": {"color": "#fff", "fontSize": 18}},
|
||
"xAxis": {"show": True, "name": "", "data": [],
|
||
"axisLabel": {"textStyle": {"fontSize": 12, "color": "#333"}},
|
||
"axisLine": {"lineStyle": {"color": "#333"}}},
|
||
"yAxis": {"show": True, "name": "",
|
||
"axisLabel": {"textStyle": {"fontSize": 12, "color": "#333"}},
|
||
"axisLine": {"lineStyle": {"color": "#333"}}},
|
||
"series": [{"name": "", "type": "bar", "data": [],
|
||
"barWidth": 50, "barMinHeight": 2,
|
||
"itemStyle": {"barBorderRadius": 0, "color": "#c43632"}}]
|
||
}
|
||
```
|
||
|
||
### bar.multi — 多系列柱状图
|
||
|
||
```python
|
||
{
|
||
"title": {"show": True, "text": "标题", "left": "left",
|
||
"padding": [5,20,5,20],
|
||
"textStyle": {"fontSize": 18, "fontWeight": "bolder", "color": "#c23531"}},
|
||
"legend": {"show": True, "data": [], "top": "top", "left": "center",
|
||
"orient": "horizontal", "padding": [25,20,25,10],
|
||
"textStyle": {"color": "#333", "fontSize": 12}},
|
||
"grid": {"left": 60, "top": 60, "right": 100, "bottom": 60},
|
||
"tooltip": {"show": True, "trigger": "axis",
|
||
"axisPointer": {"type": "shadow"},
|
||
"textStyle": {"color": "#fff", "fontSize": 18}},
|
||
"xAxis": {"show": True, "type": "category", "data": [],
|
||
"axisLabel": {"textStyle": {"fontSize": 12, "color": "#333"}},
|
||
"axisLine": {"lineStyle": {"color": "#333"}}},
|
||
"yAxis": {"show": True,
|
||
"axisLabel": {"textStyle": {"fontSize": 12, "color": "#333"}},
|
||
"axisLine": {"lineStyle": {"color": "#333"}}},
|
||
"series": [
|
||
{"name": "系列1", "type": "bar", "data": [], "barWidth": 0, "barMinHeight": 2,
|
||
"label": {"show": True, "position": "top", "textStyle": {"color": "black", "fontSize": 12}},
|
||
"itemStyle": {"barBorderRadius": 0, "color": ""}},
|
||
{"name": "系列2", "type": "bar", "data": [], "barWidth": 0, "barMinHeight": 2,
|
||
"label": {"show": True, "position": "top", "textStyle": {"color": "black", "fontSize": 12}},
|
||
"itemStyle": {"barBorderRadius": 0, "color": ""}}
|
||
]
|
||
}
|
||
```
|
||
|
||
### line.simple — 单系列折线图
|
||
|
||
```python
|
||
{
|
||
"title": {"show": True, "text": "标题",
|
||
"textStyle": {"fontSize": 18, "fontWeight": "bolder", "color": "#c23531"}},
|
||
"grid": {"left": 60, "top": 60, "right": 100, "bottom": 60},
|
||
"xAxis": {"show": True, "data": []},
|
||
"yAxis": {"show": True, "name": ""},
|
||
"series": [{"name": "", "type": "line", "data": [],
|
||
"smooth": False, "showSymbol": True, "symbolSize": 5,
|
||
"lineStyle": {"width": 2, "color": "#c43632"}}]
|
||
}
|
||
```
|
||
|
||
### pie.simple — 饼图
|
||
|
||
```python
|
||
{
|
||
"title": {"show": True, "text": "标题",
|
||
"textStyle": {"fontSize": 18, "fontWeight": "bolder", "color": "#c23531"}},
|
||
"tooltip": {"show": True, "formatter": "{a} <br/>{b} : {c}"},
|
||
"legend": {"show": True, "data": [], "orient": "horizontal",
|
||
"textStyle": {"color": "#333", "fontSize": 12}},
|
||
"series": [{"name": "数据", "type": "pie",
|
||
"radius": "55%", "minAngle": 0,
|
||
"center": [320, 180],
|
||
"label": {"show": True, "position": "outside"},
|
||
"data": []}]
|
||
}
|
||
```
|
||
|
||
### pie.doughnut — 环形图
|
||
|
||
```python
|
||
{
|
||
"title": {"show": True, "text": "标题",
|
||
"textStyle": {"fontSize": 18, "fontWeight": "bolder", "color": "#c23531"}},
|
||
"tooltip": {"show": True, "formatter": "{a} <br/>{b} : {c}"},
|
||
"legend": {"show": True, "data": [], "orient": "horizontal",
|
||
"textStyle": {"color": "#333", "fontSize": 12}},
|
||
"series": [{"name": "数据", "type": "pie",
|
||
"isRadius": True,
|
||
"radius": ["45%", "55%"], # 内外半径 → 环形
|
||
"minAngle": 0, "roseType": "", "isRose": False,
|
||
"center": [320, 180],
|
||
"label": {"show": True, "position": "outside"},
|
||
"data": []}]
|
||
}
|
||
```
|
||
|
||
### mixed.linebar — 柱线混合图
|
||
|
||
```python
|
||
{
|
||
"chartType": "linebar",
|
||
"title": {"show": True, "text": "标题",
|
||
"textStyle": {"fontSize": 18, "fontWeight": "bolder", "color": "#c23531"}},
|
||
"legend": {"data": []},
|
||
"xAxis": {"type": "category", "data": []},
|
||
"yAxis": [
|
||
{"type": "value", "name": "左轴"},
|
||
{"type": "value", "name": "右轴"}
|
||
],
|
||
"series": [
|
||
{"name": "柱状", "type": "bar", "data": []},
|
||
{"name": "折线", "type": "line", "data": []},
|
||
{"name": "右轴数据", "type": "bar", "yAxisIndex": 1, "data": []}
|
||
]
|
||
}
|
||
```
|
||
|
||
### gauge.simple — 仪表盘
|
||
|
||
```python
|
||
{
|
||
"title": {"show": True, "text": "标题",
|
||
"textStyle": {"fontSize": 18, "fontWeight": "bolder", "color": "#c23531"}},
|
||
"tooltip": {"show": True, "formatter": "{b} : {c}"},
|
||
"series": [{"name": "业务指标", "type": "gauge",
|
||
"radius": "75%", "center": [330, 200],
|
||
"itemStyle": {"color": "#63869E"},
|
||
"pointer": {"show": True},
|
||
"detail": {"formatter": "{value}%",
|
||
"textStyle": {"color": "rgba(0,0,0,1)", "fontSize": 25}},
|
||
"axisLine": {"lineStyle": {
|
||
"color": [[0.2, "#91c7ae"], [0.8, "#63869E"], [1, "#C23531"]],
|
||
"width": 25}},
|
||
"data": [{"value": 50, "name": "完成率"}]}]
|
||
}
|
||
```
|
||
|
||
### funnel.simple — 漏斗图
|
||
|
||
```python
|
||
{
|
||
"title": {"show": True, "text": "标题",
|
||
"textStyle": {"fontSize": 18, "fontWeight": "bolder", "color": "#c23531"}},
|
||
"legend": {"show": True, "data": []},
|
||
"tooltip": {"show": True, "trigger": "item", "formatter": "{b} : {c}"},
|
||
"series": [{"name": "漏斗图", "type": "funnel",
|
||
"left": "10%", "top": 60, "bottom": 60, "width": "80%",
|
||
"sort": "descending", "gap": 2, "orient": "vertical",
|
||
"label": {"show": True, "position": "inside",
|
||
"textStyle": {"fontSize": 16}},
|
||
"itemStyle": {"borderColor": "#fff", "borderWidth": 1},
|
||
"data": []}]
|
||
}
|
||
```
|
||
|
||
### radar.basic — 雷达图
|
||
|
||
```python
|
||
{
|
||
"title": {"show": True, "text": "标题",
|
||
"textStyle": {"fontSize": 18, "fontWeight": "bolder", "color": "#c23531"}},
|
||
"legend": {"show": True, "data": []},
|
||
"tooltip": {"show": True},
|
||
"radar": [{"shape": "polygon", "center": [320, 200],
|
||
"name": {"formatter": "【{value}】",
|
||
"textStyle": {"fontSize": 14, "color": "#72ACD1"}},
|
||
"indicator": [
|
||
{"name": "维度1", "max": 100},
|
||
{"name": "维度2", "max": 100},
|
||
{"name": "维度3", "max": 100}
|
||
]}],
|
||
"series": [{"name": "", "type": "radar",
|
||
"data": [{"value": [80, 60, 70], "name": "系列1"}]}]
|
||
}
|
||
```
|
||
|
||
## 数据集 SQL 映射规则
|
||
|
||
图表数据集使用固定的 `name`/`value`/`type` 字段映射：
|
||
|
||
```sql
|
||
-- 单系列（bar.simple, line.simple, pie.simple 等）
|
||
SELECT product_name AS name, sales_amount AS value, '' AS type
|
||
FROM sales_table
|
||
|
||
-- 多系列（bar.multi, line.multi, mixed.linebar 等）
|
||
SELECT month AS name, amount AS value, category AS type
|
||
FROM sales_table
|
||
|
||
-- 仪表盘（gauge）
|
||
SELECT '完成率' AS name, ROUND(done*100/total) AS value, '' AS type
|
||
FROM task_summary
|
||
|
||
-- 漏斗图（funnel）
|
||
SELECT stage AS name, count AS value, '' AS type
|
||
FROM funnel_data ORDER BY count DESC
|
||
```
|
||
|
||
## 快速生成图表的 Python 代码
|
||
|
||
```python
|
||
def create_chart(chart_type, title, db_code, db_id, row_start, col_start,
|
||
rows=10, cols=5, width="650", height="350"):
|
||
"""快速生成图表配置"""
|
||
layer_id = "chart_" + gen_id()
|
||
|
||
# 根据类型选择基础配置
|
||
base_configs = {
|
||
"bar.simple": {
|
||
"title": {"text": title, "left": "center", "top": "10"},
|
||
"tooltip": {"trigger": "axis", "axisPointer": {"type": "shadow"}},
|
||
"grid": {"left": "3%", "right": "4%", "bottom": "3%", "containLabel": True},
|
||
"xAxis": [{"type": "category", "data": []}],
|
||
"yAxis": [{"type": "value"}],
|
||
"series": [{"type": "bar", "data": [], "barWidth": "40%"}]
|
||
},
|
||
"pie.simple": {
|
||
"title": {"text": title, "left": "center"},
|
||
"tooltip": {"trigger": "item", "formatter": "{b}: {c} ({d}%)"},
|
||
"legend": {"bottom": "5%", "left": "center"},
|
||
"series": [{"type": "pie", "radius": "55%", "center": ["50%", "50%"], "data": []}]
|
||
},
|
||
"line.simple": {
|
||
"title": {"text": title, "left": "center"},
|
||
"tooltip": {"trigger": "axis"},
|
||
"grid": {"left": "3%", "right": "4%", "bottom": "3%", "containLabel": True},
|
||
"xAxis": [{"type": "category", "data": []}],
|
||
"yAxis": [{"type": "value"}],
|
||
"series": [{"type": "line", "smooth": True, "data": []}]
|
||
},
|
||
"gauge.simple": {
|
||
"title": {"text": title, "left": "center"},
|
||
"series": [{"type": "gauge", "radius": "75%",
|
||
"detail": {"formatter": "{value}%"},
|
||
"data": [{"value": 0, "name": ""}]}]
|
||
}
|
||
}
|
||
config = base_configs.get(chart_type, base_configs["bar.simple"])
|
||
|
||
# virtual cells
|
||
row_end = row_start + rows - 1
|
||
col_end = col_start + cols - 1
|
||
virtual_cells = [[r,c] for r in range(row_start, row_end+1) for c in range(col_start, col_end+1)]
|
||
|
||
# rows 占位
|
||
chart_rows = {}
|
||
for r in range(row_start, row_end + 1):
|
||
cells = {}
|
||
for c in range(col_start, col_end + 1):
|
||
cells[str(c)] = {"text": " ", "virtual": layer_id}
|
||
chart_rows[str(r)] = {"cells": cells}
|
||
|
||
chart_item = {
|
||
"row": row_start, "col": col_start, "colspan": 0, "rowspan": 0,
|
||
"width": width, "height": height,
|
||
"config": json.dumps(config, ensure_ascii=False),
|
||
"url": "",
|
||
"extData": {
|
||
"chartType": chart_type, "dataType": "sql",
|
||
"dataId": str(db_id), "dbCode": db_code,
|
||
"axisX": "name", "axisY": "value", "series": "type",
|
||
"xText": "", "yText": "", "apiStatus": "1"
|
||
},
|
||
"layer_id": layer_id,
|
||
"offsetX": 0, "offsetY": 0,
|
||
"backgroud": {"enabled": False, "color": "#fff", "image": ""},
|
||
"virtualCellRange": virtual_cells
|
||
}
|
||
|
||
return chart_item, chart_rows
|
||
```
|