VUE框架学习心得

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}/", data: paramObject, dataType: "json", success: function(data){ v.initData(data); v.drawPie ('container_${instId}'); } }); }

在mounted()方法中执行了VUE中methods()里的方法，上图执行了initData(data)和drawPie ('container_${instId}')的方法，这两个方法的作用分别是将后台返回的数据赋值给VUE对象的data属性中以及设置VUE对象的option属性展现出对应的图表，并加上重置的监听事件起到刷新组件的作用，其中设置option属性的代码如下所示：

this.chart.setOption({ tooltip : { trigger: 'item', formatter: "{a}
{b} : {c} ({d}%)" }, legend: { x: 'center', y: 'top', textStyle:{ color:'black' }, right: '75%', data: this.records.legend }, series : [ { name: '数据信息', type: 'pie', radius : '55%', color: ['#FFD85C', '#37A2DA', '#53CA53','#808000','#BDB76B','#FF4500'], center: ['50%', '60%'], data: this.records.series, itemStyle: { normal : { label : { position : 'outside', formatter : "{b}\n{c}万元" } }, emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] });

在配置组件联动的代码中使用了created()方法，此方法使用了公司封装好的$emit和$on方法，实现组件接收端和组件发送端之间的联动关系，通过事件联动的重置方法可以实现组件在联动时刷新组件的作用，代码如下所示：

created(){ eventBus.$on('refresh',function(eventTargetId){ $.ajax({ type: "post", url: "/dap/widget/${pageId}/${instId}/", data: paramObject, dataType: "json", success: function(data){ v.initData(data); v.resetGround(); } }) }); eventBus.$on('${attr.recEvent}',function(eventTargetId){ $.ajax({ type: "post", url: "/dap/widget/${pageId}/${instId}/", data: paramObject, dataType: "json", success: function(data){ v.initData(data); v.drawPie ('container_${instId}'); } }); }); eventBus.$on('resize',function(eventTargetId){ v.chart.resize(); }); },

也可以通过公司产品框架中已经封装好的代码实现组件之间的联动，代码展示为：

function emitEvent(eventKey,eventTarget){ eventBus.$emit(eventKey,eventTarget);}

在配置组件穿透过程中也使用到了公司框架的方法openTab('${linkMenuId}',{param.name})将需要传递的参数放到第二个参数中实现参数的传递，框架中的代码如下所示：

function openTab(menuId,param){ var reqURL = "/dap/index?MenuDataProvider&actionType=retrieveMenuInfo&menuId="+menuId; sendRequest(reqURL,{data:param,onComplete:function(resText){ if(resText != null && resText != 'inValid' && resText != '{}'){ var menuInfo = $.parseJSON(resText); var menuCode = menuInfo.menuCode; var navCode = menuInfo.navCode; var funcURL = "/dap/page/"+ navCode + "/"+menuCode+".html"; var fullURL = _attachParam(funcURL,param); var tabIndex = menuCode; var tabTitle = menuInfo.title; parent.doLoadTabIframe(fullURL,tabIndex,tabTitle); }else{ jAlert("你不具备访问权限, 请联系管理员! "); } }});}

2.功能介绍

在Echarts官网中可以查看到不同种类的Echart组件可实现不同数据结构的展现，展现形式包含柱形图、双柱图、饼状图、折线图和柱形折线图等，能够使用户对不同业务的数据进行更好的分析和观察，通过修改VUE框架的代码可以改变Echarts组件的样式和功能。

2.1组件介绍

在DAP产品所使用的饼状图组件、柱形图组件、双柱形图组件，柱形折线图组件、折线图组件以及地图组件等都支持各种业务数据结构的绑定。

柱形图组件包括legend、xAxis、yAxis和series关键属性，通过配置legend属性可以配置对应的图例信息，配置xAxis属性可以配置x轴的信息，series属性可以配置相关的纵轴展现值的信息，柱形图展现形式如下所示：

饼状图可以通过配置legend和series属性得到对应的图例值信息，饼状图展现形式如下：

双柱形图可以通过配置legend、xAxis和yAxis属性得到对应的图例信息、x轴的信息以及纵轴的两个对应值的信息，展现形式如下：

折线图所用的几个重要参数属性和柱形图一样，展现形式如下所示：

2.2组件样式

在调整DAP产品组件样式的过程中,我对大屏页面的公司营收滚动条样式进行了修改，在组件模板中对组件的样式进行如下修改：

::-webkit-scrollbar-thumb { background-color: #a1a3a9; border-radius: 3px; }

修改后的展现效果如下所示：

在修改大屏页面的项目运营组件的字体颜色样式过程中，将VUE代码的legend颜色进行了修改，效果如下所示：

对应的代码如下：

在调整组件标签的高度对齐时，需要注意其他标签样式的相互影响、css文件的引用以及父页面和子页面的影响，注意尽量不要将高度写死，使用封装的代码实现标签高度的灵活变化。

3.应用场景

Echarts组件和VUE框架一般应用于大数据技术生产的产品，使数据的展现形式变得更加清晰，近期工作中，我在DAP产品和IDM产品中使用到了Echarts组件和VUE框架的技术，并对统计分析和DAP的导航配置进行了图表的开发工作。

3.1功能应用

在Echarts官网中可以通过学习各种展现形式的Echarts组件实现不同数据结构的可视化展现，使用户对不同业务的数据进行更好的分析和观察应用，通过VUE框架的代码可以实现Echarts组件的多种属性功能，体现可视化技术的作用。

3.2注意事项

1.在修改组件资源的JS代码时，最好备份一份代码再进行修改，否则会撤回不到原来的代码，导致源代码丢失；

2.在DAP产品中配置组件时，要根据组件需要的数据格式进行数据集、立方体模型的绑定；

3.在配置组件联动的过程中，要在对应页面的页面参数内配置好关联参数的key值，再到组件配置中配置对应的value值；

4.在调整组件的样式过程中，优先在组件属性中配置，其次在VUE框架代码中配置；

5.在构建组件时，将一类组件配置同一个转换类才能在后台将它们共有的option属性的参数进行转换。

4.心得体会

本文介绍了我在学习echarts组件和VUE框架知识过程中掌握的技能技巧和了解到的注意事项，也介绍了DAP产品的组件如何配置，以及如何修改其样式，通过这些工作我了解到了DAP产品的主要作用以及其价值形态，在DAP产品中可视化展现效果是直接呈现在用户面前的，因此学会调整组件的样式和配置出符合业务逻辑的组件结构尤为重要。

接下来将介绍我在VUE框架学习和使用过程中掌握的做事方法、意识形态以及心得总结，在每一次工作的过程中，我都会掌握到新的做事方法和意识形态，这些对职场工作人员来说很重要，需要重点学习，学好这些知识可以帮助员工加强思维能力，让员工思考问题时变得更加严谨、准确，在职业生涯中走的更高更远。

4.1做事方法

在学习和使用VUE框架时学到了很多做事方法，主要有以下几点：

1.在配置DAP组件时要注意组件所需模型的数据结构，这样才能正确地将数据展现出来；

2.在工作过程中遇到不确定的因素时要及时向领导进行询问或者到公司内部的知识中心查阅资料，以免影响工作进度；

3.在执行领导交待的任务时，要采取最有效的解决方法去完成工作，如果觉得工作效果和效率不佳，要及时地向领导询问；

4.在工作过程中要勇于承担工作责任，不应将责任推卸给其他人；

5.在工作过程中不应过于追求速度，更应该追求工作质量，比如在做功能开发工作时要注意代码性能问题等。

4.2意识形态

意识形态是工作中很重要的一个因素，员工在工作时，正确的意识形态不但可以提升工作效率，还能使自己的思维方式得到进步。我在研发部门中的工作内容主要是功能开发，在开发工作中对需求和业务的理解很重要，功能开发时有些事项需要注意，比如注意去除无用代码和代码性能优化等问题。作为一名程序员，拥有丰富的工作经验和正确的意识形态可以帮助其减少工作失误、节省工作时间，使工作结果达到优秀的程度。

4.3心得总结

在VUE框架学习过程中，我掌握了关于echarts组件以及DAP产品可视化功能的知识，也提升了自己的技能水平，更重要的是我学习到了高效的做事方法和意识形态。在后续的工作中，会让我减少失误次数并提升自主找寻问题、解决问题的能力，不但节省领导的时间，也会使工作效果变得更好。

在工作中，我也遇到了一些困难和工作交互上的失误，比如在工作交互时由于推卸责任以及对需求理解不够深与其他人产生分歧、在遇到不确定的问题时没有及时询问等。为了改正这些不足，我会谨记团队合作的重要性，在工作中勇于承担工作责任，不将责任推卸给他人，在遇到不确定的问题时尽量选择自主解决，实在解决不了时则会向领导寻求帮助。

在未来的职业生涯中，我希望自己可以从一个职场小白慢慢走向成熟，再逐渐向带领团队的负责人方向发展，不断提升自己的知识面、技能和意识形态。在每次工作中，尽自己全力向领导交付一张让领导满意的答卷，也希望自己可以在职场中走的更高更远。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。