2023年6月30日发(作者：)

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){ ta(data);

e ('container_${instId}');

} }); } 在mounted()⽅法中执⾏了VUE中methods()⾥的⽅法，上图执⾏了initData(data)和drawPie ('container_${instId}')的⽅法，这两个⽅法的作⽤分别是将后台返回的数据赋值给VUE对象的data属性中以及设置VUE对象的option属性展现出对应的图表，并加上重置的监听事件起到刷新组件的作⽤，其中设置option属性的代码如下所⽰： ion({ tooltip : { trigger: 'item', formatter: "{a}
{b} : {c} ({d}%)" }, legend: { x: 'center', y: 'top', textStyle:{ color:'black' }, right: '75%', data: }, series : [ { name: '数据信息', type: 'pie', radius : '55%', color: ['#FFD85C', '#37A2DA', '#53CA53','#808000','#BDB76B','#FF4500'], center: ['50%', '60%'], data: , 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){ ta(data); round(); } })

}); eventBus.$on('${nt}',function(eventTargetId){ $.ajax({ type: "post", url: "/dap/widget/${pageId}/${instId}/", data: paramObject, dataType: "json", success: function(data){ ta(data);

e ('container_${instId}');

} });

}); eventBus.$on('resize',function(eventTargetId){ (); }); },也可以通过公司产品框架中已经封装好的代码实现组件之间的联动，代码展⽰为：function emitEvent(eventKey,eventTarget){ eventBus.$emit(eventKey,eventTarget);}在配置组件穿透过程中也使⽤到了公司框架的⽅法openTab('${linkMenuId}',{})将需要传递的参数放到第⼆个参数中实现参数的传递，框架中的代码如下所⽰：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 = de; var navCode = e; var funcURL = "/dap/page/"+ navCode + "/"+menuCode+".html"; var fullURL = _attachParam(funcURL,param); var tabIndex = menuCode; var tabTitle = ; TabIframe(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产品可视化功能的知识，也提升了⾃⼰的技能⽔平，更重要的是我学习到了⾼效的做事⽅法和意识形态。在后续的⼯作中，会让我减少失误次数并提升⾃主找寻问题、解决问题的能⼒，不但节省领导的时间，也会使⼯作效果变得更好。

在⼯作中，我也遇到了⼀些困难和⼯作交互上的失误，⽐如在⼯作交互时由于推卸责任以及对需求理解不够深与其他⼈产⽣分歧、在遇到不确定的问题时没有及时询问等。为了改正这些不⾜，我会谨记团队合作的重要性，在⼯作中勇于承担⼯作责任，不将责任推卸给他⼈，在遇到不确定的问题时尽量选择⾃主解决，实在解决不了时则会向领导寻求帮助。在未来的职业⽣涯中，我希望⾃⼰可以从⼀个职场⼩⽩慢慢⾛向成熟，再逐渐向带领团队的负责⼈⽅向发展，不断提升⾃⼰的知识⾯、技能和意识形态。在每次⼯作中，尽⾃⼰全⼒向领导交付⼀张让领导满意的答卷，也希望⾃⼰可以在职场中⾛的更⾼更远。