亿信ABI

一站式数据分析平台

ABI(ALL in one BI)是亿信华辰历经17年匠心打造的国产化BI工具,技术自主可控。它打通从数据接入、到数据建模与处理、再到数据分析与挖掘整个数据应用全链路,可满足企业经营中各类复杂的分析需求,帮助企业实现高效数字化转型。

亿信ABI

一站式数据分析平台

亿信华辰深耕商业智能十多年,
打造一体化的填报、处理、可视化平台。

数据分析之组件制作,助你自制炫酷的可视化效果

时间:2019-09-27来源:亿信华辰浏览数:1136

“授人以鱼,不如授人以渔”,这句话语出《淮南子·说林训》。道理很简单,鱼是目的,钓鱼是手段,一条鱼能解一时之饥,却不能解长久之饥,如果想永远有鱼吃,那就要学会钓鱼的方法。各位小伙伴看多了各种或奇特或绚丽或强大的组件,怕是早就心痒痒,蠢蠢欲动了。只能欣赏怎么行,今天就要给大家传授如何用亿信ABI制作各种组件!

亿信ABI是亿信华辰深耕商业智能领域十多年,自主研发的一款融合了数据源适配、ETL数据处理、数据建模、数据分析、数据填报、工作流、门户、移动应用等核心功能而打造的全能型数据分析平台,可灵活满足各类复杂需求。

 


第一步:分析组件

分析组件,做组件之前,应该是已经存在设计图,你可以清楚的知道你将要实现一个什么样的组件,具有怎么样的功能。思考一下使用什么方式去实现。

举个简单的例子,全篇会围绕这个这个例子展开。如下图所示:

 

经过分析通过echarts.js可以实现,有一个不规则形状的柱形图和时间轴。下面进入知识储备阶段。

第二步:了解组件相关重要知识

要学会制作一个组件,当然要对它进行一个基础的了解才能在制作时游刃有余呢。下面我们来了解组件的组成部分,如图所示


1、取数定义:定义组件需要的默认数据以及数据格式。

2、属性:添加自定义的属性。比如添加自定义的autoplay属性,在组件里实现逻辑控制以后,就可以通过在属性面板操作,改变组件。

 

3、预览:可以在制作组件的过程中,边写边查看效果

4、源代码:写静态的html代码。

5、default.js:写组件创建的脚本。js部分有几个重要的函数:

1) init(cwidget, vardata, events, storagedata, resources:组件是创建时会执行init函数,cwidget是该组件对象,vardata以json的格式存储取数,events以json的格式存储用户在右边属性上设置的事件,storagedata以字符串格式储存组件自己需要存储的值,resources以json的格式存储资源及权限校验信息.

2) setProperty(key, value, cwidget):当属性面板发生变化时,想要组件应该做相应的改变,则实现该方法。key为属性名称,value是当前的值,cwidget是组件对象。

 

3) refreshDatas(cwidget, vardata, storagedata):刷新操作,数据改变时,调用该方法,重新渲染数据。

4) resize(cwidget): 组件大小改变时执行,通过实现resize()方法,使得组件自适应。

5) dispose(cwidget): 销毁操作,销毁自己相关的东西。


6、defalut.css:写组件需要的样式表。

备注:如果需要添加脚本或者样式表可以点击加号添加。


第三步:实际操作

哇,终于来到了实际操作部分,此时的你是头昏脑胀还是信心十足呢?话不多说,我们愉快的开始酷屏制作吧!

1、分析数据格式和需要开放的属性接口。

 

以该组件为例:需要x轴数据,数据格式定为一维数组;需要y轴数据,数据格式定为多维数组;需要时间轴数据,数据格式定为一维数组;

 

需要开放的属性:是否自动播放属性,播放时间间隔属性。

 

2、组件自身的实现,包括静态html,js,css,以本例讲解。

html部分:本例不需要其他html,只需要提供一个父节点。

css部分:父节点百分百撑满容器。


js:创建组件的动态脚本,使用第三方js时,通过EUI.include(“js文件路径”)引入进来。这个例子,js实现步骤:

1、获得echart实例

2、获得echart需要的option参数;

3、调用echart的setOption(option)方法;

4、实现setProperty方法,某一项发生变化就实现响应的动作。

 


5、实现resize()方法,使组件可以自适应,本例只需要调用echart实例的resise()方法。

 


6、实现refreshDatas(),即在数据发生变化时,执行重新渲染组件的操作。

 


7、最后实现dispose方法,销毁组件相关东西。

 


组件制作的全过程就都在这里了!你get到了吗?欢迎一遍又一遍的细读哦!

(部分内容来源网络,如有侵权请联系删除)
立即申请数据分析/数据治理产品免费试用 我要试用
产品功能
效果炫酷

内置近百种炫酷组件和3D特效,只有想不到,没有酷屏做不到

开发周期短

提供丰富二次开发接口,组件更新无需重启,周期短、见效快

响应快速

支持动态局部刷新,秒级响应,操作流畅无卡顿

自由布局

拖拽式自由布局,所见即所得的开发体验

操作便捷

内置丰富组件和模板,酷屏制作像拼图一样简单

动态交互

支持钻取、联动等分析功能,动态剖析数据,助力用户决策

customer

在线咨询