开发echarts-vue图表组件
运行效果
通过使用echarts-vue图表组件，实现下面8种图表
设计思路
使用 echarts-for-vue 组件实现echarts-vue图表组件。
使用方法如下图所示，网站上给出的是Template语法，后面会转成JSX语法。
组件包文件结构
- 上面是组件包的文件结构，组件下载到ide后，前端代码在 UI2/comp 目录下，服务端代码在 service/comp 目录下
- 一个组件包包括一个命名空间（和组件包同名）和一个（或多个）组件
- 一个组件包括设计时文件、编译时文件和运行时文件
- 组件使用的外部包放在命名空间的lib目录下
开启组件开发功能
切换到高级页面，点击“开启组件开发”，如下图所示
组件包开发过程
1 新建组件包
切换到页面设计区，点击组件包管理后面的加号按钮，弹出选择向导模板对话框
选择antdv组件包模板
组件包名输入chartv，组件包显示名输入echarts图表vue
确定后生成组件包，并切换到新建的组件包
2 设置组件包为编辑模式
切换到代码，打开UI2/chartv/package.json文件，把其中的version改为__version
3 导入vue组件使用的外部包
安装 echarts-for-vue 组件，将 node_modules 目录下 echarts 组件使用的包，复制到 UI2/chartv/components/chartv/lib/node_modules 目录下，UI2/chartv/components/chartv/lib 目录下的 __module.js 文件是一个标志文件，必须有，表示这里有外部包。
组件开发过程
1 新建组件
点击chartv右侧的加号按钮，弹出选择向导模板对话框
在组件模板中选择可视组件
在组件名称中输入Echarts，在组件显示名称中输入图表，组件分类选择高级。
确定后生成组件
2 配置组件名称、图标和模板
打开组件模板文件 UI2/comp/chartv/components/Echarts/designer/Echarts.xml，如下图所示
- element中的text是组件名称
- element中的icon是组件图标
- 图片文件位于 UI2/comp/chartv/components/Echarts/designer/img/line.jpg
- template中的代码是组件模板
- 在页面添加组件后，模板是加在w文件中的代码
- 在模板中定义了组件默认的宽和高
3 在组件面板中显示
打开组件面板配置文件 UI2/comp/chartv/components/chartv.components.xml，如下图所示
- catalog中的name是组件分类名称
- item中的device属性声明组件所在端，本组件在企业桌面端中使用
- item中的module属性一般组件不需要，删除即可
切换到chartv开发端后，点击chartv组件包右侧的“更新配置文件”按钮，如下图所示。
更新后，切换到企业桌面端，在组件面板的高级分类中会显示出该组件
4 在设计器中显示
打开组件设计时css文件 UI2/comp/chartv/components/Echarts/designer/css/echarts.css，定义样式如下，在设计器中显示一张图片。
将组件拖放到页面上，组件显示为一张图片。
5 配置组件属性
打开组件meta文件 UI2/comp/chartv/components/Echarts/Echarts.meta.json，定义5个属性，如下图所示
- 在properties中定义属性
- 所有属性都需要定义
- 不显示的属性不定义label
- bind:items和bind:filter是两个特殊的属性
- bind:items用来选择页面上的数据集组件
- bind:filter用来设置过滤条件
- option属性中存储的json会包括function，因此需要使用双花括号{{}}存储
6 配置组件工具栏
打开组件meta文件 UI2/comp/chartv/components/Echarts/Echarts.meta.json，定义一个设置图表按钮，如下图所示
- 在toolbar中定义工具栏按钮
- text是按钮上的文字
- method是组件设计时js文件中的方法名
- 点击按钮就是调用js方法
在 UI2/comp/chartv/components/Echarts/designer/Echarts.js 文件中定义editOption方法。该方法打开 UI2/comp/chartv/components/Echarts/designer/dialog/chartConfig.w 页面（该页面使用PC经典端开发），将页面返回的内容写入w页面。
7 配置组件操作和方法
8 配置组件事件
打开组件meta文件 UI2/comp/chartv/components/Echarts/Echarts.meta.json，定义1个事件，如下图所示
- 在events中定义事件
- events中的节点是事件名称
- label是事件中文名称
- data是参数名称
- detail是参数event.detail的描述
- cancelable是是否可取消
在 UI2/comp/chartv/components/Echarts/Echarts.react.js 文件中定义事件参数 beforeSetOptionEvent，派发事件 fireEvent，接收用户事件中修改的参数，代码如下：
9 在运行时显示
在组件运行时js文件 UI2/comp/chartv/components/Echarts/Echarts.vue 中，导入echarts-for-vue和echarts两个包，代码如下
定义render方法，代码如下：
10 调试组件
- 切换到企业桌面端
- 在页面上添加图表组件、选择数据、设置图表
- 保存、预览
11 导出组件包
切换到chartv开发端，点击chartv组件包右侧的导出按钮，如下图所示，导出chartv.zip文件
12 上传市场并审核
进入控制台，打开组件市场功能，点击上传组件按钮，再点击上传按钮，输入组件包信息，上传组件包文件，点击提交审核按钮
控制台管理员system进入控制台，打开审核授权-组件上架审核功能，点击审核中或更新审核中，显示出提交待审核的组件，点击审核按钮，再点击通过按钮
打开应用，添加市场组件，可以看到图表组件
至此，图表组件开发完毕