低代码平台在数据可视化场景的应用：AI辅助的图表推荐与配置生成
数据可视化的开发瓶颈不在图表库本身，而在于「选择什么图表」和「如何配置图表参数」。ECharts、AntV 等图表库提供了丰富的配置项，但开发者需要花费大量时间在文档和实践之间反复试错。AI 辅助的图表推荐系统，可以根据数据特征自动推荐图表类型并生成基础配置，将低代码能力从拖拽搭建延伸到智能生成。
一、图表推荐的决策模型
图表选择本质上是数据维度的映射问题。AI 模型通过分析数据的度量类型、维度数和数据分布特征，结合可视化最佳实践规则，输出推荐图表类型。
二、数据特征提取与字段语义分析
推荐引擎的第一步是理解数据。不同类型的数据字段（时间、类别、数值、地理坐标）决定了适合的图表类型。
// src/chart-advisor/data-analyzer.ts
export type FieldType = "nominal" | "ordinal" | "temporal" | "quantitative" | "geographic";
export type ChartType = "bar" | "line" | "pie" | "scatter" | "heatmap" | "map" | "table";
interface FieldMeta {
name: string;
type: FieldType;
uniqueCount: number;
nullRatio: number;
sampleValues: unknown[];
}
interface DataProfile {
rowCount: number;
columnCount: number;
fields: FieldMeta[];
correlationPairs: Array<{ x: string; y: string; coefficient: number }>;
}
/** 数据特征分析器 */
class DataAnalyzer {
/** 分析数据集的结构特征 */
analyze(data: Record<string, unknown>[]): DataProfile {
if (!Array.isArray(data) || data.length === 0) {
throw new Error("数据集为空或格式不正确");
}
const firstRow = data[0];
const fieldNames = Object.keys(firstRow);
if (fieldNames.length === 0) {
throw new Error("数据对象无字段");
}
const fields: FieldMeta[] = fieldNames.map(name => {
const values = data.map(row => row[name]);
const uniqueValues = new Set(values);
const nullCount = values.filter(v => v === null || v === undefined).length;
return {
name,
type: this.inferFieldType(values, name),
uniqueCount: uniqueValues.size,
nullRatio: nullCount / values.length,
sampleValues: values.slice(0, 5),
};
});
return {
rowCount: data.length,
columnCount: fieldNames.length,
fields,
correlationPairs: this.computeCorrelations(data, fields),
};
}
/** 推断字段类型 */
private inferFieldType(values: unknown[], fieldName: string): FieldType {
const nonNull = values.filter(v => v !== null && v !== undefined);
if (nonNull.length === 0) return "nominal";
// 时间字段检测
const lowerName = fieldName.toLowerCase();
if (/^(date|time|日期|时间|create|update|timestamp)/.test(lowerName)) {
const timeSample = nonNull.slice(0, 10).every(
v => !isNaN(Date.parse(String(v)))
);
if (timeSample) return "temporal";
}
// 地理坐标检测
if (/^(lat|lng|latitude|longitude|经度|纬度|坐标)/.test(lowerName)) {
return "geographic";
}
// 数值/类别检测
const numericCount = nonNull.filter(v => typeof v === "number" || !isNaN(Number(v))).length;
const numericRatio = numericCount / nonNull.length;
if (numericRatio > 0.9 && new Set(nonNull).size > nonNull.length * 0.5) {
return "quantitative";
}
return new Set(nonNull).size < nonNull.length * 0.3 ? "nominal" : "ordinal";
}
/** 计算数值字段之间的相关性 */
private computeCorrelations(
data: Record<string, unknown>[],
fields: FieldMeta[]
): Array<{ x: string; y: string; coefficient: number }> {
const numericFields = fields.filter(f => f.type === "quantitative");
const pairs: Array<{ x: string; y: string; coefficient: number }> = [];
for (let i = 0; i < numericFields.length; i++) {
for (let j = i + 1; j < numericFields.length; j++) {
const xValues = data.map(r => Number(r[numericFields[i].name]));
const yValues = data.map(r => Number(r[numericFields[j].name]));
const coef = this.pearsonCorrelation(xValues, yValues);
if (!isNaN(coef) && Math.abs(coef) > 0.3) {
pairs.push({ x: numericFields[i].name, y: numericFields[j].name, coefficient: coef });
}
}
}
return pairs;
}
/** 皮尔逊相关系数计算 */
private pearsonCorrelation(x: number[], y: number[]): number {
const n = Math.min(x.length, y.length);
if (n < 3) return NaN;
const meanX = x.reduce((s, v) => s + v, 0) / n;
const meanY = y.reduce((s, v) => s + v, 0) / n;
let cov = 0, varX = 0, varY = 0;
for (let i = 0; i < n; i++) {
const dx = x[i] – meanX;
const dy = y[i] – meanY;
cov += dx * dy;
varX += dx * dx;
varY += dy * dy;
}
const denominator = Math.sqrt(varX * varY);
return denominator === 0 ? 0 : cov / denominator;
}
}
三、AI 驱动的图表推荐引擎
推荐引擎需要结合规则和模型。规则层负责基础判断（如「类别数 > 10 不建议用饼图」），模型层通过 AI 理解数据语义和业务场景。
推荐引擎核心实现：
# src/chart-advisor/recommender.py
from dataclasses import dataclass, field
from enum import Enum
class ChartType(str, Enum):
BAR = "bar"
LINE = "line"
PIE = "pie"
SCATTER = "scatter"
HEATMAP = "heatmap"
MAP = "map"
@dataclass
class ChartRecommendation:
chart_type: ChartType
score: float # 推荐得分 0-1
reason: str # 推荐理由
x_field: str
y_field: str
group_field: str = ""
@dataclass
class FieldMeta:
name: str
ftype: str # nominal/ordinal/temporal/quantitative/geographic
unique_count: int
null_ratio: float
class ChartRecommender:
"""基于规则引擎的图表推荐器"""
# 基础规则定义
RULES = [
# (条件函数, 图表类型, 基础分数, 理由模板)
("_is_single_period_comparison", ChartType.BAR, 0.9, "柱状图适用于分类对比场景"),
("_is_time_series", ChartType.LINE, 0.95, "折线图适用于时间序列数据展示"),
("_is_part_whole", ChartType.PIE, 0.7, "饼图适用于占比分析（类别数需<8）"),
("_is_correlation", ChartType.SCATTER, 0.85, "散点图适用于相关性分析"),
("_is_matrix_data", ChartType.HEATMAP, 0.8, "热力图适用于矩阵数据展示"),
("_has_geographic", ChartType.MAP, 0.9, "地图适用于地理分布数据"),
]
def __init__(self):
self.default_x_field = ""
self.default_y_field = ""
def recommend(self, fields: list[FieldMeta], data_row_count: int) -> list[ChartRecommendation]:
"""根据字段元数据推荐图表类型"""
if not fields:
return []
self._identify_default_axes(fields)
recommendations: list[ChartRecommendation] = []
for rule_method, chart_type, base_score, reason_template in self.RULES:
try:
is_match = getattr(self, rule_method)(fields, data_row_count)
except AttributeError:
continue
if is_match:
# 根据数据质量动态调整分数
score = self._adjust_score(base_score, fields)
recommendations.append(ChartRecommendation(
chart_type=chart_type,
score=score,
reason=reason_template,
x_field=self.default_x_field,
y_field=self.default_y_field,
))
# 按分数降序排列
recommendations.sort(key=lambda r: r.score, reverse=True)
return recommendations
def _identify_default_axes(self, fields: list[FieldMeta]):
"""识别默认的 X 轴（类别/时间）和 Y 轴（数值）字段"""
x_candidates = [f for f in fields
if f.ftype in ("nominal", "ordinal", "temporal")]
y_candidates = [f for f in fields if f.ftype == "quantitative"]
self.default_x_field = x_candidates[0].name if x_candidates else ""
self.default_y_field = y_candidates[0].name if y_candidates else ""
def _is_single_period_comparison(self, fields, count) -> bool:
return any(f.ftype == "nominal" and 2 <= f.unique_count <= 30 for f in fields) \\
and any(f.ftype == "quantitative" for f in fields)
def _is_time_series(self, fields, count) -> bool:
return any(f.ftype == "temporal" for f in fields) \\
and any(f.ftype == "quantitative" for f in fields)
def _is_part_whole(self, fields, count) -> bool:
nominated = [f for f in fields if f.ftype == "nominal" and 2 <= f.unique_count <= 8]
return bool(nominated) and any(f.ftype == "quantitative" for f in fields)
def _is_correlation(self, fields, count) -> bool:
quantitative = [f for f in fields if f.ftype == "quantitative"]
return len(quantitative) >= 2 and count >= 20
def _is_matrix_data(self, fields, count) -> bool:
categorical = [f for f in fields if f.ftype in ("nominal", "ordinal")]
quantitative = [f for f in fields if f.ftype == "quantitative"]
return len(categorical) >= 2 and len(quantitative) >= 1
def _has_geographic(self, fields, count) -> bool:
return any(f.ftype == "geographic" for f in fields)
def _adjust_score(self, base_score: float, fields: list[FieldMeta]) -> float:
"""根据数据质量调整推荐分数"""
# 空值比例过高则降低分数
max_null = max((f.null_ratio for f in fields), default=0)
quality_penalty = min(max_null * 0.3, 0.3)
return round(base_score – quality_penalty, 2)
四、ECharts 配置的自动生成
推荐出图表类型后，下一步是将数据映射到 ECharts 的 option 配置。这个过程需要处理坐标轴映射、颜色方案、交互配置等细节。
// src/chart-advisor/config-generator.ts
import type { EChartsOption } from "echarts";
interface ChartConfig {
type: string;
data: Record<string, unknown>[];
xField: string;
yField: string;
title?: string;
colorPalette?: string[];
}
/** 根据推荐结果生成 ECharts 配置 */
export function generateEChartsOption(config: ChartConfig): EChartsOption {
const { type, data, xField, yField, title } = config;
if (!data.length) {
return { title: { text: title || "图表", subtext: "暂无数据" } };
}
const xData = data.map(row => row[xField]);
const yData = data.map(row => Number(row[yField]) || 0);
const baseOption: EChartsOption = {
title: { text: title || "", left: "center" },
tooltip: { trigger: type === "pie" ? "item" : "axis" },
color: config.colorPalette || [
"#5470c6", "#91cc75", "#fac858", "#ee6666", "#73c0de",
],
};
switch (type) {
case "bar":
return {
…baseOption,
xAxis: { type: "category", data: xData as string[],
axisLabel: { rotate: xData.length > 8 ? 45 : 0 } },
yAxis: { type: "value" },
series: [{ type: "bar", data: yData, name: yField }],
};
case "line":
return {
…baseOption,
xAxis: { type: "category", data: xData as string[],
boundaryGap: false },
yAxis: { type: "value" },
series: [{ type: "line", data: yData, name: yField,
smooth: true, areaStyle: { opacity: 0.1 } }],
};
case "pie":
return {
…baseOption,
series: [{
type: "pie",
radius: ["40%", "70%"], // 环图
data: data.map(row => ({
name: String(row[xField]),
value: Number(row[yField]) || 0,
})),
label: { show: true, formatter: "{b}: {d}%" },
emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)" } },
}],
};
case "scatter":
return {
…baseOption,
xAxis: { type: "value", name: xField },
yAxis: { type: "value", name: yField },
series: [{
type: "scatter",
data: data.map(row => [Number(row[xField]), Number(row[yField])]),
symbolSize: 8,
}],
};
default:
console.warn(`不支持的图表类型: ${type}，回退到柱状图`);
return generateEChartsOption({ …config, type: "bar" });
}
}
五、用户校准与反馈闭环
自动生成的图表不够完美时，需要预留人工调整的入口。通过收集用户的调整行为数据，可以持续优化推荐模型。
总结
低代码平台在数据可视化场景引入 AI 辅助，核心价值在于压缩「数据到图表」的决策和配置过程。推荐引擎通过数据特征分析和规则模型，将图表选择从经验驱动转向数据驱动。实现的关键环节包括数据字段类型的准确推断、推荐规则的覆盖度与准确度平衡、以及用户反馈回路的构建。当前阶段，规则引擎 + 简单统计模型已经可以覆盖 70% 以上的常见可视化场景，AI 大模型在复杂语义理解和个性化推荐方面则是下一步的增强方向。
