手把手教你如何在FEA上进行ECharts图表封装

​最近很想和你们分享下，如何在FEA上利用ECharts进行图表封装（可能和FEA杠上了有关），因而以echart饼图插件为例尝试了下，具体实现步骤以下：

一、建立文件目录与配置空函数。 

二、echart图表高级参数的抽离。

三、配置高级参数默认值。

四、数据配置规范。

五、说明文档配置规范。

六、插件的数据交互。（非必选项）

七、缩略图的添加与文件上传。

步骤一：准备工做

俗话说“磨刀不误砍柴工”，良好的开端是成功的一半。首先建立好文件目录，这里以t08为例，t08.js文件中添加一个空函数，此函数需配置myChart、ckey、height、width、div与res这6个参数，具体参数做用以下：

• myChart为echart初始化的dom元素；

• ckey为两种可能，一种是该ssdb的key或是该ssdb的key的df数据；

• height为该插件的高度；

• width为该插件的宽度；

• div为该插件的dom元素；

• res为该插件的高级参数，其中参数顺序固定不可更改；

具体内容详见《FEA第三方插件开发指南》第一节、第二节。

步骤二：高级参数抽离

高级参数的抽离：提取除了配置中的data，一些包括样式及标题等配置项。

具体内容详见《FEA第三方插件开发指南》第三节。

步骤三：配置高级参数

高级参数默认值配置效果以下：

注：第一级为左侧的分类，第二级为顶部的小分类，第三级为具体内容。即参数配置层级需在三级及三级以上才能配置。

具体内容详见《FEA第三方插件开发指南》第四节。

步骤四：数据配置规范

默认数据的第一行第一列为index不可修改。具体data_t08.csv抽离后的数据格式.

具体内容详见《FEA第三方插件开发指南》第五节。

步骤五：说明文档配置规范

文件名称：explain_t08.json。

格式:”列名”:”对这列的描述”,描述中带有&&表示换行显示。

具体内容详见《FEA第三方插件开发指南》第六节。

步骤六：缩略图的添加与上传

img文件夹为该插件所使用到的图片，其中该插件的编号加.png为该插件在图表选择里面的缩略图例如t08.png。最终实现效果以下所示：

具体内容详见《FEA第三方插件开发指南》第八节。

步骤七：插件的数据交互

因为插件交互部分并非用户必填内容，因此在这里就不详细介绍，有感兴趣的用户可参考《FEA第三方插件开发指南》第七节。

到此有关ECharts图表封装的介绍就结束了，是否是感受尚未尽兴，尚未学够，不要着急。对于数据可视化咱们是专业的，固然服务也是最贴心的，《FEA第三方插件开发指南》的文档咱们已经为你献上，输入网址：http://60.191.16.186:9001/workspace/echart_course.pdf便可获取完整文档。若是还想成为Echart界的大咖，关注openfea官方微信号，会有更多精彩的内容推荐。