VUE框架学习心得

在数通畅联的DAP数据分析平台中用到了可视化展现的Echarts组件，Echarts组件用到了VUE框架的代码知识。在近期工作中，我多次学习并使用到了VUE框架的代码知识。在大数据技术蓬勃发展的时代下，将庞大的数据量进行图形化展现非常重要，因此学好Echarts和VUE框架的知识尤为重要。

在使用VUE框架时，我了解了Echarts组件的穿透代码、用于展现组件图表的代码及初始化数据的代码等，其中各个Echart组件之间的数据联动可以让客户更加了解业务数据之间的关系，公司的框架中已将$emit和$on的原生方法封装，使用户更好的实现对组件之间联动的配置。

1.整体介绍 

本文将对Echarts和VUE框架知识的学习进行详细介绍，另外由于对工作过程中使用到的DAP产品中很多组件及其样式进行了调整，因此还将对DAP产品的部分组件及在使用组件的过程中需要注意的事项进行详细介绍。 

1.1Echarts学习

在Echarts官网中可以查看到许多组件的构成代码，其中折线图的图形化展现形式如下所示： 

在DAP产品中，可以通过将数据集和立方体模型绑定到已经创建好的Echarts组件上实现对业务数据的可视化展现，在预置数据过程中，我实现了对DAP（WEB端）首页的组件配置页面，其中用了饼状图、折线图等组件，部分页面展现形式如下所示：

在DAP产品中，可以通过配置组件穿透实现对业务数据明细信息的查看，在配置数据分析平台（Web）过程中，我配置了二级穿透和三级穿透，通过树形组件和多功能表格实现组件之间的业务关联，这种方式可以让用户更清楚的了解到业务数据之间的关系是什么样的。

在配置云生地产经营大屏过程中，我使用到了地图组件和表格组件，这些配置使用户能够更直观的了解到全国各地数据情况信息，具体展现形式如下所示：

1.2VUE框架学习

在VUE框架的学习过程中，我接触到了DAP产品的组件模板，在组件模板中配置承载组件的div标签，并用jQuery框架配置了对应的组件实例容器id、图id以及组件的样式属性等信息。

在组件资源的js代码中配置了VUE框架的代码，在加载成功页面时会创建出组件模板的div标签，使用Ajax异步加载的方式将组件实例的数据返回给组件实例，其中使用VUE框架中mounted()方法构建VUE对象，之后自动装载此方法中的程序实现Ajax的数据转换，代码如下所示：

mounted(){
			$.ajax({
				type: "post",
				url: "/dap/widget/${pageId}/${instId}/&#