开发echarts-pro图表组件
运行效果
通过使用echarts-pro图表组件，实现下面8种图表
设计思路
使用 echarts-for-react 组件实现echarts-pro图表组件。
使用方法如下
组件包文件结构
- 上面是组件包的文件结构，组件下载到ide后，前端代码在 UI2/comp 目录下，服务端代码在 service/comp 目录下
- 一个组件包包括一个命名空间（和组件包同名）和一个（或多个）组件
- 一个组件包括设计时文件、编译时文件和运行时文件
- 组件使用的外部包放在命名空间的lib目录下
开启组件开发功能
切换到高级页面，点击“开启组件开发”，如下图所示
组件包开发过程
1 新建组件包
复制一个组件包，修改里面的文件名和文件内容，注意大小写。
本例复制 UI2/comp/antdpro 组件包目录为 UI2/comp/chart，保留antdpro命名空间目录，删除其他组件目录，修改目录中所有文件名及文件内容，将antdpro改为chart，将Antdpro改为Chart。
2 导入react组件使用的外部包
安装 echarts-for-react 组件，将 node_modules 目录下 echarts 组件使用的包，复制到 UI2/chart/components/chart/lib/node_modules 目录下，UI2/chart/components/chart/lib 目录下的 __module.js 文件是一个标志文件，必须有，表示这里有外部包。
3 服务端编译
react系列组件一般不需要写服务端编译文件，即server目录下的文件。但是作为组件必须有服务端编译文件，因此在命名空间中定义服务端编译文件，所有组件使用命名空间的服务端编译文件。这些java文件需要通过编译生成classes文件。
命名空间中的服务端编译文件在 UI2/comp/chart/components/chart/server 目录下，里面有src和dsrc，需要编译生成classes和dclasses。编译java文件需要使用本地ide，步骤如下：
- 进入本地ide，打开eclipse
- 导入UI2目录
导入项目-选择通用-已存在的项目
选择model/UI2目录
- 配置构建路径，删除出错的包，重新引入正确的包
打开构建路径配置界面，删除出错的包
引入 apache-tomcat-8.5\lib\servlet-api.jar
引入 apache-tomcat-8.5\webapps-system\x5\WEB-INF\lib 下的3个jar：commons-io-2.11.0.jar、commons-compress-1.21.jar、fastjson-1.2.29.sec10.jar
- 设置源码路径
在 UI2/comps/chart/components/chart/server 目录上点右键，点击设置src、dsrc为源码路径，如下图所示
再将下面的4个目录设置为源码路径 UI2/wxsys/comps/common UI2/wxsys/comps/reactContainer/server UI2/system/resources UI2/system/service/meta
设置后，效果如下图所示
经过上面的步骤，java文件已经编译完成，classes和dclasses目录下分别编译出class文件。
组件开发过程
1 新建组件
复制一个组件目录，修改里面的文件名和文件内容，注意大小写
本例复制 UI2/comp/antdpro/components/Button 组件目录为 UI2/comp/chart/components/Echarts，修改目录中所有文件名及文件内容，将button改为echarts，将Button改为Echarts。
2 配置组件名称、图标和模板
打开组件模板文件 UI2/comp/chart/components/Echarts/designer/Echarts.xml，如下图所示
- element中的text是组件名称
- element中的icon是组件图标
- 图片文件位于 UI2/comp/chart/components/Echarts/designer/img/line.jpg
- template中的代码是组件模板
- 在页面添加组件后，模板是加在w文件中的代码
- 在模板中定义了组件默认的宽和高
3 在组件面板中显示
打开组件面板配置文件 UI2/comp/chart/components/chart.components.xml，如下图所示
- catalog中的name是组件分类名称
- item中的device属性声明组件所在端，本组件可跨端使用（企业桌面端和移动端），删除该属性
- item中的module属性一般组件不需要，删除即可
切换到chart开发端后，点击chart组件包右侧的“更新配置文件”按钮，如下图所示。
更新后，切换到企业桌面端或移动端，在组件面板的高级分类中会显示出该组件
4 在设计器中显示
打开组件设计时css文件 UI2/comp/chart/components/Echarts/designer/css/echarts.css，定义样式如下，在设计器中显示一张图片。
将组件拖放到页面上，组件显示为一张图片。
5 配置组件属性
打开组件meta文件 UI2/comp/chart/components/Echarts/Echarts.meta.json，定义5个属性，如下图所示
- 在properties中定义属性
- 所有属性都需要定义
- 不显示的属性不定义label
- bind:options和bind:optionsFilter是两个特殊的属性
- bind:options用来选择页面上的数据集组件
- bind:optionsFilter用来设置过滤条件
- 在react.js中可通过this.getOptions();获取到过滤好的数据
- option属性中存储的json会包括function，因此需要使用双花括号{{}}存储
6 配置组件工具栏
打开组件meta文件 UI2/comp/chart/components/Echarts/Echarts.meta.json，定义一个设置图表按钮，如下图所示
- 在toolbar中定义工具栏按钮
- text是按钮上的文字
- method是组件设计时js文件中的方法名
- 点击按钮就是调用js方法
在 UI2/comp/chart/components/Echarts/designer/Echarts.js 文件中定义editOption方法。该方法打开 UI2/comp/chart/components/Echarts/designer/dialog/chartConfig.w 页面（该页面使用PC经典端开发），将页面返回的内容写入w页面。
7 配置组件操作和方法
打开组件meta文件 UI2/comp/chart/components/Echarts/Echarts.meta.json，定义一个显示图表的操作，如下图所示
- 在operations中定义操作
- label是分类名称
- items里面的label是操作名称
- items里面的name是组件运行时js文件中的方法名
- 调用操作就是调用js方法
在 UI2/comp/chart/components/Echarts/Echarts.react.js 文件中定义showChart方法，这是组件的方法，也是组件的操作调用的方法。
8 配置组件事件
打开组件meta文件 UI2/comp/chart/components/Echarts/Echarts.meta.json，定义2个事件，如下图所示
- 在events中定义事件
- events中的节点是事件名称
- label是事件中文名称
- data是参数名称
- detail是参数event.detail的描述
- cancelable是是否可取消
在 UI2/comp/chart/components/Echarts/Echarts.react.js 文件中定义事件参数 beforeSetOptionEvent，派发事件 fireEvent，接收用户事件中修改的参数，代码如下：
9 在运行时显示
在组件运行时js文件 UI2/comp/chart/components/Echarts/Echarts.react.js 中，导入echarts-for-react和echarts两个包，代码如下
定义render方法，代码如下：
10 调试组件
- 切换到企业桌面端或移动端
- 在页面上添加图表组件、选择数据、设置图表
- 保存、预览
11 导出组件包
切换到chart开发端，点击chart组件包右侧的导出按钮，如下图所示，导出chart.zip文件
12 上传市场并审核
进入控制台，打开组件市场功能，点击上传组件按钮，再点击上传按钮，输入组件包信息，上传组件包文件，点击提交审核按钮
控制台管理员system进入控制台，打开审核授权-组件上架审核功能，点击审核中或更新审核中，显示出提交待审核的组件，点击审核按钮，再点击通过按钮
打开应用，添加市场组件，可以看到图表组件
至此，图表组件开发完毕