You need to enable JavaScript to run this app.
导航
自定义可视化概述
最近更新时间:2024.05.20 19:22:40首次发布时间:2024.03.26 15:52:53

1.概述

自定义可视化是本产品提供的开放能力之一,它支持用户根据需求创建个性化的数据展示。这项能力不仅包括自定义字段和配置选项,还涵盖了对多个框架的兼容性支持。除了利用系统预设的图表组件,用户还可以借助组件软件开发工具包(SDK)以及社区中的流行工具,进一步开发和定制专属的图表和控件。这为用户提供了极大的灵活性,使得数据表现更加符合特定场景和个人偏好。(目前,自定义可视化功能还在内测阶段,若您对该功能有具体需求,欢迎联系火山引擎商务团队,以获取更多购买和合作的详细信息)。

2.快速入门

首先,您需要通过 Echarts Pie Chart 插件快速了解基本的开发过程。该插件会在可视化查询的图表处加载一个 基于 Echarts 实现的 Pie Chart 图表。
图片

3.具体操作流程

3.1 环境准备

您需要完成以下两项内容来准备所需的环境:
(1)安装 Node 与 Npm
Node.js 安装包及源码下载地址为:https://nodejs.org/zh-cn/download/
在您安装过 Node 后就会自动安装 Npm。
(2)插件开发工具@datawind/extension-cli
您可以使用 CLI 工具 @datawind/extension-cli 进行插件项目的调试和编译。通过调用 datawind-extension -h ,您就可以查看所有命令。

npm i -g @datawind/extension-cli
datawind-extension -h

注意:如果当前使用的registry不是https://registry.npmjs.org,则需要指定registry进行安装:

npm i -g @datawind/extension-cli --registry=https://registry.npmjs.org

3.2 初始化项目

首先,请您下载如下的示例插件压缩包。
React+Echarts 模板包:

react-echarts.zip
未知大小

Vue+Echarts 模板包:
vue-echarts.zip
未知大小

其次,在您下载插件压缩包后需要进行解压,然后进入该插件包的项目根目录后进行安装依赖。

cd <YOUR_PROJECT_DIR>
npm install

// 同上,如果当前使用的registry不是https://registry.npmjs.org,需要指定registry进行安装
npm install --registry=https://registry.npmjs.org

最后,项目中各文件的的作用将会在《自定义图表插件结构》一文中详细介绍,在此您可以先完成开发图表的操作流程。

3.3 调试

您需要进行以下操作来完成开发环境的调试工作。
(1)执行 npm run dev 启动插件

npm run dev

如果您访问 http://localhost:5000/satellite/dev/extension 看到插件的 Json 描述,则说明本地插件调试服务器启动成功。
(2)启动开发环境并调试插件
第一步:进入本产品插件调试设置页面 https://<HOST>/<PATH>/#/devtools/extensionDebug

  • 设置端口号 5000(与本地配置的调试端口号一致)
  • 切换开关为 enable,点击 Confirm
  • 开启本地插件调试

第二步:进入本产品可视化查询页面 https://<HOST>/<PATH>/#/dataQeury

  • 原图表选择区域位置下方可以看见插件图表。
  • 选择本地开发的 Pie Chart 插件图表,添加一个维度一个指标,右侧图表区域输出图表的渲染结果。

图片

4.访问地址说明

本文中提及的 URLhttps://<HOST>/<PATH>在不同部署环境下有不同的设置。您可以直接访问本产品确认当前的 HOST 和 PATH。
举例,假设您的部署环境中某个仪表盘地址为:https://company.site.com/console/bi/#/dashboard/1?appId=2,则:

  • HOST=company.site.com
  • PATH=console/bi
  • 插件调试配置地址:https://company.site.com/console/bi/#/devtools/extensionDebug
  • 可视化查询页面地址:https://company.site.com/console/bi/#/dataQuery