图表设计器

业务用途

图表设计器用于配置数据可视化图表。运营人员选择关联的数据表，配置图表类型（折线图、柱状图、饼图、表格、雷达图等）和维度/指标字段，保存后可在运行时页面中展示。图表数据通过 POST /api/chart/data/{id} 端点动态查询关联表数据，最终也走 SchemaService.queryDataList() 引擎。

涉及文件

层	文件路径	说明
Controller	`backend/src/main/java/com/lowcode/controller/ChartController.java`	`/api/chart` 端点
Entity	`backend/src/main/java/com/lowcode/entity/ChartEntity.java`	图表实体（`@TableName("lc_chart")`）
Service	`backend/src/main/java/com/lowcode/service/ChartService.java`	图表配置 CRUD
Service	`backend/src/main/java/com/lowcode/service/SchemaService.java`	数据查询（复用动态数据引擎）
前端	`frontend/src/views/designer/chart/index.vue`	图表设计器主界面
前端	`frontend/src/views/runtime/components/RuntimeChart.vue`	运行时图表渲染

数据库表

lc_chart（图表表）

CREATE TABLE `lc_chart` (
    `id` BIGINT NOT NULL AUTO_INCREMENT COMMENT '主键',
    `tenant_id` BIGINT DEFAULT 1 COMMENT '租户编号',
    `chart_name` VARCHAR(100) NOT NULL COMMENT '图表名称',
    `chart_code` VARCHAR(50) NOT NULL COMMENT '图表编码',
    `chart_type` VARCHAR(50) NOT NULL COMMENT '图表类型(line/bar/pie/table/radar)',
    `table_id` BIGINT COMMENT '关联表ID',
    `chart_json` LONGTEXT COMMENT '图表JSON配置',
    `status` VARCHAR(20) DEFAULT 'draft' COMMENT '状态',
    `create_time` TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
    `update_time` TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT '更新时间',
    `create_by` VARCHAR(50) COMMENT '创建者',
    `update_by` VARCHAR(50) COMMENT '更新者',
    `deleted` TINYINT DEFAULT 0 COMMENT '是否删除',
    PRIMARY KEY (`id`),
    UNIQUE KEY `uk_chart_code` (`chart_code`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='图表表';

ChartEntity 实体字段

@TableName("lc_chart")
public class ChartEntity extends BaseEntity {
    private String chartName;   // 图表名称
    private String chartCode;   // 图表编码（唯一）
    private String chartType;   // 图表类型: line / bar / pie / table / radar
    private Long tableId;       // 关联数据表ID
    private String chartJson;   // 图表配置JSON
    private String status;      // 状态: draft / published
    private Long tenantId;      // 租户ID
}

后端实现

端点列表（ChartController -- `/api/chart`）

方法	路径	说明
GET	`/api/chart/list`	获取图表配置列表
GET	`/api/chart/{id}`	获取图表配置详情
POST	`/api/chart/save`	保存图表配置
PUT	`/api/chart/{id}`	更新图表配置
DELETE	`/api/chart/{id}`	删除图表配置
POST	`/api/chart/data/{id}`	获取图表数据（动态查询关联表）

获取图表数据 -- `getChartData()`

这是图表的核心端点，根据图表配置关联的 tableId 查询数据：

@PostMapping("/data/{id}")
public Result<Map<String, Object>> getChartData(@PathVariable Long id,
        @RequestBody(required = false) Map<String, Object> queryParams) {
    ChartEntity chart = chartService.getById(id);
    if (chart == null) return Result.error("图表配置不存在");
    if (chart.getTableId() == null) return Result.error("图表未关联数据表");

    Integer pageNum = 1;
    Integer pageSize = 1000; // 图表默认取 1000 条
    if (queryParams != null) {
        if (queryParams.containsKey("pageNum"))
            pageNum = Integer.parseInt(queryParams.get("pageNum").toString());
        if (queryParams.containsKey("pageSize"))
            pageSize = Integer.parseInt(queryParams.get("pageSize").toString());
    }

    // 复用 SchemaService 的动态查询引擎
    Map<String, Object> data = schemaService.queryDataList(
        chart.getTableId(), queryParams, pageNum, pageSize);

    Map<String, Object> result = new HashMap<>();
    result.put("chartConfig", chart.getChartJson());
    result.put("chartType", chart.getChartType());
    result.put("data", data);
    return Result.success(result);
}

数据查询复用

图表数据查询最终走 SchemaService.queryDataList()，与列表查询、报表查询使用同一个动态数据引擎。这意味着图表数据同样享受租户隔离（tenant_id 过滤）、软删除过滤（deleted=0）、动态条件查询等能力。

前端实现

图表设计器界面

frontend/src/views/designer/chart/index.vue 提供：

图表基本信息配置（名称、编码、类型）
关联数据表选择（tableId）
维度字段和指标字段配置
图表样式配置（颜色、图例、标题等）

保存图表配置

// chart/index.vue 第 161 行
await request.post('/chart/save', {
  id: chartId.value,
  chartName: chartName.value,
  chartCode: chartCode.value,
  chartType: chartType.value,
  tableId: selectedTableId.value,
  chartJson: JSON.stringify(chartConfig),
  status: 'draft'
})

运行时渲染

RuntimeChart.vue 在运行时加载图表数据并渲染：

// RuntimeChart.vue 加载图表数据
const res = await request.post(`/chart/data/${props.config.chartId}`, queryParams)
const { chartConfig, chartType, data } = res.data
// 使用 ECharts 渲染图表

操作步骤

进入「设计器 -> 图表设计」页面，点击「新建图表」
填写图表名称、编码，选择图表类型（line/bar/pie/table/radar）
选择关联数据表（tableId）
配置维度字段（X 轴/分类）和指标字段（Y 轴/数值）
配置图表样式（颜色、图例位置等）
点击「保存」
在页面设计器中添加 chart 类型组件，关联此图表的 ID

常见问题

图表不显示数据

检查图表配置的 tableId 是否正确关联了数据表。getChartData() 在 tableId 为 null 时返回错误。同时检查关联表中是否有数据。

图表数据量太大

图表默认 pageSize = 1000，如果数据量超过 1000 条，图表只显示前 1000 条。如需更多数据，可在请求参数中传 pageSize 调大（但注意性能影响）。