1. 内容概述

本文为您介绍可视化插件时的开发流程。

2. 开发流程

可视化插件的整个开发流程大致可划分为以下几个步骤。

第1步：环境准备。

1）安装10.0.0以上版本的 node.js。

2）安装IDE，例如 VScode。并新建空白工程。

3）运行如下命令，全局安装 wyn-visual-tools。
npm i @grapecity/wyn-visual-tools -g

有关构建工具的更多介绍，请见构建工具介绍。

第2步：创建工程目录。

执行初始化命令：wyn-visual-tools init

执行初始化之后，可视化组件的基本工程框架就搭建出来了。后续按照此框架进行继续开发修改即可。

具体如下：

assets：存储图片资源。目前仅支持图片，定义中所使用的图片将被编码为base64字符串。
i18nResources：此文件夹用于存放 i18n 文件。
node_modules: 该工程安装的依赖
src / visual.ts：自定义可视化组件的入口。
style：less及css 代码。
capabilities.json：配置可视化组件的一些静态属性，包括数据绑定，属性设置，操作栏的配置。
package.json/package-lock.json: 该项目的npm配置，具体可以参考https://docs.npmjs.com/files/package.json
tsconfig.json: 该项目有关typescript的一些配置，具体可以参考https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
visual.d.ts: 可视化插件提供的一些接口定义。
visual.json：有关自定义可视化组件的一些元信息。
webpack.config.js: 该项目通过webpack进行打包，该文件是webpack的配置文件，具体可参考https://webpack.js.org/configuration/

第3步：开发&调试。

1）启用开发者模式

2）运行如下命令启动开发服务器：

wyn-visual-tools develop

默认本地启动，端口号为3000。您可以通过 -p 来修改端口号。

3）开发调试

配置 visual.json 文件。该步骤包括有关此可视化组件的一些元信息。
详见 visual.json接口文档。
配置 capabilities.json 文件。其中包含有关数据绑定（Data Binding），属性设置（Options），操作栏（Actions）、数据联动分析（Analysis）的配置。
详见 capabilities 接口文档：
（可选）将i18n资源添加到 i18nResources文件夹。
（可选）将图像添加到 assets文件夹。
通过Visual API 开发自定义可视化组件，使用 typescript 和 less。
详见 Visual API接口文档。
单击开发工具操作栏上的刷新按钮可加载自定义的可视化组件。