[]
        
(Showing Draft Content)

可视化插件开发流程

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

开发流程

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

第1步:环境准备。

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

    https://nodejs.org/en/download/

  2. 安装IDE,例如 VScode。并新建空白工程。

  3. 运行如下命令,全局安装 wyn-visual-tools。

    npm i @grapecity/wyn-visual-tools -g

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

第2步:创建工程目录。

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

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

具体如下:

project_intro.PNG

  • 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. 启用开发者模式

    image2022-9-1_15-5-15.png

  2. 运行如下命令启动开发服务器:

    wyn-visual-tools develop

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

  3. 开发调试

  • 在后台管理启动开发者模式之后,在仪表板设计器中就可以看到开发工具了。通过拖拽将开发工具添加道设计区

    image2020-10-20_11-5-36.png

  • 配置 visual.json 文件。该步骤包括有关此可视化组件的一些元信息。

    详见 visual.json接口文档

  • 配置 capabilities.json 文件。其中包含有关数据绑定(Data Binding),属性设置(Options),操作栏(Actions)、数据联动分析(Analysis)的配置。

    详见 capabilities 接口文档:

  • (可选)将i18n资源添加到 i18nResources文件夹。

  • (可选)将图像添加到 assets文件夹。

  • 通过Visual API 开发自定义可视化组件,使用 typescript 和 less。

    详见 Visual API接口文档

  • 单击开发工具操作栏上的刷新按钮可加载自定义的可视化组件。

    image2020-5-28_17-33-33.png

  • 更新 package.json 文件中的版本信息。

第4步:打包代码

通过构建工具打包可视化组件,运行 wyn-visual-tools package 命令,生成后缀名为“ viz”的文件包。


第5步:上传到 系统中。

将 viz 文件包上传到系统中。您可以在文档门户网站进行上传,如下图。

image2021-3-10_16-11-44.png

也可以在管理后台进行上传。

image2021-3-10_16-12-49.png

之后,您就可以在仪表板上添加并使用该可视化插件。

image2020-10-20_11-6-25.png

您还可以到后台管理网站中修改配置,对组件进行管理。

image2021-3-10_16-14-10.png

选择设置参数,可以设置插件的参数和打开信任开关,信任插件后系统将对插件开放所有权限。

image2020-10-20_11-16-41.png