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

原创
2019/09/25 20:07
阅读数 669

​最近很想和大家分享下,如何在FEA上利用ECharts进行图表封装(可能和FEA杠上了有关),于是以echart饼图插件为例尝试了下,具体实现步骤如下:

1、创建文件目录与配置空函数。 

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

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

4、数据配置规范。

5、说明文档配置规范。

6、插件的数据交互。(非必选项)

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

步骤一:准备工作

俗话说“磨刀不误砍柴工”,良好的开端是成功的一半。首先创建好文件目录,这里以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官方微信号,会有更多精彩的内容推荐。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部