1. DataEase 支持引入视图插件机制以提高系统可扩展性，本文介绍如何从零开始开发一个 DataEase 视图插件。  
  2. **注意：** 插件开发面向程序员，涉及到的技术有 Java 、Vue。

1 插件框架

1.1 获取框架

  1. 进入 GitHub 下载源码：https://github.com/dataease/dataease-extensions 。

1.2 安装依赖

  1. 如果能正常安装所有依赖则跳过此步骤，否则继续：  
  2. 插件框架依赖 dataease-extension-sdk，如果提示缺少这部分依赖，需要下载 sdk 源码手动安装。  
  3. sdk 源码地址：https://github.com/dataease/dataease-extension-sdk 。  
  4. 下载完成在根目录下执行：
  5. ```shell
  6. mvn clean install
  7. ```
  8. 完成后请再刷新插件框架 Maven 依赖。

1.3 运行测试

  1. 在插件框架根目录 dataease-extensions 下执行：  
  2. ```shell
  3. cd dataease-extensions-view/view-bubblemap/view-bubblemap-frontend
  4. npm i
  5. npm run dev
  6. ```
  7. 如下图所示，能正常运行说明框架没有问题。

view-bubblemap-frontend{ width=”900px” }

2 插件 demo

  1. 下面以 HighCharts 中 3D 饼图为例，详细描述如何使用插件框架开发一个 3D 饼图。

2.1 创建 demo 工程

  1. 使用 IDEA 创建 Maven 工程名为 view-3dpie，删除 src，修改 pom.xml 并增加如下配置。  
  2. **提示： 创建的 demo 工程可以是独立的，不是一定要在框架源码中创建。**

demo-pom{ width=”900px” }

  1. **前端代码：**  
  2. 如下示例图，在前面下载的插件框架中找到插件前端 demo ，整个文件夹复制到上步创建好的 view-3dpie 工程下，并重命名为 view-3dpie-frontend 。

view-bubblemap-frontend-dome{ width=”900px” }

  1. **修改 view-3dpie-frontend 目录下的 pom.xml 。**

view-3dpie-front-pom.png{ width=”900px” }

  1. **把修改完成的 pom 加载为 Maven 模块。**

maven{ width=”900px” }

  1. **修改 view-3dpie/pom.xml 建立父子级关系，注意一定是 frontend 在前。**

view-3dpie-pom2{ width=”900px” }

2.2 前端实现

  1. **图表类型：**  
  2. 在 src/view/ 新建 highcharts/3dpie 目录，在 3dpie/ 新建 type.vue，type 内容对应视图编辑界面中图表类型内容。

图表类型{ width=”900px” }

  1. type.vue 的内容可以直接复制视图插件框架中对应的气泡地图中的内容，修改下面内容，请注意这里的 value 和 label 。

type_vue{ width=”900px” }
type_vue2{ width=”900px” }

  1. **图表字段：**  
  2. 在 3dpie/ 新建 data.vue ，对应的图表字段选择。

图表字段{ width=”900” }

  1. data.vue 内容也可从气泡图复制过来再修改，一般的图表类型，如下示例图中的字段就可满足。  
  2. **注意：** 少数特殊类型的图表需自定义。

data_vue{ width=”900px” }

  1. **图表样式：**  
  2. 在 3dpie/ 新建 style.vue，对应视图编辑界面中图表样式内容。

图表样式{ width=”900” }

  1. DataEase 主工程中使用了两种图库，分别是 ECharts 和 AntV ,当前插件使用的是 HighCharts 图库。所以很多样式属性并不通用，这里需要插件内部自定义。

style_vue{ width=”900px” }

  1. **图表内容：**  
  2. 在 3dpie/ 新建 index.vue，这里为图表内容，具体实现参考代码。  
  3. **注意：** 在填充图表属性的过程中一定要把 DataEase 属性转换为对应图表属性。

index_vue{ width=”900px” }
3dpie_js{ width=”900px” }

  1. 代码完成后需要配置 webpack 插件打包，此配置可分别打包 Vue 成单独的 js 文件。

webpack.async-plugins{ width=”900px” }

2.3 后台实现

viewType{ width=”900px” }

  1. 图表类型关系到下图内容：

图表类型选择{ width=”900px” }

staticResources{ width=”900px” }
PluginViewParam{ width=”900px” }

  1. 后台这里有两个方法可重写以覆盖父类的默认实现（一般的图表类型无需重写）。

ViewPluginService_class{ width=”900px” }

  1. 父类的默认实现在 dataease-extensions-sdk 工程，可在 GitHub 搜索，分别是生成 sql 语句的实现、处理结果集的实现。

ViewPluginService_java{ width=”900px” }

2.4 打包测试

  1. **在根目录下执行：**
  2. ```shell
  3. mvn clean package
  4. ```
  5. 得到 view-3dpie-backend-1.0-SNAPSHOT.jar 与插件描述文件一起打包成 zip 格式。

package{ width=”900px” }

  1. **插件描述文件格式如下：**
  2. ```json
  3. {
  4.     "name": "xxxx 视图插件",
  5.     "store": "xxxx 公司",
  6.     "free": 0,
  7.     "cost": 0,
  8.     "category": "view",
  9.     "descript": "xxxx 插件，物超所值",
  10.     "version": "1.0-SNAPSHOT",
  11.     "creator": "your name",
  12.     "loadMybatis": 0,
  13.     "moduleName": "view-3dpie-backend",
  14.     "require": "1.9.0"
  15. }
  16. ```
name 插件名称（保证唯一）
store 您的公司名称
free 是否免费
cost 多少钱
category 插件类别
descript 描述
version 版本对应的后台工程版本
creator 作者
loadMybatis 是否使用 Mybatis
moduleName 模块名称对应后台工程模块名称
require 要求 DataEase 最低版本

2.5 安装插件

  1. **在【系统管理】插件管理安装插件，上传已打包的 plugin.zip 文件。**

安装插件{ width=”900px” }

  1. 安装成功后，在插件管理列表多一条记录，同时新建插件的类型选项也会多出一种类型。  
  2. **提示：** 如果页面没显示新的图表类型，请清除浏览器缓存重新登录。

图标类型选择{ width=”900px” }

3 注意事项

  1. **图表库：**  
  2. DataEase 内置了 ECharts 和 AntV 两种图库，如果您使用这两种图库作为视图插件扩展，无需额外引用图表库，可以直接使用，具体可参考气泡地图实现代码。
  5. **国际化：**  
  6. 在插件内部增加国际化内容如何映射到 DataEase 主工程中？可参考下图。

图表库{ width=”900px” }

  1. **类型图标：**  
  2. 在插件内部增加了图表类型的 icon 如何映射到 DataEase 主工程中?可参考下图。

类型图标{ width=”900px” }