“授人以鱼，不如授人以渔”，这句话语出《淮南子·说林训》。道理很简单，鱼是目的，钓鱼是手段，一条鱼能解一时之饥，却不能解长久之饥，如果想永远有鱼吃，那就要学会钓鱼的方法。各位小伙伴看多了各种或奇特或绚丽或强大的组件，怕是早就心痒痒，蠢蠢欲动了。只能欣赏怎么行，今天就要给大家传授如何制作各种组件！第一步：分析组件分析组件，做组件之前，应该是已经存在设计图，你可以清楚的知道你将要实现一个什么样的组件，具有怎么样的功能。思考一下使用什么方式去实现。举个简单的例子，全篇会围绕这个这个例子展开。如下图所示：经过分析通过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到了吗？欢迎一遍又一遍的细读哦！亿信ABI是亿信ABI作为亿信华辰自主研发的一款全能型数据分析产品，在丰富的数据分析挖掘、报表处理等经验基础上，融合了数据源适配、ETL数据处理、数据建模、数据分析、数据填报、工作流、门户、移动应用等核心功能而打造的全能型数据分析平台。
转载请注明：http://www.aierlanlan.com/rzfs/9059.html
