全栈攻城狮

Appearance

报表与数据可视化 ​

1. 报表系统架构 ​

1.1 报表元数据设计 ​

报表系统的核心在于元数据驱动，通过定义报表模板、数据源、图表配置等元数据，实现报表的灵活配置与动态渲染。

报表模板 (report_template) ​

报表模板定义了报表的结构化描述，包含布局信息、关联的数据源和图表配置列表。

java
public class ReportTemplate {
    private String templateId;              // 模板ID
    private String templateName;            // 模板名称
    private String category;                // 报表分类（运营/财务/业务）
    private Integer layoutType;             // 布局类型：1-自由布局 2-网格布局 3-瀑布流
    private String layoutConfig;            // 布局配置 JSON
    private List<ChartConfig> charts;       // 图表配置列表
    private List<ReportParam> params;       // 报表参数定义
    private Boolean enableDrill;            // 是否启用钻取
    private Boolean enableSchedule;         // 是否启用定时调度
    private String scheduleCron;            // 定时调度 Cron 表达式
    private Integer status;                 // 状态：0-草稿 1-已发布 2-已下线
}

报表实例 (report_instance) ​

报表实例是报表模板的一次执行快照，记录了运行时参数、执行结果和缓存数据。

java
public class ReportInstance {
    private String instanceId;              // 实例ID
    private String templateId;              // 关联模板ID
    private String instanceName;            // 实例名称（含时间维度）
    private Map<String, Object> params;     // 运行时参数
    private String paramSnapshot;           // 参数快照 JSON
    private Date executeTime;               // 执行时间
    private Long executeDuration;           // 执行耗时（毫秒）
    private String status;                  // 状态：RUNNING/SUCCESS/FAILED
    private String resultData;              // 结果数据 JSON（或指向外部存储的URL）
    private String exportFormat;            // 导出格式：EXCEL/PDF/IMAGE
    private String exportUrl;               // 导出文件存储路径
}

数据源 (datasource) ​

数据源定义了报表数据的来源和连接方式，支持多种数据源类型。

java
public class Datasource {
    private String datasourceId;            // 数据源ID
    private String datasourceName;          // 数据源名称
    private Integer dsType;                 // 类型：1-MySQL 2-ClickHouse 3-Elasticsearch 4-API 5-CSV
    private String connectionConfig;        // 连接配置 JSON
    private String sqlTemplate;             // SQL 模板
    private List<DatasourceParam> params;   // 数据源参数列表
    private Integer timeoutSec;             // 查询超时时间
    private Boolean enableCache;            // 是否启用缓存
    private Integer cacheTtlSec;            // 缓存过期时间
}

图表配置 (chart_config) ​

图表配置描述了单个图表的展现方式、数据映射和交互行为。

java
public class ChartConfig {
    private String chartId;                 // 图表ID
    private String chartTitle;              // 图表标题
    private String chartType;               // 图表类型：line/bar/pie/scatter/heatmap/radar/funnel/map
    private String datasourceId;            // 关联数据源ID
    private String dataMapping;             // 数据字段映射 JSON
    private String chartOption;             // ECharts 配置项 JSON
    private Position position;              // 图表位置和尺寸
    private DrillConfig drillConfig;        // 钻取配置
    private LinkageConfig linkageConfig;    // 联动配置
}

// 位置信息
public class Position {
    private Integer x;                      // 横坐标（百分比或像素）
    private Integer y;                      // 纵坐标
    private Integer width;                  // 宽度
    private Integer height;                 // 高度
}

1.2 报表引擎设计 ​

报表引擎是报表系统的核心执行层，负责解析报表元数据、执行数据查询、组装结果并渲染输出。

多数据源支持 ​

报表引擎通过数据源适配器模式支持多种数据源类型，每个数据源适配器负责连接管理、方言转换和查询执行。

┌─────────────────────────────────────────────────────┐
│                    Report Engine                      │
├─────────────────────────────────────────────────────┤
│  Metadata Parser  →  Param Injector  →  SQL Builder  │
│                               │                      │
│                     DataSource Adapter Layer          │
│         ┌──────┬──────┬──────┼──────┬──────┐         │
│        MySQL  CK    ES    API   CSV   ...            │
│                               │                      │
│                   Result Aggregator                  │
│                               │                      │
│              ┌────────────────┴────────────┐         │
│          Chart Renderer            Export Service    │
│         (ECharts SSR/前端)    (Excel/PDF/Image)      │
└─────────────────────────────────────────────────────┘

参数注入机制 ​

报表参数支持多种来源和注入方式：

  • 手动参数：用户在报表查询页面选择的时间范围、筛选条件等
  • 上下文参数：当前登录用户、角色、部门等上下文信息自动注入
  • 动态参数：通过 SQL 查询动态生成的枚举值或级联参数
  • 默认参数：报表模板中预定义的默认值，如"近 30 天"

参数注入流程如下：

java
public class ParamInjector {
    public Map<String, Object> inject(ReportTemplate template, Map<String, Object> userParams) {
        Map<String, Object> resolved = new HashMap<>();
        // 1. 注入默认参数
        for (ReportParam param : template.getParams()) {
            resolved.put(param.getParamKey(), param.getDefaultValue());
        }
        // 2. 覆盖用户手动参数
        if (userParams != null) {
            resolved.putAll(userParams);
        }
        // 3. 注入上下文参数
        resolved.put("_current_user", SecurityContextHolder.getUserId());
        resolved.put("_current_dept", SecurityContextHolder.getDeptId());
        resolved.put("_current_time", LocalDateTime.now());
        // 4. 解析动态参数（执行SQL获取枚举值）
        for (ReportParam param : template.getParams()) {
            if (param.getDynamicSql() != null) {
                resolved.put(param.getParamKey(), executeDynamicSql(param.getDynamicSql()));
            }
        }
        return resolved;
    }
}

SQL 生成策略 ​

报表引擎根据数据源类型和参数动态生成查询 SQL，核心流程包括：

  1. SQL 模板解析：从数据源配置中读取 SQL 模板，识别模板变量占位符
  2. 参数替换：将 ${paramName} 格式的占位符替换为实际参数值，并对字符串参数加引号、对数值参数直接替换
  3. 动态条件拼接：根据参数是否有值动态添加 WHERE 条件，支持 IN/NOT IN/LIKE/BETWEEN 等操作符
  4. 分页与排序：根据不同数据库方言生成对应的分页语句
  5. SQL 安全审计：拦截危险操作（DROP/TRUNCATE/DELETE 无 WHERE），限制查询超时和返回行数
sql
-- SQL 模板示例
SELECT
    DATE(create_time) AS report_date,
    COUNT(DISTINCT order_id) AS order_count,
    SUM(pay_amount) AS total_amount
FROM order_main
WHERE 1=1
  /*% if startDate != null */
  AND create_time >= '${startDate}'
  /*% end */
  /*% if endDate != null */
  AND create_time < '${endDate}'
  /*% end */
  /*% if merchantId != null */
  AND merchant_id IN (${merchantId})
  /*% end */
GROUP BY DATE(create_time)
ORDER BY report_date ASC

1.3 Excel/PDF 导出 ​

报表导出是报表系统的重要能力，需要支持大数据量分页导出、复杂样式渲染和多种输出格式。

Excel 导出（EasyExcel / POI） ​

使用阿里巴巴 EasyExcel 作为主力导出工具，相比原生 POI 具有更低的内存占用和更简洁的 API。

特性EasyExcelApache POI
内存模型逐行写入（SAX 模式）全量加载（DOM 模式）
大文件支持支持百万元级数据内存溢出风险
API 简洁度注解驱动，简单较为繁琐
样式支持基本样式丰富样式
模板导出支持填充模板需代码构建
java
// EasyExcel 导出示例
public void exportExcel(ReportInstance instance, HttpServletResponse response) {
    // 1. 查询数据
    List<ReportRow> dataList = queryService.queryData(instance);
    // 2. 设置响应头
    response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
    response.setHeader("Content-Disposition",
        "attachment;filename=" + URLEncoder.encode(instance.getInstanceName() + ".xlsx", "UTF-8"));
    // 3. 写入 Excel（支持大数据量分页写入）
    EasyExcel.write(response.getOutputStream(), ReportRow.class)
        .sheet("报表数据")
        .registerWriteHandler(new LongestMatchColumnWidthStyleStrategy())
        .registerWriteHandler(new CustomCellStyleHandler())
        .doWrite(dataList);
}

// 复杂报表：多 Sheet / 合并单元格 / 模板填充
public void exportComplexExcel() {
    // 使用模板填充
    InputStream templateStream = getClass().getResourceAsStream("/templates/report_template.xlsx");
    ExcelWriter excelWriter = EasyExcel.write(templateStream).build();
    WriteSheet sheet1 = EasyExcel.writerSheet(0, "汇总").build();
    WriteSheet sheet2 = EasyExcel.writerSheet(1, "明细").build();
    excelWriter.fill(summaryData, sheet1);
    excelWriter.fill(detailData, sheet2);
    excelWriter.finish();
}

PDF 导出（iText / Apache PDFBox） ​

PDF 导出适用于正式报告的打印和分发，使用 iText 库实现。

java
// iText 导出 PDF 示例
public void exportPdf(ReportInstance instance, OutputStream outputStream) {
    Document document = new Document(PageSize.A4);
    PdfWriter writer = PdfWriter.getInstance(document, outputStream);
    document.open();
    // 1. 标题
    Paragraph title = new Paragraph(instance.getInstanceName(),
        new Font(Font.FontFamily.HELVETICA, 18, Font.BOLD));
    title.setAlignment(Element.ALIGN_CENTER);
    document.add(title);
    // 2. 参数信息
    document.add(new Paragraph("报表参数: " + instance.getParamSnapshot()));
    document.add(new Paragraph("生成时间: " + new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date())));
    // 3. 图表图片（服务端渲染的图表截图）
    if (instance.getChartImages() != null) {
        for (String imagePath : instance.getChartImages()) {
            Image chartImage = Image.getInstance(imagePath);
            chartImage.setAlignment(Element.ALIGN_CENTER);
            chartImage.scaleToFit(500, 300);
            document.add(chartImage);
        }
    }
    // 4. 数据表格
    PdfPTable table = new PdfPTable(columnCount);
    // ... 填充单元格
    document.add(table);
    document.close();
}

数据导出时需注意以下事项：

  • 大数据量分页：超过 10 万行的导出请求改为异步任务，通过消息队列处理
  • 列宽自适应：根据内容长度自动调整列宽，避免内容被截断
  • 字符编码：导出文件名使用 URLEncoder 编码，避免中文乱码
  • 安全管控：导出的 Excel/PDF 文件增加水印（用户 ID + 时间），防止数据泄露
  • 下载链接过期：异步导出的文件设置过期时间，定期清理临时文件

2. 数据可视化图表类型 ​

2.1 折线图（趋势分析） ​

折线图用于展示数据随时间或其他连续维度的变化趋势。

适用场景：

  • 时间序列数据：日活用户(DAU)、月活跃用户(MAU)趋势
  • 销售趋势：每日/每周/每月的销售额变化
  • 系统监控：CPU 使用率、内存占用、请求量随时间的变化
  • 同比增长：本期 vs 上期 vs 去年同期的对比趋势
json
// ECharts 折线图配置示例
{
  "xAxis": { "type": "category", "data": ["1月","2月","3月","4月","5月","6月"] },
  "yAxis": { "type": "value" },
  "series": [
    {
      "type": "line",
      "data": [120, 200, 150, 80, 170, 130],
      "smooth": true,
      "areaStyle": { "opacity": 0.15 }
    }
  ]
}

设计要点： 单条折线建议展示 6-12 个数据点，多条折线不超过 5 条；使用平滑曲线(smooth)提升视觉体验；面积图可增强趋势的直观性。

2.2 柱状图（对比分析） ​

柱状图用于展示不同类别之间的数据对比，是数据可视化中最常用的图表类型。

适用场景：

  • 分类对比：各部门销售额对比、各渠道用户数对比
  • 排名展示：Top 10 商品销量排行、各区域订单量
  • 分布分析：各年龄段用户分布、各价格区间订单分布
  • 分组对比：不同年份同月份数据对比（分组柱状图）
json
// ECharts 柱状图配置示例
{
  "xAxis": { "type": "category", "data": ["电子","服装","食品","家居","美妆"] },
  "yAxis": { "type": "value" },
  "series": [
    { "name": "本期", "type": "bar", "data": [320, 240, 180, 150, 210] },
    { "name": "上期", "type": "bar", "data": [280, 220, 190, 130, 180] }
  ]
}

设计要点： 分组柱状图每组不超过 4 个系列；堆叠柱状图适合展示部分与整体的关系；数据从大到小排序便于阅读；横向柱状图适合展示较长分类名。

2.3 饼图（占比分析） ​

饼图用于展示各部分占整体的比例关系，直观体现数据的构成。

适用场景：

  • 占比分析：各品类销售占比、各渠道流量占比
  • 构成分析：用户画像（性别/年龄/地域构成）、成本构成
  • 预算分配：各部门预算占比、项目资金分配
json
// ECharts 饼图配置示例
{
  "series": [{
    "type": "pie",
    "data": [
      { "name": "电子", "value": 35 },
      { "name": "服装", "value": 25 },
      { "name": "食品", "value": 18 },
      { "name": "家居", "value": 12 },
      { "name": "其他", "value": 10 }
    ],
    "roseType": "radius",
    "label": { "formatter": "{b}: {d}%" }
  }]
}

设计要点： 扇区不超过 7 个，超过则合并为"其他"；按数值从大到小顺时针排列；使用南丁格尔玫瑰图增强对比；必要时标注百分比值。

2.4 散点图（相关性分析） ​

散点图用于展示两个变量之间的相关关系和分布模式。

适用场景：

  • 相关性分析：广告投入 vs 销售额、客单价 vs 购买频次
  • 异常检测：交易金额 vs 交易频率（发现异常交易）
  • 聚类分析：用户价值矩阵（RFM 模型可视化）
  • 分布规律：订单金额 vs 配送距离
json
// ECharts 散点图配置示例
{
  "xAxis": { "type": "value", "name": "广告投入(万)" },
  "yAxis": { "type": "value", "name": "销售额(万)" },
  "series": [{
    "type": "scatter",
    "data": [[10, 85], [15, 120], [20, 140], [25, 180], [30, 200]],
    "symbolSize": 12
  }]
}

设计要点： 数据量大时使用透明度(opacity)避免重叠；结合回归线展示相关趋势；气泡图可引入第三个维度（气泡大小）。

2.5 热力图 ​

热力图通过颜色的深浅表示数据密度或数值大小，适合展示二维矩阵数据的分布情况。

适用场景：

  • 时间分布：一周内各时段访问量热图（横轴=星期，纵轴=小时）
  • 地理位置：用户点击位置热力图、门店客流热力图
  • 相关性矩阵：特征之间的相关系数热力图
  • 日历热图：一年中每天的指标变化
json
// ECharts 热力图配置示例（一周各时段访问量）
{
  "xAxis": { "type": "category", "data": ["周一","周二","周三","周四","周五","周六","周日"] },
  "yAxis": { "type": "category", "data": ["0-6时","6-9时","9-12时","12-14时","14-18时","18-21时","21-24时"] },
  "visualMap": { "min": 0, "max": 100, "inRange": { "color": ["#f0f0f0","#ffd700","#ff6347"] } },
  "series": [{
    "type": "heatmap",
    "data": [
      [0,0,12],[1,0,8],[2,0,5],[3,0,10],[4,0,6],[5,0,15],[6,0,20],
      [0,1,45],[1,1,38],[2,1,42],[3,1,50],[4,1,35],[5,1,30],[6,1,25]
    ]
  }]
}

2.6 雷达图 ​

雷达图用于展示多维数据的综合对比，适合对多个实体进行多维度评估。

适用场景：

  • 综合评价：商品综合评分（质量/价格/服务/物流/售后）
  • 能力评估：员工能力模型（技术/沟通/管理/创新/协作）
  • 对比分析：多款产品的多维度对比
  • 用户画像：多维度用户特征分析
json
// ECharts 雷达图配置示例
{
  "radar": {
    "indicator": [
      { "name": "质量", "max": 100 },
      { "name": "价格", "max": 100 },
      { "name": "服务", "max": 100 },
      { "name": "物流", "max": 100 },
      { "name": "售后", "max": 100 }
    ]
  },
  "series": [{
    "type": "radar",
    "data": [
      { "name": "商品A", "value": [90, 70, 80, 85, 75] },
      { "name": "商品B", "value": [70, 90, 65, 75, 80] }
    ]
  }]
}

设计要点： 维度不宜超过 8 个；合理设置最大值（max）；使用不同颜色区分系列；填充半透明区域增强可读性。

2.7 漏斗图 ​

漏斗图用于展示业务流程中各个阶段的转化率，直观体现流失情况。

适用场景：

  • 转化分析：用户行为转化（访问→注册→下单→支付→复购）
  • 销售漏斗：潜在客户→意向客户→报价→签约→成交
  • 流程优化：各环节成功率分析，定位流失严重的环节
json
// ECharts 漏斗图配置示例
{
  "series": [{
    "type": "funnel",
    "data": [
      { "name": "访问", "value": 10000 },
      { "name": "注册", "value": 6000 },
      { "name": "下单", "value": 3000 },
      { "name": "支付", "value": 2000 },
      { "name": "复购", "value": 800 }
    ],
    "sort": "descending",
    "label": { "formatter": "{b}: {c} ({d}%)" }
  }]
}

设计要点： 展示各环节的绝对值和转化率；按数值由上至下递减排列；重点关注流失率高的环节，用不同颜色标注。

2.8 地图（区域分布） ​

地图图表用于展示地理维度上的数据分布情况。

常用子类型：

  • 热力地图：用颜色深浅表示各区域的指标值
  • 散点地图：在地图上标记具体点位，展示分布密度
  • 迁徙地图：展示两点之间的流量或路径
  • 区域地图：展示各省/市之间的数据对比
json
// ECharts 地图配置示例（数据格式）
{
  "visualMap": { "min": 0, "max": 1000 },
  "series": [{
    "type": "map",
    "map": "china",
    "data": [
      { "name": "广东省", "value": 950 },
      { "name": "浙江省", "value": 820 },
      { "name": "江苏省", "value": 780 }
    ],
    "label": { "show": true },
    "selectedMode": "multiple"
  }]
}

设计要点： 地图 JSON 数据需提前加载；使用 visualMap 组件定义颜色梯度；支持区域多选和数据钻取；移动端需加载省/市级别的地图精简数据。

3. 报表设计器 ​

3.1 拖拽式报表设计 ​

报表设计器是面向业务人员的可视化报表构建工具，采用拖拽式交互降低使用门槛。

核心功能模块：

  • 画布（Canvas）：自由布局的画布区域，支持网格吸附、对齐线、缩放和平移，提供移动端/PC 端预览切换
  • 组件面板（Widget Panel）：左侧组件列表，包含图表组件、过滤组件、文本组件、图片组件和容器组件
  • 配置面板（Config Panel）：右侧属性配置区，选中组件后展示对应配置项（数据、样式、交互）
  • 数据绑定面板：从数据源选择字段，拖拽到图表维度和度量区域
  • 图层管理：管理各图层的层级关系、显隐和锁定状态

布局引擎设计：

java
public class LayoutEngine {
    // 网格布局：将画布划分为 24 列网格，图表宽度按列数分配
    public GridLayout gridLayout(List<ChartConfig> charts) {
        GridLayout layout = new GridLayout(24);
        for (ChartConfig chart : charts) {
            GridItem item = new GridItem();
            item.setCol(col);       // 起始列
            item.setRow(row);       // 起始行
            item.setColSpan(cols);  // 跨列数（1-24）
            item.setRowSpan(rows);  // 跨行数
            layout.addItem(item);
        }
        return layout;
    }

    // 自由布局：绝对定位，支持重叠和分组
    public FreeLayout freeLayout(List<ChartConfig> charts) {
        FreeLayout layout = new FreeLayout();
        for (ChartConfig chart : charts) {
            FreeItem item = new FreeItem();
            item.setX(chart.getPosition().getX());
            item.setY(chart.getPosition().getY());
            item.setWidth(chart.getPosition().getWidth());
            item.setHeight(chart.getPosition().getHeight());
            layout.addItem(item);
        }
        return layout;
    }
}

3.2 图表组件库 ​

图表组件库预设了常用图表类型的配置模板和样式主题，用户可直接拖拽使用。

组件库结构：

组件分类包含图表预置配置
趋势类折线图、面积图、阶梯图时间轴、平滑曲线、阈值线
对比类柱状图、条形图、分组柱图、堆叠柱图横向/纵向、数据标签、颜色映射
占比类饼图、环形图、玫瑰图、仪表盘南丁格尔玫瑰、半圆、多级环形
分布类散点图、气泡图、热力图、箱线图回归线、尺寸映射、颜色梯度
多维类雷达图、平行坐标、桑基图维度配置、流量着色
流程类漏斗图、水球图、进度图转化率标注、渐变填充
地理类区域地图、散点地图、迁徙地图GeoJSON 加载、视觉映射、飞行轨迹
表格类交叉表、明细表、树形表固定列、排序、汇总行、条件格式

3.3 数据源绑定 ​

图表的数据绑定采用"拖拽字段"的可视化方式，用户将数据字段从数据源面板拖到维度和度量区域。

数据绑定模型：

┌──────────────────────────────────────────────────────┐
│  数据源面板                   图表配置区域              │
│ ┌─────────────┐          ┌────────────────────┐      │
│ │ 字段列表     │          │ 维度 (Dimensions)   │      │
│ │  日期        │  拖拽→   │  [日期] [品类]     │      │
│ │  品类        │          │                    │      │
│ │  销售额      │          │ 度量 (Measures)    │      │
│ │  订单量      │  拖拽→   │  [销售额] [订单量] │      │
│ │  利润        │          │                    │      │
│ └─────────────┘          │ 筛选器 (Filters)   │      │
│                          │  [地区 = 华东]      │      │
│                          └────────────────────┘      │
└──────────────────────────────────────────────────────┘

数据映射规则示例：

json
{
  "dataMapping": {
    "dimensions": [
      { "field": "create_date", "alias": "日期", "type": "date", "dateFormat": "yyyy-MM-dd" }
    ],
    "measures": [
      { "field": "total_amount", "alias": "销售额", "type": "number", "aggregation": "SUM" },
      { "field": "order_count", "alias": "订单量", "type": "number", "aggregation": "COUNT_DISTINCT" }
    ],
    "filters": [
      { "field": "region", "operator": "IN", "values": ["华东", "华南"] }
    ],
    "sort": { "field": "total_amount", "order": "DESC" },
    "limit": 100
  }
}

支持聚合函数包括 SUM、AVG、COUNT、COUNT_DISTINCT、MAX、MIN，支持表达式计算（如利润率 = 利润 / 销售额）。

3.4 钻取 / 联动 / 下钻 ​

交互分析能力是报表设计器的高级特性，支持用户从宏观到微观逐层探索数据。

钻取 (Drill) ​

钻取指用户在图表上点击某个数据点，展示更细粒度的数据详情。

  • 上钻：从细粒度汇总到粗粒度（如：日 → 月 → 季度 → 年）
  • 下钻：从粗粒度展开到细粒度（如：省份 → 城市 → 区县）
  • 穿透：点击数据点跳转到明细数据页面或外部链接
java
public class DrillConfig {
    private Boolean enableDrill;                // 是否启用钻取
    private List<DrillLevel> levels;            // 钻取层级定义
    private String drillType;                   // 钻取类型：DIMENSION_DRILL / LINKAGE_DRILL / URL_DRILL
    private String targetChartId;               // 目标图表ID（联动钻取）
    private String targetUrl;                   // 目标URL（穿透跳转）
    private Map<String, String> paramMapping;   // 参数映射
}

public class DrillLevel {
    private String levelName;                   // 层级名称
    private String dimensionField;              // 维度字段
    private String granularity;                 // 粒度：day/month/quarter/year
    private String sqlTemplate;                 // SQL 模板
}

联动 (Linkage) ​

联动指多个图表之间建立关联，操作一个图表时其他图表同步更新。

  • 主动联动：点击源图表的数据项，过滤条件同步到目标图表
  • 被动联动：目标图表接收联动参数后自动刷新数据
  • 环形联动：A 联动 B，B 联动 C，C 联动 A
java
public class LinkageConfig {
    private String sourceChartId;               // 源图表ID
    private String targetChartId;               // 目标图表ID
    private String linkageField;                // 联动字段
    private String linkageType;                 // FILTER / HIGHLIGHT / DIMENSION_SWITCH
}

下钻 (Drill Down) ​

下钻允许用户通过点击图表逐层查看更详细的数据，常在以下场景使用：

  • 地图下钻：全国 → 省份 → 城市 → 区县
  • 树形下钻：一级类目 → 二级类目 → 三级类目 → SKU
  • 时间下钻：年 → 季度 → 月 → 周 → 日 → 小时

3.5 定时报表调度 ​

定时报表调度功能允许用户配置报表的自动生成和分发规则。

调度配置：

配置项说明示例
调度频率执行周期每天 08:00 / 每周一 09:00 / 每月 1 日 10:00
时间范围报表数据区间昨日 / 上周 / 上月 / 自定义
格式导出格式Excel / PDF / 图片 / HTML
分发方式发送渠道邮件 / 钉钉 / 企业微信 / FTP
接收人接收方列表角色 / 用户组 / 指定邮箱
过期策略文件保留时长保留 30 天 / 永久保留
java
@Component
public class ReportScheduleTask {

    @Autowired
    private ReportEngine reportEngine;
    @Autowired
    private DistributorFactory distributorFactory;

    @Scheduled(cron = "0 0 8 * * ?")  // 每天早上8点执行
    public void executeDailyReport() {
        List<ReportSchedule> schedules = loadDueSchedules();
        for (ReportSchedule schedule : schedules) {
            // 1. 创建报表实例
            ReportInstance instance = reportEngine.createInstance(
                schedule.getTemplateId(), schedule.resolveParams());
            // 2. 执行查询
            reportEngine.execute(instance);
            // 3. 导出文件
            ExportResult result = reportEngine.export(instance, schedule.getExportFormat());
            // 4. 分发
            Distributor distributor = distributorFactory.getDistributor(schedule.getChannel());
            distributor.distribute(schedule.getReceivers(), result.getFileUrl());
            // 5. 记录调度日志
            saveScheduleLog(schedule, instance);
        }
    }
}

4. 大屏可视化架构 ​

4.1 数据采集与计算架构 ​

大屏可视化需要处理实时数据流，典型架构采用"采集 → 传输 → 计算 → 存储 → 展示"五层设计。

┌─────────────────────────────────────────────────────────────────────┐
│                        展示层（Vue + ECharts）                        │
│                    WebSocket 推送 / HTTP 轮询                        │
├─────────────────────────────────────────────────────────────────────┤
│                        存储层                                        │
│              Redis（实时缓存）  ClickHouse（OLAP）                    │
├─────────────────────────────────────────────────────────────────────┤
│                        计算层                                        │
│     Flink（实时聚合）  /  Spark Streaming（微批次）                   │
├─────────────────────────────────────────────────────────────────────┤
│                        传输层                                        │
│     Canal（MySQL Binlog） → Kafka（消息队列）                        │
├─────────────────────────────────────────────────────────────────────┤
│                        采集层                                        │
│     业务数据库（MySQL）  /  应用日志  /  埋点数据                    │
└─────────────────────────────────────────────────────────────────────┘

数据流转说明：

  1. 采集层：业务数据库（MySQL）、应用日志（Log4j）、埋点数据（埋点 SDK）产生原始数据
  2. 传输层：
    • Canal 监听到 MySQL Binlog 变更后，将变更事件发送到 Kafka Topic
    • 应用日志通过 Filebeat/Logstash 采集后写入 Kafka
    • 埋点数据通过 HTTP API 直接写入 Kafka
  3. 计算层：
    • Flink 消费 Kafka 消息，执行实时聚合计算（窗口 TUMBLE/HOP/SESSION）
    • 计算结果写入 Redis（实时指标）和 ClickHouse（明细/聚合数据）
  4. 存储层：
    • Redis：存储最新实时指标（秒级更新），作为 WebSocket 推送的数据源
    • ClickHouse：存储聚合后的历史数据，支持大屏的历史趋势查询
  5. 展示层：
    • 前端通过 WebSocket 接收 Redis 中的实时数据推送
    • 历史趋势数据通过 HTTP API 从 ClickHouse 查询

4.2 Canal + Kafka + Flink 实时处理 ​

Canal 配置：

yaml
# canal.properties
canal.serverMode = tcp
canal.destinations = example

# instance.properties
 canal.instance.master.address = 127.0.0.1:3306
 canal.instance.dbUsername = canal
 canal.instance.dbPassword = canal
 canal.instance.connectionCharset = UTF-8
 canal.instance.filter.regex = shop\\..*  # 监听 shop 库所有表

Flink 实时聚合任务：

java
public class RealtimeDashboardJob {

    public static void main(String[] args) throws Exception {
        StreamExecutionEnvironment env = StreamExecutionEnvironment.getExecutionEnvironment();
        env.setStreamTimeCharacteristic(TimeCharacteristic.EventTime);

        // 1. 从 Kafka 消费 Binlog 消息
        Properties kafkaProps = new Properties();
        kafkaProps.setProperty("bootstrap.servers", "localhost:9092");
        kafkaProps.setProperty("group.id", "dashboard_group");

        DataStream<String> binlogStream = env.addSource(
            new FlinkKafkaConsumer<>("shop_order_binlog",
                new SimpleStringSchema(), kafkaProps));

        // 2. 解析 Binlog 为订单事件
        DataStream<OrderEvent> orderStream = binlogStream
            .map(this::parseBinlogToOrderEvent)
            .filter(Objects::nonNull);

        // 3. 滚动窗口聚合：每分钟统计订单金额和数量
        DataStream<DashboardMetric> aggregated = orderStream
            .keyBy(OrderEvent::getMerchantId)
            .window(TumblingProcessingTimeWindows.of(Time.minutes(1)))
            .aggregate(new OrderAggregator());

        // 4. 写入 Redis
        aggregated.addSink(new RedisSink<>(createRedisConfig(), new RedisMapper()));

        // 5. 写入 ClickHouse
        aggregated.addSink(new ClickHouseSink("jdbc:clickhouse://localhost:8123/dashboard", sql));

        env.execute("Realtime Dashboard Job");
    }
}

4.3 大屏设计原则 ​

大屏可视化的设计需要遵循以下原则，以确保信息传递的高效性和视觉表现的专业性。

关键指标优先 ​

  • 核心指标（KPI）放在大屏最显眼的顶部或中央区域，如 GMV、订单量、用户数
  • KPI 卡片醒目展示：数值 + 单位 + 同比/环比变化（箭头+百分比）
  • 辅助指标放在两侧或下方，形成信息层级

极简设计 ​

  • 一屏展示 5-7 个核心图表，避免信息过载
  • 去除不必要的图例、网格线和坐标轴标签，降低视觉噪音
  • 使用深色背景（#0a1628 / #1a2a4a）增强对比度和科技感
  • 留白空间用于凸显关键数据

动效设计 ​

  • 入场动效：图表加载时的逐项动画（序列延迟 0.3-0.5 秒）
  • 滚动更新：数据更新时数值滚动变化（计数动画）
  • 脉冲动画：实时告警指标使用脉冲光效引起注意
  • 轮播切换：超出屏幕的内容自动轮播展示
  • 动效克制：避免过度动画导致的视觉疲劳，动效时长控制在 1-2 秒内

分辨率适配 ​

  • 设计稿按 1920x1080 分辨率进行
  • 使用 rem/vw/vh 弹性单位实现自适应缩放
  • 通过 scale 等比缩放适配不同分辨率的大屏
  • 预留 5% 的安全边距，避免边缘裁切
css
/* 大屏自适应方案：CSS3 transform 等比缩放 */
.dashboard-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 1920px;
    height: 1080px;
    transform-origin: left top;
    transform: scale(var(--scale-ratio));
}

4.4 常见大屏布局 ​

中心对称布局 ​

适用于数据维度较为均衡的场景，如指挥中心、运营总览。

┌──────────┐ ┌────────────────────┐ ┌──────────┐
│ KPI 卡片  │ │   地图/核心指标     │ │ KPI 卡片  │
│ (左)      │ │    (中央主区域)     │ │ (右)      │
├──────────┤ ├────────────────────┤ ├──────────┤
│ 折线图    │ │                    │ │ 饼图      │
│ 趋势分析  │ │    散点图/热力图    │ │ 占比分析  │
├──────────┤ ├────────────────────┤ ├──────────┤
│ 柱状图    │ │  实时数据滚动条     │ │ 雷达图    │
│ 对比分析  │ │                    │ │ 多维分析  │
└──────────┘ └────────────────────┘ └──────────┘

上下结构布局 ​

适用于展示层级分明的数据，如销售驾驶舱、监控大屏。

┌──────────────────────────────────────────────────┐
│             顶部横栏（核心 KPI 指标条）             │
│    GMV: ¥xxxx  订单量: xxx  用户数: xxx  转化率: xx% │
├────────────────┬─────────────────┬────────────────┤
│  左区域         │   中央区域        │   右区域        │
│  各区域销售排行  │   地理分布地图    │   品类占比      │
│  （柱状图）      │   （地图）       │   （饼图）      │
├────────────────┼─────────────────┼────────────────┤
│  实时订单滚动    │   趋势折线图      │   Top 10 排行   │
│  列表           │   （时间序列）    │   （列表）      │
└────────────────┴─────────────────┴────────────────┘

全屏沉浸式布局 ​

适用于展厅展示、汇报演示等场景，强调视觉冲击力。

┌──────────────────────────────────────────────────┐
│    左上角                   右上角                  │
│  KPI 卡片    │                        │  KPI 卡片   │
├──────────────┤   中央全屏地图/3D模型    ├────────────┤
│  饼图         │    （主视觉区域）        │   柱状图    │
│              │                        │            │
├──────────────┤                        ├────────────┤
│  折线图       │                        │   雷达图    │
│              │                        │            │
└──────────────┴────────────────────────┴────────────┘
│  底部滚动条：实时消息 / 告警信息 / 数据更新日志       │
└──────────────────────────────────────────────────┘

4.5 WebSocket 实时推送 ​

大屏实时数据通过 WebSocket 推送实现，避免 HTTP 轮询带来的延迟和资源浪费。

java
@ServerEndpoint("/dashboard/ws/{roomId}")
public class DashboardWebSocket {

    private static final Map<String, Set<Session>> ROOMS = new ConcurrentHashMap<>();

    @OnOpen
    public void onOpen(Session session, @PathParam("roomId") String roomId) {
        ROOMS.computeIfAbsent(roomId, k -> new CopyOnWriteArraySet<>()).add(session);
    }

    @OnClose
    public void onClose(@PathParam("roomId") String roomId, Session session) {
        Set<Session> sessions = ROOMS.get(roomId);
        if (sessions != null) sessions.remove(session);
    }

    // 定时推送实时数据
    @Scheduled(fixedRate = 5000)  // 每 5 秒推送一次
    public void pushData() {
        Map<String, Object> data = dashboardService.getRealtimeMetrics();
        String message = JSON.toJSONString(data);
        for (Map.Entry<String, Set<Session>> entry : ROOMS.entrySet()) {
            for (Session session : entry.getValue()) {
                session.getAsyncRemote().sendText(message);
            }
        }
    }
}
javascript
// 前端 WebSocket 连接
const ws = new WebSocket(`ws://${location.host}/dashboard/ws/overview`);
ws.onmessage = function(event) {
    const data = JSON.parse(event.data);
    // 触发 ECharts 图表更新
    chartInstance.setOption({
        series: [{ data: data.series }]
    });
    // 更新 KPI 数字（计数动画）
    animateNumber('#kpi-gmv', data.gmv);
};

5. 技术方案对比 ​

5.1 ECharts vs AntV G2 vs D3.js vs Highcharts ​

特性EChartsAntV G2D3.jsHighcharts
开发团队百度/Apache蚂蚁集团Mike BostockHighsoft AS
授权协议Apache 2.0（免费）MIT（免费）ISC（免费）商业收费（非商用免费）
上手难度低中高低
文档质量优秀（中文文档完善）良好良好（英文）优秀
图表种类60+ 内置图表50+ 内置图表无内置，需自行构建50+ 内置图表
交互能力丰富（拖拽、钻取、动画）丰富灵活（底层 API）丰富
性能（大数据量）优秀（WebGL 加速）良好优秀一般
移动端适配良好（touch 事件）良好需自行处理良好
服务端渲染支持（node-canvas）支持支持（node/DOM）支持
扩展性中等中等最强较低
社区生态活跃活跃活跃商业支持
首选场景通用报表/大屏数据分析/BI定制化可视化企业商用报表

选型建议：

  • ECharts：首选方案，适用于大多数报表和大屏场景。图表种类多、配置便捷、中文文档完善、性能优秀
  • AntV G2：适用于数据分析型产品（BI 工具），语法更贴近数据可视化理论（图形语法），但学习曲线稍陡
  • D3.js：适用于高度定制化的可视化项目，如关系图、知识图谱、力导向图等 ECharts 无法覆盖的场景
  • Highcharts：适用于需要商业授权的企业级产品，注重稳定性和技术支持

5.2 服务端渲染图表 ​

在某些场景下需要在服务端生成图表图片（如报表导出 PDF、邮件预览图、社交媒体分享图），服务端渲染图表是必要能力。

ECharts SSR ​

ECharts 官方提供了服务端渲染方案，基于 node-canvas 在 Node.js 环境渲染图表。

javascript
// ECharts 服务端渲染示例（Node.js）
const echarts = require('echarts');
const { createCanvas } = require('canvas');

// 创建 Canvas 实例
const canvas = createCanvas(800, 600);
const chart = echarts.init(canvas);

// 设置图表配置
chart.setOption({
    title: { text: '服务端渲染图表' },
    xAxis: { type: 'category', data: ['A', 'B', 'C'] },
    yAxis: { type: 'value' },
    series: [{ type: 'bar', data: [10, 20, 15] }]
});

// 输出为图片 Buffer
const buffer = canvas.toBuffer('image/png');
require('fs').writeFileSync('chart.png', buffer);

Puppeteer 截图方案 ​

对于需要渲染复杂图表或包含大量动画的场景，可以使用 Puppeteer（Headless Chrome）截取图表截图。

java
// Java 端调用 Puppeteer 截图（通过命令行或 HTTP 接口）
public class ChartScreenshotService {

    public byte[] captureChart(String htmlContent) {
        try {
            // 1. 生成包含图表的 HTML 文件
            String htmlFile = generateChartHtml(htmlContent);
            // 2. 调用 Puppeteer 截图
            Process process = Runtime.getRuntime().exec(
                "node puppeteer-screenshot.js --input=" + htmlFile + " --output=chart.png");
            process.waitFor(30, TimeUnit.SECONDS);
            // 3. 读取截图文件
            return Files.readAllBytes(Paths.get("chart.png"));
        } catch (Exception e) {
            throw new RuntimeException("图表截图失败", e);
        }
    }
}
javascript
// puppeteer-screenshot.js
const puppeteer = require('puppeteer');
const argv = require('yargs').argv;

(async () => {
    const browser = await puppeteer.launch({ args: ['--no-sandbox'] });
    const page = await browser.newPage();
    await page.setViewport({ width: 1920, height: 1080 });
    await page.goto('file://' + argv.input, { waitUntil: 'networkidle0' });
    await page.waitForTimeout(2000);  // 等待图表渲染完成
    await page.screenshot({ path: argv.output, fullPage: true });
    await browser.close();
})();

两种方案对比：

对比维度ECharts SSR（node-canvas）Puppeteer 截图
渲染速度快（毫秒级）慢（秒级）
资源消耗低高（需运行完整浏览器）
渲染质量基本可接受与浏览器一致
动效支持不支持支持
部署复杂度低中（需安装 Chrome）
并发能力强弱（建议做连接池）

选型建议： 对于批量导出报表场景，优先使用 ECharts SSR；对于复杂图表（含动效、3D 场景）使用 Puppeteer 截图，配合连接池和任务队列提升并发能力。

6. OLAP 引擎 ​

6.1 ClickHouse 概述 ​

ClickHouse 是列式存储的 OLAP 数据库，专为实时分析查询设计，适合大屏可视化和报表系统的数据存储与查询。

核心特性：

  • 列式存储：按列存储数据，查询时只读取所需列，I/O 大幅降低
  • 向量化执行：利用 CPU SIMD 指令进行批量数据处理
  • 实时写入：支持每秒百万行级别的写入吞吐
  • 极速查询：单表聚合查询毫秒级响应
  • SQL 兼容：支持大部分 SQL 语法，学习成本低

6.2 建表与查询 ​

建表示例 ​

sql
-- 订单明细表（MergeTree 引擎）
CREATE TABLE dashboard.order_detail
(
    order_id       String,
    user_id        String,
    merchant_id    String,
    product_id     String,
    category_id    String,
    category_name  String,
    product_name   String,
    order_amount   Decimal(18, 2),
    pay_amount     Decimal(18, 2),
    quantity       Int32,
    order_status   String,
    pay_status     String,
    create_time    DateTime,
    pay_time       DateTime,
    region         String,
    city           String,
    _sign          Int8,
    _version       UInt64
)
ENGINE = ReplacingMergeTree(_version)
PARTITION BY toYYYYMM(create_time)
ORDER BY (merchant_id, toDate(create_time), order_id)
TTL create_time + INTERVAL 12 MONTH
SETTINGS index_granularity = 8192;

分区与排序键设计 ​

  • PARTITION BY：按月分区（toYYYYMM），便于数据管理和 TTL 过期
  • ORDER BY：订单键决定稀疏索引的排序，(merchant_id, toDate(create_time)) 覆盖了大多数查询场景
  • TTL：数据过期策略，12 个月前的数据自动删除
  • index_granularity：索引粒度，默认 8192 行，可根据查询模式调整

常见查询模式 ​

sql
-- 1. 按天统计销售额（大屏折线图数据源）
SELECT
    toDate(create_time) AS report_date,
    COUNT(DISTINCT order_id) AS order_count,
    SUM(pay_amount) AS total_amount
FROM dashboard.order_detail
WHERE create_time >= '2025-01-01'
  AND merchant_id = 'M10001'
GROUP BY report_date
ORDER BY report_date ASC;

-- 2. 各品类销售占比（饼图数据源）
SELECT
    category_name,
    SUM(pay_amount) AS total_amount
FROM dashboard.order_detail
WHERE create_time >= '2025-06-01'
GROUP BY category_name
ORDER BY total_amount DESC;

-- 3. 区域销售排行（地图/柱状图数据源）
SELECT
    region,
    COUNT(DISTINCT user_id) AS user_count,
    SUM(pay_amount) AS total_amount,
    AVG(pay_amount) AS avg_amount
FROM dashboard.order_detail
WHERE create_time >= '2025-06-01'
GROUP BY region
ORDER BY total_amount DESC;

6.3 数据导入 ​

Kafka Engine（实时导入） ​

ClickHouse 的 Kafka Engine 可以直接消费 Kafka 消息，无需中间件。

sql
-- 1. 创建 Kafka 引擎表（接收消息）
CREATE TABLE dashboard.kafka_order_queue
(
    order_id       String,
    user_id        String,
    pay_amount     Decimal(18, 2),
    create_time    DateTime,
    region         String
)
ENGINE = Kafka
SETTINGS
    kafka_broker_list = 'localhost:9092',
    kafka_topic_list = 'order_topic',
    kafka_group_name = 'clickhouse_consumer',
    kafka_format = 'JSONEachRow',
    kafka_num_consumers = 4;  -- 并行消费

-- 2. 创建物化视图（将 Kafka 数据实时写入 MergeTree）
CREATE MATERIALIZED VIEW dashboard.order_consumer TO dashboard.order_detail
AS SELECT
    order_id, user_id, pay_amount, create_time, region
FROM dashboard.kafka_order_queue;

MaterializedMySQL（离线同步） ​

MaterializedMySQL 引擎可以将 MySQL 表实时同步到 ClickHouse，适用于已有业务库的数据同步。

sql
-- 创建 MaterializedMySQL 数据库
CREATE DATABASE dashboard ENGINE = MaterializedMySQL(
    'mysql-host:3306',
    'shop_db',
    'replicator',
    'replicator_password'
);

-- 自动同步 MySQL 中的表结构和数据
-- 支持 INSERT/UPDATE/DELETE 的增量同步
-- 使用 _sign 和 _version 字段处理数据变更

6.4 物化视图加速查询 ​

物化视图是 ClickHouse 加速聚合查询的核心手段，预计算并存储聚合结果，查询时直接读取。

sql
-- 创建物化视图：按天预聚合订单数据
CREATE MATERIALIZED VIEW dashboard.daily_order_agg
ENGINE = SummingMergeTree()
PARTITION BY toYYYYMM(report_date)
ORDER BY (merchant_id, report_date)
POPULATE  -- 创建时自动写入历史数据
AS SELECT
    toDate(create_time) AS report_date,
    merchant_id,
    COUNT(DISTINCT order_id) AS order_count,
    SUM(pay_amount) AS total_amount,
    SUM(quantity) AS total_quantity,
    COUNT(DISTINCT user_id) AS user_count
FROM dashboard.order_detail
GROUP BY report_date, merchant_id;

-- 查询物化视图（毫秒级响应）
SELECT report_date, total_amount
FROM dashboard.daily_order_agg
WHERE merchant_id = 'M10001'
  AND report_date >= '2025-06-01'
ORDER BY report_date ASC;

物化视图使用建议：

  • 创建多级粒度的物化视图（小时级、天级、月级），覆盖不同时间范围查询
  • POPULATE 参数在数据量大时需谨慎使用，建议手动填充历史数据
  • 物化视图会占用额外存储空间，需评估存储成本与查询性能的平衡

6.5 ClickHouse vs MySQL vs Elasticsearch ​

对比维度ClickHouseMySQLElasticsearch
类型OLAP 列式存储OLTP 行式存储搜索与分析引擎
查询场景聚合分析、大表扫描单行查询、事务处理全文检索、日志分析
写入性能百万行/秒（批量）数千行/秒（单条）数万行/秒
聚合查询极快（毫秒级）较慢（大表秒级+）良好（秒级）
事务支持不支持支持（ACID）不支持
JOIN 性能较弱（需优化）良好较弱
数据压缩5-10 倍压缩比1-2 倍1-3 倍
SQL 支持大部分 SQL完整 SQLDSL（类 SQL 有限）
实时性秒级毫秒级近实时（1s）
适用场景报表/大屏/BI 分析业务交易、CRUD搜索、日志、APM

混用策略：

yaml
# 多引擎架构建议
MySQL:
  职责: 业务主库，存储订单、用户、商品等事务数据
  特点: ACID 事务，数据一致性保障

ClickHouse:
  职责: 分析库，存储报表和大屏所需聚合数据和历史明细
  数据来源: MySQL Binlog（Canal）→ Kafka → Flink → ClickHouse
  特点: 高压缩比、极速聚合查询

Elasticsearch:
  职责: 搜索库，存储订单搜索、日志检索、APM 数据
  数据来源: 业务日志（Filebeat）、订单数据（Logstash）
  特点: 全文检索、模糊匹配、聚合分析

7. 总结 ​

报表与数据可视化系统的建设涉及数据采集、存储计算、图表渲染和设计交互等多个层面。核心要点总结如下：

  • 元数据驱动：报表模板、数据源、图表配置的元数据设计是报表系统灵活性的基础
  • 分层架构：大屏可视化采用"采集 → 传输 → 计算 → 存储 → 展示"五层架构，各层职责明确
  • 选型匹配：ECharts 适合通用报表和大屏，ClickHouse 适合 OLAP 分析，MySQL 保留业务事务能力
  • 性能优化：物化视图预聚合、列式存储压缩、WebSocket 实时推送是性能保障的关键手段
  • 交互能力：钻取、联动、下钻等交互能力是报表系统从"看数据"到"分析数据"的进阶能力