开发 echarts-react 图表组件
通过使用 echarts-react 图表组件，实现下面8种图表
设计思路
使用 echarts-for-react 组件实现 echarts-react 图表组件。
使用方法如下
组件包文件结构
组件开发完成，组件包文件结构如下图所示
- 上面是组件包的文件结构，组件下载到 ide 后，前端代码在 UI2/comp 目录下，服务端代码在 service/comp 目录下
- 一个组件包包括一个命名空间（和组件包同名）和一个（或多个）组件
- 一个组件包括设计时文件、编译时文件和运行时文件
- 组件使用的外部包放在命名空间的 lib 目录下
开发过程
新建组件
新建组件包 chart 、新建组件 Echarts、安装 echarts-for-react 组件，参考《创建组件包和组件》
配置组件名称、图标和模板
打开组件模板文件 UI2/comp/chart/components/Echarts/designer/Echarts.xml，如下图所示
- element 中的 text 是组件名称
- element 中的 icon 是组件图标
- 图片文件位于 UI2/comp/chart/components/Echarts/designer/img/line.jpg
- template 中的代码是组件模板
- 在页面添加组件后，模板是加在 w 文件中的代码
- 在模板中定义了组件默认的宽和高
在组件面板中显示
打开组件面板配置文件 UI2/comp/chart/components/chart.components.xml，如下图所示
- catalog 中的 name 是组件分类名称
- item 中的 device 属性声明组件所在端，本组件可跨端使用（桌面端和移动端），删除该属性
- item 中的 module 属性一般组件不需要，删除即可
切换到 chart 开发端后，点击 chart 组件包右侧的“更新配置文件”按钮，如下图所示。
更新后，切换到桌面端或移动端，在组件面板的高级分类中会显示出该组件
在设计器中显示
打开组件设计时 css 文件 UI2/comp/chart/components/Echarts/designer/css/echarts.css，定义样式如下，在设计器中显示一张图片。
将组件拖放到页面上，组件显示为一张图片。
配置组件属性
打开组件 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，因此需要使用双花括号 {{}} 存储
配置组件工具栏
打开组件 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 页面。
配置组件事件
打开组件 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，接收用户事件中修改的参数，代码如下：
在运行时显示
在组件运行时 js 文件 UI2/comp/chart/components/Echarts/Echarts.react.js 中，导入 echarts-for-react 和 echarts 两个包，代码如下
定义 render 方法，代码如下：
调试组件
- 切换到桌面端或移动端
- 在页面上添加图表组件、选择数据、设置图表
- 保存、预览
发布组件
导出组件包
切换到 chart 开发端，点击 chart 组件包右侧的导出按钮，如下图所示，导出 chart.zip 文件
上传市场并审核
进入控制台，打开“组件管理-组件发布”功能， 在发布组件页面中，输入组件包信息，上传组件包文件，点击提交审核按钮
控制台管理员 system 进入控制台，打开“组件管理-组件管理”功能，点击审核中或更新审核中，显示出提交待审核的组件，点击审核按钮，再点击通过按钮
打开应用，添加市场组件，可以看到图表组件
至此，图表组件开发完毕