LiteBI

Appearance

指南 ​

概述 ​

  • LiteBI 是一款专为 API 设计的报表软件，可以快速构建图表（柱状图、饼图、折线图、散点图、地图等），可快速创建仪表板
  • 不依赖其他软件（只需要 JDK 环境），一键启动，支持 windows、linux、macOS
  • 支持图表、仪表板链接分享，方便将图表、仪表板嵌入到其他系统。
  • 仅支持 API 数据源，对 API 做了丰富的场景适配。支持动态 http 参数值，支持 token 验证，支持定期获取 token，支持复杂嵌套的 json 参数，支持 header 传参

演示网站 ​

  • 演示网站
  • 账号密码：admin/admin (请不要修改密码)

为什么选择 LiteBI？ ​

  • 传统 BI 工具是在页面上配置数据库账号，然后在页面对数据进行分析汇总（比如选择表、维度字段、指标字段、指标函数），然后选择图形类型，配置图形参数，最后将分析结果以图形展示。这就面临一个问题，报表工具和分析数据的业务逻辑强耦合，比方说如果要切换报表工具，那上面的分析过程就要重做一遍，并且分析汇总后的结果数据只有报表工具自身持有，无法对其他系统提供数据服务。

  • LiteBI 的设计理念认为报表系统应该前后端分离，报表工具仅仅只是一个图形渲染工具，不应该关心数据分析汇总的逻辑，数据分析应该全部放在后端服务中，数据通过 API 与报表对接，这样分析汇总的结果数据永远在后端接口服务中持有，后端接口服务可以对各个系统提供数据服务，并且一旦报表工具切换，数据资产仍然存在，不需要重新进行数据分析。

  • 鉴于以上理念，LiteBI 设计成仅支持 API 数据源。如果您已经有大量的数据类 API，比如您已经有DBAPI平台，LiteBI 将是您不错的 BI 软件选择。又或者您非常看重数据资产化，希望分析数据全部放在后端接口服务中，LiteBI 将是您不错的 BI 软件选择。

  • 有朋友会问其他 BI 工具也支持 API 数据源，为什么选择 LiteBI？答案是 LiteBI 对 API 的支持做了很多适配设计，支持 API 使用的各种场景(同类产品对 API 的支持都是不足的)。比如说 API 访问的时候要进行 token 验证，支持定期获取 token，也支持 token 失效的时候重新获取 token；支持 API 传参，包括复杂嵌套的 json 参数；支持动态参数值，比如把页面上输入框、选择框的值作为请求参数去访问 API 获取数据。

  • 轻量化、简单、易用也是 LiteBI 遵循的设计理念，除了 JDK，软件的安装不依赖其他软件，可以一键启动。软件对资源消耗极低，2 核 4g 服务器即可运行。页面交互设计非常简洁，图表的创建操作简单，在数据 API 已有的情况下，半分钟即可创建一张图。如果搭配DBAPI(零代码创建 API 工具)的使用，可以让您高效快捷的进行数据分析。如果您处在中小企业、传统行业，数据分析团队小，开发能力不足，这样一款小巧简便的 BI 工具，会是您不错的选择。

基本概念 ​

图表 ​

  • 最基础的图表，可以是表格、柱状图、饼图、折线图、散点图、地图等。

仪表板 ​

  • 仪表板是图表的集合，可以创建仪表板，将多个图表拼接成仪表板。类似于可视化数据大屏。仪表板中还可以添加输入控件，例如输入框、下拉选择器、日期选择器等，控件中的数据可以作为变量传入图表中，实现图表数据按条件动态变化。

变量 ​

  • 系统支持两种类型的变量：系统变量和局部变量
  • 系统变量为系统范围内的全局变量，可在API调用过程中作为参数进行引用。例如，当API接口鉴权需要携带token时，若多个API均需使用同一token，可创建一个系统变量token，供多个图表中的API共享使用。此外，系统变量的值可配置为从API获取，并支持定时访问API更新变量值，以确保token的有效性。
  • 局部变量限定于仪表板范围内使用，仪表板中的每个输入控件（如文本输入框、下拉选择器、日期选择器等）均关联一个局部变量名，仪表板内图表的API可引用该局部变量作为请求参数。典型的使用场景为基于输入条件进行数据筛选。

快速开始 ​

数据准备 ​

为演示需要，请先启动一个本地 API 服务。

  1. 安装 Python 依赖：
bash
pip install Flask Flask-Cors
  1. 创建 api.py 文件：
python
from flask import Flask, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route('/api/data1', methods=['GET', 'POST'])
def get_data():
    data = [
        {"month": "2023-M5", "apple": 87, "banana": 90},
        {"month": "2023-M6", "apple": 90, "banana": 85},
        {"month": "2023-M7", "apple": 100, "banana": 80},
        {"month": "2023-M8", "apple": 80, "banana": 70}
    ]
    return jsonify(data)

@app.route('/api/data2', methods=['GET', 'POST'])
def get_data2():
    data2 = [
        {"month": "2023-M5", "apple": 87, "banana": 90},
        {"month": "2023-M6", "apple": 90, "banana": 85},
        {"month": "2023-M7", "apple": 100, "banana": 80},
        {"month": "2023-M8", "apple": 80, "banana": 70}
    ]
    return jsonify(data2)

@app.route('/api/data3', methods=['GET', 'POST'])
def get_data3():
    return jsonify(0.85)

@app.route('/api/data4', methods=['GET', 'POST'])
def get_data4():
    data = [
        {"site": "baidu", "search_tech": 8, "market_share": 7, "product_ecosystem": 7, "ai_capability": 8, "privacy_protection": 6, "internationalization": 3},
        {"site": "google", "search_tech": 9, "market_share": 9, "product_ecosystem": 9, "ai_capability": 9, "privacy_protection": 8, "internationalization": 9}
    ]
    return jsonify(data)

if __name__ == '__main__':
    app.run(debug=True, port=5000)
  1. 启动服务：
bash
python api.py

登录 ​

  • 访问http://localhost:7000/login，默认用户名密码：admin/admin

litebi/doc/images/1769777217543-2026130204659.png

创建第一个图表 ​

  • 选择图表菜单，点击创建图表按钮

litebi/doc/images/1769777311812-2026130204833.png

  • 进入图表编辑页面，选择折线图

litebi/doc/images/1769849740273-2026131165542.png

  • 填写基本信息

litebi/doc/images/1769777453078-2026130205055.png

  • 填写 API 数据集

方法选择 post 请求地址填写http://localhost:5000/api/data1 其余项不填

litebi/doc/images/1769777668205-2026130205430.png

  • 点击预览 API 数据按钮，您可以看到 API 返回的数据

litebi/doc/images/1769777696966-2026130205458.png

  • 填写图表参数 X 轴字段填写 month，数据字段填写 apple

litebi/doc/images/1769777794996-2026130205636.png

  • 预览图表 点击预览按钮，可以看到图表

litebi/doc/images/1769777857878-2026130205739.png

  • 保存图表 点击保存按钮，即可保存图表

litebi/doc/images/1769777911760-2026130205833.png

  • 返回图表列表 点击图表菜单，可以看到创建了第一个图表

litebi/doc/images/1769777940702-202613020592.png

  • 查看图表 鼠标悬浮在图上会显示一些操作按钮，点击查看按钮，可以在新页面看到图表

litebi/doc/images/1769778003405-20261302105.png

  • 编辑图表 点击编辑按钮，进入编辑页面，您可以修改配置再保存

litebi/doc/images/1769778090695-202613021132.png

  • 删除图表 点击删除按钮，在弹出的确认窗口中点确认，即可删除图表

litebi/doc/images/1769850386720-202613117628.png

  • 分享图表链接 点击分享按钮，弹窗中填写过期时间，即可生成分享链接，该链接可以嵌入其他系统的页面（使用 iframe 标签）。

litebi/doc/images/1769778177846-202613021259.png

litebi/doc/images/1769778201389-202613021323.png

创建第一个仪表板 ​

  • 选择仪表板菜单，点击创建仪表板按钮，进入仪表板编辑页面

litebi/doc/images/1769850454161-202613117736.png

  • 选择左侧图表菜单，可以看到展示了所有图表，点击图表右上角的添加按钮，即可添加到仪表板

litebi/doc/images/1769780747729-2026130214549.png

  • 选中图表可以拖动位置

litebi/doc/images/1769780798410-2026130214640.png

  • 鼠标悬浮在图表右下角出现尺寸按钮，可以拖动改变图表尺寸

litebi/doc/images/1769780828217-2026130214710.png

  • 填写仪表板名称，点击保存按钮保存

litebi/doc/images/1769780894104-2026130214816.png

  • 点击仪表板菜单，查看仪表板列表

litebi/doc/images/1769780932048-2026130214853.png

  • 点击查看按钮，可以在单独的页面查看整个仪表板

litebi/doc/images/1769781018256-2026130215020.png

  • 点击编辑按钮，可以进入修改仪表板页面

litebi/doc/images/1769781037015-2026130215038.png

  • 点击删除按钮，可以删除仪表板

litebi/doc/images/1769781055842-2026130215057.png

  • 点击分享按钮，在弹窗中填写过期时间，即可生成分享链接，该链接可以嵌入其他系统的页面（使用 iframe 标签）

litebi/doc/images/1769781098505-2026130215140.png

  • 分享的链接可以在链接管理页面查看

litebi/doc/images/1769781153649-2026130215235.png

API 配置 ​

  • LiteBI 遵循"一切数据皆来源于 API"的设计原则，图表的数据来源于 API，系统变量的值可来源于 API，仪表板中部分控件的参数（如下拉选择器的所有选项）亦可来源于 API
  • 支持配置 API 的请求地址、请求方法、请求参数、请求头、数据转换脚本等参数。

litebi/doc/images/1769781248001-202613021549.png

请求方法 ​

  • LiteBI 支持 GET 和 POST 两种标准 HTTP 请求方法

请求地址 ​

  • 请求地址需填写符合 HTTP 协议规范的 URL，例如：http://localhost:5000/api/data1

请求参数 ​

  • 对于 GET 类型请求，参数须写入 URL 地址中，例如：http://localhost:5000/api/data1?name=litebi&num=1， 若参数值中包含变量，可采用 ${变量名} 格式，例如：http://localhost:5000/api/data1?name=${name}&num=${num}

  • 对于 POST 类型请求，参数需填写至参数输入框中，采用 JSON 格式，例如：{"name":"litebi","num":1}， 若参数值中包含变量，可采用 ${变量名} 格式，例如：{"name":${name},"num":${num}}

WARNING

请注意，若参数值为字符串变量，无需在变量引用外层使用引号包裹，例如：{"name":"${name}","num":${num}} 为错误写法

请求头 ​

  • 请求头默认包含 Content-Type: application/x-www-form-urlencoded 项，支持配置多个请求头，点击添加按钮可创建额外请求头
  • 对于 POST 类型请求，支持传递多层嵌套 JSON 格式参数，例如：{"name":"litebi","num":1,"data":{"name":"litebi","num":1}}
  • 如需传递嵌套 JSON 格式参数，必须将请求头 Content-Type 设置为 application/json

litebi/doc/images/1769781502539-2026130215824.png

  • 请求头的值支持使用变量，包括仪表板中的局部变量和系统变量，采用 ${变量名} 格式
  • 典型应用场景为 API 鉴权，需添加 Authorization 请求头，其值为 token，而 token 为系统变量，可按如下方式配置。如对此功能不理解，请参阅本文档中系统变量的相关说明。

图 19

API 数据转换 ​

  • 因不同图表所需的数据格式各异，若 API 返回的数据格式与图表所需格式不符，可配置数据转换脚本，将 API 返回的数据转换为图表所需的格式。

  • 数据转换脚本包含 JSONPath 和 JavaScript 两种类型，具体编写规则请参考数据转换

    TIP

    如不填写则表示 API 返回的数据无需转换

litebi/doc/images/1769781721065-20261302223.png

图表 ​

  • 图表的创建和编辑，需要填写基本信息、API 数据集、图表参数 3 部分。
  • 其中基本信息、API 数据集每种图表配置方式都一样，只有图表参数配置不同。API 数据集配置方法参考API 配置，以下就介绍不同图表的参数配置。

litebi/doc/images/1769781765425-202613022247.png

柱状图 ​

  • 此图要求 API 返回数据（或者数据转换后的数据）格式必须是对象数组格式，比如：
json
[
  { "month": "2023-M5", "apple": 87, "banana": 90 },
  { "month": "2023-M6", "apple": 90, "banana": 85 },
  { "month": "2023-M7", "apple": 100, "banana": 80 },
  { "month": "2023-M8", "apple": 80, "banana": 70 }
]
  • X 轴字段：请填写用于分类的字段。以上述数据为例，“月份”为分类维度，应填写 month。
  • X 轴标签显示控制：当标签过于密集时，系统将自动省略部分标签以保证可读性。如需强制显示全部标签，请勾选“显示全部 X 轴标签”；若需调整标签显示角度，可在对应选项中输入旋转角度（单位：度）。
  • 数据字段：请指定需在图表中展示的数值字段。例如，填写 apple，则图表将呈现 apple 字段对应的数据值。
  • 图例显示：如需在图表中显示图例，请勾选“显示图例”；否则请保持未勾选状态。
  • 数据标签：指显示在柱形上方的具体数值。如需在柱子上直接标注数值，请勾选“显示数据标签”；否则请取消勾选。

litebi/doc/images/1769851163993-2026131171925.png

  • 分组柱状图支持：如需创建分组柱状图，请点击“数据字段”区域的“添加”按钮，并输入新的数值字段名称（例如 banana）。系统将根据所选分类字段（如 X 轴字段）对多个数据字段分别绘制柱形，实现分组展示。

litebi/doc/images/1769851282617-2026131172124.png

堆叠柱状图 ​

  • 此图要求 API 返回数据（或者数据转换后的数据）格式必须是对象数组格式，比如：
json
[
  { "month": "2023-M5", "apple": 87, "banana": 90 },
  { "month": "2023-M6", "apple": 90, "banana": 85 },
  { "month": "2023-M7", "apple": 100, "banana": 80 },
  { "month": "2023-M8", "apple": 80, "banana": 70 }
]
  • X 轴字段：请填写用于分类的字段。以上述数据为例，“月份”为分类维度，应填写 month。
  • X 轴标签显示控制：当标签过于密集时，系统将自动省略部分标签以保证可读性。如需强制显示全部标签，请勾选“显示全部 X 轴标签”；若需调整标签显示角度，可在对应选项中输入旋转角度（单位：度）。
  • 数据字段：请指定需在图表中展示的数值字段。例如，填写 apple，图表将呈现该字段对应的数据值。如需展示多个指标，可点击“添加”按钮继续输入其他字段（如 banana），系统将根据配置自动以堆叠形式进行可视化。
  • 图例显示：如需在图表中显示图例，请勾选“显示图例”；否则请保持未勾选状态。
  • 数据标签：指显示在柱形上方的具体数值。如需在柱子上直接标注数值，请勾选“显示数据标签”；否则请取消勾选。

litebi/doc/images/1769851386306-202613117238.png

折线图 ​

  • 此图要求 API 返回数据（或者数据转换后的数据）格式必须是对象数组格式，比如：
json
[
  { "month": "2023-M5", "apple": 87, "banana": 90 },
  { "month": "2023-M6", "apple": 90, "banana": 85 },
  { "month": "2023-M7", "apple": 100, "banana": 80 },
  { "month": "2023-M8", "apple": 80, "banana": 70 }
]
  • X 轴字段：请填写用于分类的字段。以上述数据为例，“月份”为分类维度，应填写 month。
  • X 轴标签显示控制：当标签过于密集时，系统将自动省略部分标签以保证可读性。如需强制显示全部标签，请勾选“显示全部 X 轴标签”；若需调整标签显示角度，可在对应选项中输入旋转角度（单位：度）。
  • 数据字段：请指定需在图表中展示的数值字段。例如，填写 apple，则图表将呈现 apple 字段对应的数据值。
  • 图例显示：如需在图表中显示图例，请勾选“显示图例”；否则请保持未勾选状态。
  • 数据标签：指显示在折线上方的具体数值。如需在折线上直接标注数值，请勾选“显示数据标签”；否则请取消勾选。
  • 圆滑折线：如需将折线显示为平滑曲线，请勾选“圆滑折线”；否则请保持未勾选状态，以呈现默认的直线连接效果。

litebi/doc/images/1769851479841-2026131172441.png

  • 分组折线图支持：如需创建分组折线图，请点击“数据字段”区域的“添加”按钮，并输入新的数值字段名称（例如 banana）。系统将根据所选分类字段（如 X 轴字段）对多个数据字段分别绘制折形，实现分组展示。

litebi/doc/images/1769851520618-2026131172522.png

堆叠折线图 ​

  • 此图要求 API 返回数据（或者数据转换后的数据）格式必须是对象数组格式，比如：
json
[
  { "month": "2023-M5", "apple": 87, "banana": 90 },
  { "month": "2023-M6", "apple": 90, "banana": 85 },
  { "month": "2023-M7", "apple": 100, "banana": 80 },
  { "month": "2023-M8", "apple": 80, "banana": 70 }
]
  • X 轴字段：请填写用于分类的字段。以上述数据为例，“月份”为分类维度，应填写 month。
  • X 轴标签显示控制：当标签过于密集时，系统将自动省略部分标签以保证可读性。如需强制显示全部标签，请勾选“显示全部 X 轴标签”；若需调整标签显示角度，可在对应选项中输入旋转角度（单位：度）。
  • 数据字段：请指定需在图表中展示的数值字段。例如，填写 apple，图表将呈现该字段对应的数据值。如需展示多个指标，可点击“添加”按钮继续输入其他字段（如 banana），系统将根据配置自动以堆叠形式进行可视化。
  • 图例显示：如需在图表中显示图例，请勾选“显示图例”；否则请保持未勾选状态。
  • 数据标签：指显示在折线上方的具体数值。如需在折线上直接标注数值，请勾选“显示数据标签”；否则请取消勾选。
  • 圆滑折线：如需将折线显示为平滑曲线，请勾选“圆滑折线”；否则请保持未勾选状态，以呈现默认的直线连接效果。

litebi/doc/images/1769851629683-2026131172711.png

面积图 ​

litebi/doc/images/1769851697954-2026131172819.png

堆叠面积图 ​

litebi/doc/images/1769851756170-2026131172918.png

柱线混合图 ​

  • 此图要求 API 返回数据（或者数据转换后的数据）格式必须是对象数组格式，比如：
json
[
  { "month": "2023-M5", "apple": 87, "banana": 90 },
  { "month": "2023-M6", "apple": 90, "banana": 85 },
  { "month": "2023-M7", "apple": 100, "banana": 80 },
  { "month": "2023-M8", "apple": 80, "banana": 70 }
]
  • X 轴字段：请指定用于分类的维度字段。以上述数据为例，“月份”为分类维度，应填写 month。
  • X 轴标签显示控制：当标签过于密集时，系统将自动隐藏部分标签以提升可读性。如需强制显示全部标签，请勾选“显示全部 X 轴标签”；若需调整标签角度，可在对应输入框中设置旋转角度（单位：度）。
  • 柱图数据字段：请指定用于绘制柱状图的数值字段。例如，填写 apple，系统将展示该字段对应的数据。如需同时展示多个指标，可点击“添加”按钮继续输入其他字段（如 banana），系统将基于所选 X 轴分类字段，为每个数据字段分别绘制柱形，实现分组柱状图效果。
  • 折线数据字段：请指定用于绘制折线图的数值字段。例如，填写 banana，系统将展示该字段对应的数据趋势。如需叠加多条折线，可点击“添加”按钮继续输入其他字段，系统将基于相同的 X 轴分类字段，为每个数据字段绘制独立的折线。
  • 图例显示：如需在图表中显示图例以标识不同数据系列，请勾选“显示图例”；否则请保持未勾选状态。
  • 数据标签：指在图表元素（如柱形顶部或折线节点）上直接显示的具体数值。如需启用该功能，请勾选“显示数据标签”；否则请取消勾选。
  • 圆滑折线：如需将折线渲染为平滑曲线，请勾选“圆滑折线”；否则系统将使用默认的直线段连接各数据点。

litebi/doc/images/1769851815778-2026131173017.png

多 Y 轴柱线图 ​

  • 此图要求 API 返回数据（或者数据转换后的数据）格式必须是对象数组格式，比如：
json
[
  { "month": "2023-M5", "apple": 87, "banana": 90 },
  { "month": "2023-M6", "apple": 90, "banana": 85 },
  { "month": "2023-M7", "apple": 100, "banana": 80 },
  { "month": "2023-M8", "apple": 80, "banana": 70 }
]
  • X 轴字段：请指定用于分类的维度字段。以上述数据为例，“月份”为分类维度，应填写 month。
  • X 轴标签显示控制：当标签过于密集时，系统将自动隐藏部分标签以提升可读性。如需强制显示全部标签，请勾选“显示全部 X 轴标签”；若需调整标签显示角度，可在对应输入框中设置旋转角度（单位：度）。
  • Y 轴配置：可为图表配置一个或多个 Y 轴。每个 Y 轴需填写名称、单位、位置（左侧或右侧），并可自定义轴线及刻度颜色。点击“添加”按钮可新增 Y 轴，支持多指标独立刻度展示。
  • 数据字段配置：请依次配置以下属性：
    • 数值字段：选择用于绘图的数据列（如 apple、banana）；
    • 图表类型：为该字段指定渲染方式（柱状图或折线图）；
    • 关联 Y 轴：选择该数据系列绑定的 Y 轴（支持多 Y 轴映射）；
    • 数据标签：勾选“显示标签”可在图表元素（柱顶或折线节点）上显示具体数值。

点击“添加”按钮可继续配置多个数据字段，实现多指标、多类型、多 Y 轴的混合可视化效果。

条形图 ​

  • 此图要求 API 返回数据（或者数据转换后的数据）格式必须是对象数组格式，比如：
json
[
  { "month": "2023-M5", "apple": 87, "banana": 90 },
  { "month": "2023-M6", "apple": 90, "banana": 85 },
  { "month": "2023-M7", "apple": 100, "banana": 80 },
  { "month": "2023-M8", "apple": 80, "banana": 70 }
]
  • Y 轴字段：请指定用于分类的维度字段。以上述数据为例，“月份”为分类维度，应填写 month。
  • 数据字段：请指定需在图表中展示的数值字段。例如，填写 apple，图表将呈现该字段对应的数据值。

litebi/doc/images/1769851884003-2026131173125.png

  • 分组条形图支持：如需创建分组条形图，请点击“数据字段”区域的“添加”按钮，并输入新的数值字段名称（例如 banana）。系统将根据所选分类字段（Y 轴字段）对多个数据字段分别绘制条形，实现分组展示。

litebi/doc/images/1769851906297-2026131173148.png

堆叠条形图 ​

  • 此图要求 API 返回数据（或者数据转换后的数据）格式必须是对象数组格式，比如：
json
[
  { "month": "2023-M5", "apple": 87, "banana": 90 },
  { "month": "2023-M6", "apple": 90, "banana": 85 },
  { "month": "2023-M7", "apple": 100, "banana": 80 },
  { "month": "2023-M8", "apple": 80, "banana": 70 }
]
  • Y 轴字段：请指定用于分类的维度字段。以上述数据为例，“月份”为分类维度，应填写 month。
  • 数据字段：请指定需在图表中展示的数值字段。例如，填写 apple，图表将呈现该字段对应的数据值。如需展示多个指标，可点击“添加”按钮继续输入其他字段（如 banana），系统将根据配置自动以堆叠形式进行可视化。

饼图 ​

  • 此图要求 API 返回数据（或者数据转换后的数据）格式必须是对象数组格式，比如：
json
[
  { "month": "2023-M5", "apple": 87, "banana": 90 },
  { "month": "2023-M6", "apple": 90, "banana": 85 },
  { "month": "2023-M7", "apple": 100, "banana": 80 },
  { "month": "2023-M8", "apple": 80, "banana": 70 }
]
  • 分类字段：请指定用于分类的维度字段。以上述数据为例，“月份”为分类维度，应填写 month。
  • 数据字段：请指定需在图表中展示的数值字段。例如，填写 apple，图表将呈现该字段对应的数据值。

litebi/doc/images/1769852039177-202613117341.png

环形图 ​

配置同饼图

litebi/doc/images/1769852083386-2026131173445.png

半环形图 ​

配置同饼图

litebi/doc/images/1769852108058-2026131173510.png

南丁格尔玫瑰图 ​

配置同饼图

litebi/doc/images/1769852155242-2026131173557.png

表格 ​

  • 此图要求 API 返回数据（或者数据转换后的数据）格式必须是对象数组格式，比如：
json
[
  { "month": "2023-M5", "apple": 87, "banana": 90 },
  { "month": "2023-M6", "apple": 90, "banana": 85 },
  { "month": "2023-M7", "apple": 100, "banana": 80 },
  { "month": "2023-M8", "apple": 80, "banana": 70 }
]
  • 表头定义：点击“添加列”可配置表格字段。每列需填写对应的数据字段名和显示标题，并可选开启以下功能：
    • 溢出隐藏：勾选后，单元格内容超出宽度时将自动隐藏并显示省略号；
    • 排序：勾选后，该列支持用户点击表头进行升序或降序排序。 此外，您可通过鼠标按住某一行并上下拖动，自由调整列在表格中的显示顺序。

litebi/doc/images/1769852214282-2026131173656.png

水球图 ​

数字 ​

  • 此图要求 API 返回数据（或者数据转换后的数据）格式必须是一个数字，比如199.99
  • 单位：可自定义数值后缀单位（如“元”、“%”、“件”等），用于辅助展示业务含义。
  • 小数位数：可指定数值保留的小数位数，系统将自动进行四舍五入处理。
  • 千分位分隔：勾选后，数值将按千分位格式显示（例如 1,234,567.89），提升大数可读性。
  • 隐私数据保护：如启用此选项，数字将默认模糊展示，以保障数据安全，可以点击图形显示数字。

litebi/doc/images/1769852422001-2026131174023.png

litebi/doc/images/1769852443915-2026131174045.png

雷达图 ​

  • 此图要求 API 返回数据（或者数据转换后的数据）格式必须是对象数组格式，比如：
json
[
  {
    "website": "baidu",
    "search_tech": 8,
    "market_share": 7,
    "product_ecosystem": 7,
    "ai_capability": 8,
    "privacy_protection": 6,
    "internationalization": 3
  },
  {
    "website": "google",
    "search_tech": 9,
    "market_share": 9,
    "product_ecosystem": 9,
    "ai_capability": 9,
    "privacy_protection": 8,
    "internationalization": 9
  }
]
  • 指标轴：可添加一个或多个字段作为雷达图的维度轴。每个字段可单独设置其对应的最大值，用于归一化该维度的数据范围。
  • 分组字段：指定用于区分不同数据系列的分类字段。每个分组将生成一条独立的雷达轮廓，便于多组数据对比分析。
  • 形状样式：支持选择雷达图的外观形状，可选“圆形”或“多边形”（即正多边形，边数由指标轴数量决定）。

仪表盘 ​

  • 此图要求 API 返回数据（或者数据转换后的数据）格式必须是一个数字，比如199.99

  • 最小值：设置仪表盘量程的起始数值，作为指标显示范围的下限。

  • 最大值：设置仪表盘量程的终止数值，作为指标显示范围的上限。

  • 指标名称：自定义仪表盘所展示指标的名称，用于在图表中清晰标识度量含义。

litebi/doc/images/1769852514106-2026131174156.png

仪表板 ​

  • 仪表板由图表和控件组成，可以添加已经创建好的图表到仪表板，如果需要条件筛选，可以添加控件到仪表板中。

图表操作 ​

  • 点击图标上的添加按钮，图表会被添加到画布上，点击鼠标左键可以将图表拖动到画布的合适位置
  • 点击图表右下角的尺寸控制按钮并拖动，可以调整图表的大小
  • 点击图表的删除按钮可以将图表从画布中删除

控件 ​

  • 当图表数据需要切换参数，就会使用到控件
  • 控件有下拉框、单选框、多选框、日期选择、时间选择、文本框、数字输入框等类型，根据需要选择合适的控件
  • 点击控件上的添加按钮，控件会被添加到画布上，点击鼠标左键可以将控件拖动到画布的合适位置
  • 点击控件右下角的尺寸控制按钮并拖动，可以调整控件的大小
  • 点击控件的删除按钮可以将控件从画布中删除
  • 点击编辑按钮，可以打开控件的编辑界面，可以设置控件的属性

输入框 ​

  • 可以进行文本输入
  • 标签，填写输入框的标签，用来说明输入框输入的内容
  • 绑定变量名，填写字母和数字组成的字符串，输入库输入的数据会被绑定到这个变量中，可以通过${变量名}取出输入框的数据
  • 尺寸，选择合适的尺寸

下拉选择框 ​

  • 可以进行下拉选择
  • 标签，填写，用来说明下拉选择框的内容
  • 绑定变量名，填写字母和数字组成的字符串，输入库输入的数据会被绑定到这个变量中，可以通过${变量名}取出输入框的数据

单选框 ​

多选框 ​

日期选择器 ​

时间选择器 ​

日期时间选择器 ​

开关 ​

查询按钮 ​

系统变量 ​

  • 系统变量是系统中的全局变量，在 API 的传参中可以引用系统变量作为参数。
  • 例如，当 API 接口鉴权需要携带 token，且多个 API 均需使用相同 token 时，可创建一个系统变量 _token，供多个图表中的 API 共享使用。
  • 系统变量值的引用采用 ${变量名} 格式，例如 ${_token}。

litebi/doc/images/1769866890249-2026131214132.png

WARNING

系统变量的命名必须以下划线 _ 开头，不得使用其他字符开头，例如 _token。

系统变量类型 ​

系统变量类型包括三种：常量值、API 和 JavaScript。

常量值类型 ​

  • 该类型用于设置固定的常量值作为系统变量。用户可直接在页面中填写所需的常量值。

litebi/doc/images/1769866021945-202613121274.png

API 类型 ​

  • 通过 API 访问获取变量的动态值。需要填写 API 的 URL、请求参数、请求方法等信息。若 API 返回结果不符合预期变量格式，可填写数据转换表达式，转换后的结果即为变量的值。API 配置方法请参考本文档 API 配置 部分。

litebi/doc/images/1769866153935-2026131212915.png

  • API 类型的变量值支持多种更新策略：

定时更新策略 ​

设置固定频率，后台将定时访问 API 获取值，并更新变量值。

过期更新策略 ​

TIP

此策略要求 API 返回的数据为 JSON 格式，并且包含过期时间字段（其值必须为时间戳毫秒格式）

  • 在页面上设置过期时间提取表达式，使用 JSONPath 语法。每次访问 API 后，系统将根据数据转换表达式提取数据作为变量值存储，并根据过期时间提取表达式来提取过期时间进行保存。后续使用此变量时，系统会首先检查变量的过期时间，判断是否已过期。如已过期，则重新访问 API 获取值（并保存新的值和过期时间）；否则直接使用已保存的值。

litebi/doc/images/1769866452653-2026131213414.png

即时更新策略 ​

每次使用变量时都将访问 API 获取最新值。

litebi/doc/images/1769866610391-2026131213652.png

不更新策略 ​

创建变量时访问 API 获取值并保存，后续使用此变量时直接使用已保存的值。

litebi/doc/images/1769866657855-2026131213739.png

JavaScript 类型 ​

  • 用户需填写 JavaScript 脚本，脚本执行后返回的值将作为变量的值。

litebi/doc/images/1769866751615-2026131213913.png