chenx/qhmes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
生产及设备基础资料
qhmes/.trae/skills/jimureport/references/chart-templates.md

13 KiB
Raw Permalink Blame History

图表模板快速参考

积木报表内置 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 — 单系列柱状图

{
    "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 — 多系列柱状图

{
    "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 — 单系列折线图

{
    "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 — 饼图

{
    "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 — 环形图

{
    "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 — 柱线混合图

{
    "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 — 仪表盘

{
    "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 — 漏斗图

{
    "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 — 雷达图

{
    "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 字段映射：

-- 单系列（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 代码

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
Reference in New Issue View Git Blame Copy Permalink