前端组件 | 函子Zion接入3D Echart代码组件教程，增强数据可视化

产品能力与实现效果

集成3D Echart增强数据可视化

Zion无代码支持前端接入自定义代码组件，一键与后端数据库的链接，能达到丰富的视觉效果。这次我们通过一个案例，介绍3D Echart组件的接入。

3D Echart 是一种能够直观展示数据的图表工具，特别适合需要在三维空间内展示数据的场景，例如展示城市和年份维度的数据变化。

---

如何使用 3D Echart

1. 创建数据模型并导入数据

1. 步骤：

• 需要先在数据库中创建数据模型。数据模型应该包含你要展示的数据字段，比如城市名称、年份和相应的数据值（例如人口、销售量等）。

1. 导入数据：

• 将创建好的数据文件导入到数据库中。例如，可以通过Excel表格或者其他数据源来导入这些数据。

  

1. 发布代码组件库并导入项目

1. 操作步骤：

• 根据官方文档中的指引，发布代码组件库。可以参考文档链接来完成这一操作。

1. 导入项目：

• 成功发布代码组件库后，将其导入你的项目，以便在页面中使用这些组件。

1. 添加组件到页面

1. 添加三个组件：

在页面中，需要添加以下三个组件来完成3D Echart的配置：

• Bar3DEchart：这是核心的3D图表组件，负责展示你的数据。

• 数据选择器（城市）：用于选择具体的城市。

• 数据选择器（年份）：用于选择具体的年份。

1. 配置方式：

• 数据选择器-城市：选择并配置该组件，确保其可以根据用户选择的城市数据进行展示。

  

• 数据选择器-年份：类似于城市选择器，这个组件用于选择年份。

• 

• Bar3DEchart：将图表组件添加到页面，并确保其与数据选择器的值联动显示。

  

1. 发布页面

• 当所有配置完成后，点击页面右上角的“发布”按钮，即可将该页面发布上线，用户可以实时操作和查看数据。

---

如何个性化配置

修改数据来源

如果你希望修改3D Echart的数据来源，比如从其他数据库切换到你指定的数据库，可以按照以下步骤操作。请注意，这部分需要具备一定的 TypeScript (TS) 代码基础，并能使用 GraphQL (GQL) 查询数据。

操作步骤：

1. 获取数据库数据：

   1. 打开文件路径：src->components->Bar3DEchart-db.ts。

   2. 在此文件中找到 getData 函数，并根据你的数据库结构修改其中的 GraphQL 查询（gql）。

2. 修改数据处理部分：

   1. 打开文件路径：src->components->Bar3DEchart->processData.ts。

   2. 根据新的数据库字段结构，调整数据类型定义和数据提取逻辑，以适应新数据库中的数据格式。

3. 修改数据显示部分：

   1. 打开文件路径：src->components->Bar3DEchart->option.ts。

   2. 修改 fetchAndProcessData() 函数的结果赋值，确保处理后的数据能够正确展示在图表中。

4. 本地部署查看效果：

   1. 在终端中运行命令 npm run dev，启动本地开发环境，查看是否配置正确。

5. 发布：

   1. 当所有修改验证完成后，使用命令 functorz publish 将其发布。

---

修改 Echart 图表类型

3D Echart 使用的是 Apache ECharts 提供的图库。如果你想修改图表的样式或类型（例如从柱状图更改为其他类型图表），可以参考 ECharts 文档 并根据其说明修改 option.ts 文件中的配置。

修改步骤：

1. 进入 option.ts 文件：

   1. 你可以通过路径 src->components->Bar3DEchart->option.ts 找到图表的配置文件。

2. 参考官方文档：

   1. 根据 ECharts 的文档，修改图表的 option 配置。例如，可以修改图表的类型、轴线显示方式、颜色等细节。