原型继承在低代码数据看板中用于构建数据模型与组件行为的复用关系:1. 定义状态原型统一管理筛选条件;2. 图表组件通过原型链共享联动逻辑;3. 配置时以现有图表为原型快速生成关联图表;4. 数据模型继承保障多表维度对齐与联动一致性。

原型继承思想在低代码数据看板中不是用来写 JavaScript 类的,而是指导数据模型与组件行为之间的复用与派生关系。多图表联动的数据链,本质是“一个操作触发多个视图响应”,其底层依赖的是统一数据源、可继承的状态结构和可复用的联动逻辑——这恰好契合原型继承的核心理念:子对象共享并可扩展父对象的属性与行为。
定义可复用的数据状态原型
把看板中所有图表共用的数据筛选条件(如时间范围、区域、业务线)抽象为一个“状态原型”。它不直接渲染图表,只承载字段定义、默认值、校验规则和变更通知机制。
- 例如创建一个 DashboardState 原型对象,包含
dateRange、regionId、onUpdate回调等基础属性 - 每个图表组件实例化时,将其内部状态
__proto__指向该原型,或通过 Object.create(DashboardState) 创建新状态实例 - 当用户调整时间滑块,仅需调用
state.setDateRange(...),所有继承该原型的图表自动感知并触发重绘
图表组件通过原型链共享联动行为
联动不是靠硬编码每个图表监听彼此,而是让它们都从同一个行为原型获取“响应筛选”能力。
- 定义 FilterableChart 原型,在其上实现
bindToState(state)和applyFilter()方法 - 柱状图、折线图、地图组件都基于此原型构建,各自只覆盖
render()实现,其余联动逻辑复用父原型 - 当某图表触发筛选(如点击省份),它调用
state.update({ regionId: 'GD' }),其他绑定同一 state 的图表自动执行applyFilter()并刷新
用原型拷贝快速生成关联图表配置
在低代码配置界面中,新增一个联动图表时,无需从零设置字段映射和筛选逻辑,而是以已有图表为“原型”进行拷贝与微调。
- 用户右键某个已配置好的销售趋势图 → “复制为关联图表”
- 系统调用原型拷贝逻辑:深拷贝其数据模型绑定、筛选字段、联动标识,但重置图表类型、坐标轴、颜色等表现层属性
- 新图表自动继承原图表对 state 的绑定关系,只需修改目标数据集(如从“销售额”改为“订单量”),联动即生效
数据源层面用继承建模保障联动一致性
多表联动要求不同图表背后的数据能按相同维度对齐。可在数据模型设计阶段引入继承结构,使子模型天然具备父模型的筛选字段和语义约束。
- 定义基类模型 SalesBase,含
date、region、productCategory等标准维度字段 -
OrderSummary 与 RevenueDetail 都继承自 SalesBase,因此它们的查询结果天然支持按同一
region字段联动 - 看板引擎识别到多个图表使用继承自同一基类的模型,自动启用跨图表维度同步,无需额外配置外键或 join 条件










