山海鲸交互图表制作教程详解

在山海鲸中打造真正“会响应、能联动、有深度”的交互图表，关键在于紧扣数据绑定、组件配置与事件触发三大核心环节：从启用交互字段的数据源导入，到图表悬停与点击基础交互的快速开启；从多图表间基于统一字段的智能联动分析，到点击即弹出动态填充详情的交互式弹窗；再到三维鲸孪生标记点与二维图表通过区域ID实现的空间-统计双向穿透——整套流程零代码、高可视化，让新手也能轻松构建专业级数据交互体验。

如果您希望在山海鲸中创建具备响应式反馈与用户操作联动的图表，则需围绕数据绑定、组件配置与事件触发三个核心环节展开。以下是实现交互图表的具体步骤：

一、导入并配置数据源

交互图表的基础是结构清晰、字段明确的数据源，只有正确加载并映射字段，后续联动与动态更新才具备可行性。山海鲸支持 CSV、Excel 文件直接拖入，也支持数据库直连或 API 接口接入。

1、点击左侧工具栏中的“数据源”图标，选择“添加本地数据”。

2、上传 CSV 或 Excel 文件，系统将自动解析表头与首行数据示例。

3、在字段设置面板中，为每个列手动指定数据类型（如文本、数值、日期），并勾选“启用为交互字段”以供后续联动使用。

4、点击“保存并应用”，该数据源即出现在资源中心，可被任意图表组件调用。

二、添加图表并启用基础交互

山海鲸内置多种图表组件均默认支持悬停提示、点击高亮等轻量级交互，无需编码即可激活。关键在于开启对应开关并确保字段绑定准确。

1、从组件库拖拽“环形图”至画布空白区域。

2、在右侧属性面板中，点击“数据”选项卡，将已配置的数据源拖入“数据源”框内。

3、在“维度”栏选择地区字段，在“指标”栏选择销量字段，完成基础绑定。

4、切换至“交互”选项卡，勾选“启用点击联动”和“显示悬停提示”两项。

三、设置组件间联动关系

当多个图表共用同一数据源时，可通过“受其他组件联动”机制实现点击一个图表后，其余图表同步筛选刷新，形成分析闭环。此功能依赖字段名称严格一致。

1、再添加一个“T型分组柱状图”组件至画布。

2、为其绑定相同数据源，并分别配置X轴为“月份”、Y轴为“产量”。

3、在该柱状图的“交互”选项卡中，开启“受其他组件联动”开关。

4、返回环形图组件，在其“交互”选项卡中确认已开启“触发联动”，且联动目标选择为刚添加的T型柱状图。

5、预览模式下点击环形图某一片段，柱状图将自动过滤并仅展示该地区对应月份的产量数据。

四、嵌入弹窗实现点击详情交互

对于需展示明细信息的场景，可在图表点击动作上绑定弹窗组件，通过动态字段填充实现内容随点击对象实时变化。

1、从组件库添加“弹窗”组件，置于画布任意位置（可隐藏于角落）。

2、双击进入弹窗编辑，添加“单行文本”与“数据表格”两个子组件。

3、选中单行文本，在“文本”属性中点击“设置为动态数据”，选择数据源中“区域名称”字段。

4、选中数据表格，在“数据字段”中依次添加“设备编号”“故障次数”“平均修复时长”等列，均来自同一数据源。

5、回到环形图组件，在其“交互”选项卡中，于“点击后行为”下拉菜单选择“打开弹窗”，并指定刚才创建的弹窗组件。

五、使用鲸孪生组件构建三维-二维联动

若项目含三维地图场景，可通过鲸孪生组件将标记点点击事件映射至二维图表，实现空间位置与统计维度的双向穿透分析。

1、添加“鲸孪生”组件，导入倾斜摄影模型或选择内置三维地图模板。

2、双击进入编辑模式，在地图上右键添加标记点，为每个点填写唯一“区域ID”作为标识字段。

3、添加“弹窗组件”并配置动态字段（如“区域ID”“当前温度”“告警数量”），保存后将其拖入标记点的“标记面板”中。

4、选中画布上的二维图表（如指标卡），在其“交互”选项卡中开启“受其他组件联动”，并在联动字段中选择“区域ID”。

5、返回鲸孪生编辑模式，为标记点开启“联动其他组件”，并指定联动字段为“区域ID”，确保与二维图表字段完全一致。

今天关于《山海鲸交互图表制作教程详解》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！