插件开发

<< Click to Display Table of Contents >>

当前位置:  制作可视化报告 > 插件管理 

插件开发

复制链接

1. 概述

1.1 功能简介

产品支持开发者开发插件。

1.2 应用场景

内置的组件和插件市场的组件不能满足特定报告需求时,可以自定义插件。

2. 功能说明

2.1 插件开发流程说明

AppMarket8

1)安装node.js

教程详见:https://nodejs.org/en/download/

2)安装项目

新建任意一个文件夹,运行命令:npm install yh-plugin-project@latest

install成功之后,将文件夹“yh-plugin-project”挪出“node_modules”;

版本说明:如基于8.5.0.X版本插件开发,请使用 yh-plugin-project 版本为1.0.6。

3)安装依赖

在 yh-plugin-project 目录运行命令:npm install

模块说明:

yh-plugin-manager 是必须引用的模块,不可以删除,并需要运行命令:npm install yh-plugin-manager@latest 将其安装到最新版本。当前最新版本是0.0.9,可在根目录下的package.json中搜索yh-plugin-manager,查看当前环境版本。

如基于 8.5.0.X 版本开发插件,使用的 yh-plugin-manager 版本为 0.0.4。

ECharts 已默认添加,如果不需要的可以手动删除。

4)开发插件

开发时用到的API以及示例详见“开发API”介绍。

5)build应用

在 webpack.config.js 和 webpack.config.production.js 两个文件里配置文件名称和结果。其中 exportsMap 是配置应用文件的数组,开发者新建一个应用只需要在后面添加即可。build 步骤如下:

①运行命令:npm run plugin-build-p生成用于发布的结果,将在result目录下生成需要的文件:配置的文件名称.js;还会生成一个.js.jar文件 在 jar文件夹下面,此文件用去后续编译打包

②将 build 之后的 jar 目录下的以 jar 为后缀的文件上传到应用市场:

先注册登录应用市场 http://plugins.yonghongtech.com/home

然后点击开发者应用打包。

AppMarket12

根据要求填写信息,上传 build 后的 jar 包,相关人员审核后会打包通过邮件发送应用包。

注意:

如果为个人开发者,无部署 ID,可以填写 20190302003DEPT 代替。

6)安装应用

进入产品-管理系统-应用管理,点击本地安装,选择应用包安装即可。

AppMarket13

7)使用应用

安装成功后,刷新编辑报告即可。

如果是组件类应用,不用重启tomcat就能看到新添加的应用显示在新建组件区域。

AppMarket14

上面是图表组件,下面是辅助组件,新安装的组件会在列表最后。

如果是其他类别应用,则根据具体应用功能而定,目前仅支持后台功能应用,暂不支持前端功能应用开发。

2.2 开发API

1)Hello World:

开发插件的示例:

import {register} from 'yh-plugin-manager';
import echarts from "echarts";

const plugin = {

         getProps: () => {}, //定义插件所需的属性

        getLocalView: (key) => {}, //定义本地化信息

        getBindInfo: () => {}, //定义插件所需的绑定信息

        render: (domName, props, grid, qinfo) => {}, //渲染组件

        clearAll: (domID) => {} //释放资源

}

register(plugin); // 注册组件

2)API:

① getProps

getProps: () => {},定义插件所需的属性。

参数:

无。

返回值:

Object[],插件所需要的属性组。属性可支持以下字段:

字段

类型

描述

type(必须)

String

定义属性的类型,支持的类型有:["number", "string", "color", "line", "integer", "boolean", "combo", "font", "param", "chartColor", "rotate", "alpha", "size"],其中类型combo属性也需要数组选项。大小写敏感。

key(必须)

String

定义属性的key

value(可选)

与type对应

定义属性的默认值

group(可选)

String

定义属性所属的组,多个属性作为组属性

option(可选)

Array

类型combo特有的属性,表示所有选项。

visible(可选)

Boolean

定义属性的可见性(8.7+)

position(可选)

pos

定义属性所在的位置(9.0+),可选值为:“setting”: 对应设置页, “format”: 对应格式页(默认值)  “graph”: 对应图形页

示例:

GetProps: () = {

  return

   [{

      type: ‘number',

      key: number1,

      value: 1.222

   },

    {

      type: ‘string',

      key: title,

      value: ‘标题’,

      group: ‘group1’

   },

    {

      type: ‘combo',

      key: ‘titlePosition’,

      value:‘标题位置’,

      option: [‘top’, ‘bottom’],

      group:‘group1’

   },

    {

      type:‘rotate',

      key: ‘xuanzhuan’,

      value: 0 (0, 1, 2, 3, 4, 5, 6, 7, 8)

   },

   {

      group: ‘titleOption’,

      type: COMBO,

      key: ‘titlePosition’,

      Value: ‘top’,

      position: GRAPH, //9.0+ support

      option: [‘top’, ‘bottom’]

   },

   {

      type: STRING,

      key: ‘_PLUGIN_EFFECT’,

      value: ‘PARAMETER’,

      visible: true //8.7+ support

   }]

}

② getLocalView

getLocalView: (key) => {} 定义本地化信息。

参数:

key,需要本地化的内容。定义local信息方式为key: object,根据key 获取object;

key对应于props中key, 可不完全定义,没有定义的表明为null,不渲染说明信息;object        是包含四种语言key的对象。

返回值:

Object,本地化信息。

字段

类型

描述

key(必须)

string

需要本地化的内容

示例:

getLocalView: (key) => {

  const LocalSetting = {

     "PluginName": {"zh_CN": "漏斗图", "en_US": "Funnel", "ja_JP": "漏斗图", "zh_TW": "漏斗图"},

     "title": {"zh_CN": "标题", "en_US": "Title", "ja_JP": "タイトル", "zh_TW": "标题"},

     "color": {"zh_CN": "颜色", "en_US": "Color", "ja_JP": "色彩", "zh_TW": "颜色"},

     "font": {"zh_CN": "字体", "en_US": "Font", "ja_JP": "文字", "zh_TW": "字体"},

     "line": {"zh_CN": "线", "en_US": "Line", "ja_JP": "线", "zh_TW": "线"},

     "border": {"zh_CN": "边框", "en_US": "Border", "ja_JP": "边框", "zh_TW": "边框"},

     "group1": {"zh_CN": "组1", "en_US": "group1", "ja_JP": "组1", "zh_TW": "组1"},

  }

  return LocalSetting[key];

}

③ getBindInfo

getBindInfo: () => {} , 定义插件所需的绑定信息,数据绑定只能绑定列,如果图表需要其它特殊形式的数据,需要提前准备好数据或在获取数据后自己转换数据结构。

参数:

无。

返回值:

包含三组列绑定信息和名称说明信息(名称信息V8.8支持):xcolumns,  ycolumns, zcolumns, zcolumnName(8.8+,对应的value为第三列即z列的名称);

字段

类型

描述

xcolumns

Array

定义x列,数值为列Object数组

ycolumns

Array

定义y列,数值为列Object数组

zcolumns

Array

定义z列,数值为列Object数组

zcolumnName

String

定义z列的名称(8.8+)

每个column数据列结构:

字段

类型

描述

index

Int

序号

localView

String

本地化key

isDiscreted

Boolean

绑定数据为离散,度量时转为聚合类型为空

isDim

Boolean

绑定的数据类型

isBindFree

Boolean

绑定列是否受重复列绑定的限制

示例:

getBindInfo: () => {

 return

   {xcolumns:

      [{

         index: 0,

         isDim: true

      }],

    ycolumns:

     [{

         index: 0,

         isDim: false

      }],

    zcolumns:

     [{

         index: 0,

         isDim: true

      }],

     zcolumnName: 'title' //8.8+ support

    };

}

④ render

render: (domName, props, grid, qinfo) => {},渲染组件。

参数:

domName - 插件渲染的dom id

props - 插件的props信息

grid - 插件绑定生成的数据信息

qinfo - 插件具体绑定信息

返回值:

无。

props中包含 getprops中信息:

width: // 插件宽(v8.5+)

height: // 插件高(v8.5+)

hasBg: // 插件是否有背景,null以及白色为不含有背景,图片与双色是有背景(v8.5+)

isFullScreen: // 是否全屏(v8.5+)

themeObj:// 主题信息(v8.7+)

themeColor:// 主题颜色(v8.7+)

isMobile:// 是否为移动端(v8.5+)

iOS: // 是不是ios操作系统(v8.8+)

elemName: // 组件名称(v8.7+)

model : // elem model 信息(v8.7+)

filter: (dimFilter, negative) => {}(v8.5+)

local: // 系统当前语言 (v8.5+)

firstMondy: // 是否一周从周一开始(v8.7+)

⑤ clearAll

clearAll: (domID) => {},用于手动释放资源。

参数:

domID - 插件渲染的dom id

返回值:

无。

⑥ register

register用于在模块中注册插件。

示例:

register(plugin);

⑦ isValid(仅用于8.5)

isValid(plugin) {},检查插件是否有效。

参数:

plugin - 生成的插件。

返回值:

插件是否有效。

⑧ getRegistered(仅用于8.5)

getRegistered(key) {}获取模块中的register插件。

3)功能性说明

① filter函数

插件可用过自身数据过滤影响其他组件,例如漏斗图通过图例选择进行数据过滤,props.filter函数接收一个数组,数组成员为键值对(<columnView: selectedKey>):

funnel.on('legendselectchanged', function (params) { //监听'legendselectchanged'事件
         const result = [];
         let view = qinfo.xcols[0].col.getView(false);
 
         if(params.selected) {
            for(let key in params.selected) {
               params.selected[key] && result.push([{[view]: key}]);
            }
         }
 
         if(result.length == 0) {
            result.push([{[view]: null}]);
         }
 
         props.filter(result); //过滤出选中的数据
      });

② 插件绑定数据说明

插件根据绑定的数据生成grid,grid类似于table数据,根据指定的行列可以获取对应的数据。可通过绑定同样的数据展示在table组件内进行参考:

AppMarket15

2.3 打包工具打包调试

开发好的插件可以使用永洪打包工具打包调试,您可以前往洪豆论坛-【公告】永洪插件打包工具下载使用。

以Windows环境举例:

1)使用快捷键Windows+R进入命令提示符,进入打包工具放置的目录

2)执行java -jar PluginPacketUtil.jar --help,可查看打包插件类型

AppMarket9

3)执行java -jar PluginPacketUtil.jar jarFullPath descDir pluginType

  jarFullPath:需要打包的jar包路径

  descDir:打包后插件放置路径

  pluginType:插件类型

  注意:

jar包名称需规范命名,不能包含空格、下划线等特殊字符,否则无法打包

  例如:

java -jar PluginPacketUtil.jar E:\未打包\Relation.jar E:\已打包\关系图.jar 1

AppMarket10

4)在对应文件夹可以找到成功打包的插件

AppMarket11

5)打包之后,在应用管理中安装最新jar包,制作报告时使用该组件即可查看新开发的功能效果。