echart实例数据 本地加载_数据分析之组件制作，助你自制炫酷的可视化效果

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

第一步：分析组件

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

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

经过分析通过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到了吗？欢迎一遍又一遍的细读哦！