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

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

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 模板包：

Vue+Echarts 模板包：

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

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>/#/dataQuery

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

本文中提及的 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