DAP数据分析平台应用非常广，无论是软件公司还是传统的企业都需要进行数据分析。企业的产品，人员出现的问题往往都隐藏在一大堆复杂且信息种类繁多的数据里，如果没有强大的软件来处理这些数据，就需要人为进行整理和提炼，而这些DAP就可以做到。DAP能快速整合数据，抓住数据之间的关联信息以及内在规律，反馈成精美的图表。在实际应用中，图表可以使人们更直观地做出判断，以便采取适当的改变。

在学习DAP组件的过程中，对组件的css和js进行了修改，也添加了一些组件功能，美化了组件样式，也学习了对于自己来说较为新颖的知识，比如传值和Echarts作图，收获了一些学习组件的心得记录下来，方便日后的学习和巩固。

整体概述

DAP通过配置ODS数据源创建出表格，用户通过在数仓当中创建维表或事实表来整理分类数据，通过模型来把几个表的数据或分类整合成一个模型，再通过立方体分析数据，比如计数，或计算平均值等，总结出来的数据通过一个一个组件立体化的形式展示给用户。而DAP组件能够比文字更简洁地描述出我们所想要表达的内容。我们可以通过DAP组件图表很好地将一些事物中隐藏的联系进行关联，使我们能够发现众多数据中的隐藏信息。使用DAP组件还能够让我们的数据内容更加严谨，使我们的数据可信度更高。

1.产品介绍

在DAP系统的导航管理模块中可以创建多个页面，在里面运用vue知识把页面分成12个等分，开始的大容器共占12份，之后可以在大容器中分解出3：3：3等分，或者5：2：5等分，或者6：6分。接下来就可以在对应的容器中添加配置多种组件，这些组件便是用于展示数仓中数据的工具，其中有卡片组件、营收组件、基础饼图、查询框、树型检索组件等组件，每个组件包含基本信息、组件模板代码、js代码、属性、默认数据等信息，在配置组件所需数据时可以通过配置组件功能将数据集或立方体绑定组件属性字段，实现通过组件展现数据的目的。

2.Vue介绍

身为技术人员在编写前端代码的时候时常会因为div之间的嵌套关系和怎么去安排页面布局头疼，有了前端框架之后就可以快速搭建出来一个简单大方的前端页面，而Vue就是一个开源JavaScript前端框架，能够开发单页面应用程序。它还可以用作Web应用程序框架，目的在于简化Web开发。它的流行有很多原因，其中一个关键原因是它能够在没有任何动作的情况下重新渲染，它允许构建重用，是一个小巧但功能强大的组件，而且允许我们在需要时随时添加组件。

3.工具介绍

Echarts的优点比较明显：体积小、免费、上手快，只需要有一些js基础，和了解设置表格组件的一些属性，剩下的就是重复操作，而且是国产的插件，学习文档看起来也比较方便，方便我们为数据和图表之间建立联系。在学习修改DAP数据分析平台的组件时也自学了Echarts、Hbliud，并且学会了如何绘画出一个动态折线图，如下所示。

首先把jquery和echart文件引入页面：

然后需要设置容器来存放图表和数据:

明确横坐标和竖坐标分别对应哪一个数据：

基于准备好的dom，初始化echarts实例：

以下是效果展现：

基础组件

我们常见的基础组件有柱形组件，折线图组件，饼状图组件，下面我将逐一讲解他们的配置、传值和展现。

1.柱形组件

柱状图适用于二维数据集，能够清晰地比较两个维度的数据。由于视觉对高度之间的差异感知较为敏感，柱状图利用柱子之间的高度来反映数据之间的差异，它的优势是利用柱子的高度反映数据的差异，使得肉眼对比高度差异较为明显。

在柱形图配置中，关于样式的修改很少，我们大部分的修改都是在js代码中。在组件模板中可以通过height: ${attr.height}px结合属性配置，完成相同组件在不同主题中配置不同的高、上边距、颜色等：

配置html样式和组件属性：

首先取到默认数据中的值：

然后初始化Echarts实例：

然后点击数据，拼出X轴和Y轴的数据，并对X轴和Y轴进行基础设置，比如type: 'category'，设置x轴文本标签axisPointer，对Y轴进行设置，是否展示、颜色等：

DAP数据分析平台有很多不同样式的柱形图组件，有双周柱形图，横向柱形图，基础柱形图，坐标图表等，其中应用最多的是基础柱形图。

2.折线组件

DAP数据分析平台折线组件用折线的起伏表示数据的增减变化情况，不仅可以表示数量的多少，而且可以反映数据的增减变化情况。表示现象间的对比关系、揭露总体结构、检查计划的执行情况、揭示现象间的依存关系、反映总体单位的分配情况、说明现象在空间上的分布情况。Echarts采用直角坐标系。横坐标用来表示事物的组别或自变量xAxis，纵坐标常用来表示事物出现的次数或因变量yAxis。

折线图组件可以通过JS来改变前端样式，也可以通过属性来设置组件的样式，可以设置高度和字体颜色，y轴代表的值，也可以选择新增属性连接js当中的属性设置。

然后初始化Echarts实例：

对此图表选项设置，其中可以设置工具，当trigger为’item’时只会显示该点的数据，为’axis’时显示该列下所有坐标轴所对应的数据。设置图例文字样式legend:{textStyle:{color:'${attr.textColor}'，在setOption中对xy轴进行设置:

一般情况下写一个组件都要在series中写出来，而现在需要动态生成组件，要把各种属性都存放在chartSeries中，需要通过for语句去循环值：

用双线折线图举例不仅一眼就可以看出自身的数值变化，还可以直观地和cost做出对比，还可以分析接下来的走势。每个节点中间有详细信息，点击就可以穿透到由表格组件统计的详细信息：

3.饼形组件

DAP数据分析平台饼状组件一般适用于表述一维数据即行或列的可视化，尤其是能够直观反映数据序列中各项的大小、总和和相互之间的比例大小，图表中的每个数据系列具有唯一的颜色或图案并且在图表的图例中表示，也可以通过玫瑰饼状图实现二维数据分析，通过饼状图的饼瓣大小来进行区分，如下图所示：

饼图适用数据：反映某个部分占整体的比例，用于对比几个数据在其形成的总和中所占百分比值时最有用。如果想表示多个系列的数据，则可以用环形图。DAP数据分析平台的饼状图组件能够直观地反映某个部分占整体的比例，肉眼对局部占整体的份额一目了然，用不同颜色来区分局部模块，也显得较为清晰，还可以通过汇总饼状图算出被统计数额的总量和平均值。

首先对容器的高宽进行配置：

对图形的属性进行配置。这里的标签颜色就是legend里的textStyle属性下的color修改颜色：

任务总线事件触发设置，当值为query时执行第一方法为后台传值，当值为refresh时触发第二个方法向后台传值:

利用封装的ajax请求用post方式对后台传值:

列表组件

DAP数据分析平台表格组件可以输入输出、显示数据，也可以利用公式计算一些简单的加减法；可以帮助用户制作各种复杂的表格文档，进行繁琐的数据计算，并且通过对输入的数据进行各种复杂统计运算后显示为可视性极佳的表格，如果说折线组件可以显示数据之间的变化，而表格组件则可以了解数据的详细信息。另外，表格组件还可以通过不同维度的搜索筛选信息，把有用的数据详细信息打印出来。

1.组件配置

可以在DAP数据分析平台展现配置中的组件管理中选择想修改的表格，也可以在导航管理中双击选中的导航，在页面配置中修改想生成表格的样式。本次以基础表格组件为例：

双击基础表格新组件，转换类为对应Miscdp Studio中对应处理数据库中的java文件：

如果要修改表格组件的基础样式，如鼠标移过表格颜色改变、表格高宽，都可以在组件模板中修改：

如果对JS代码不是很熟练，可以通过组件详情中的属性一页进行更改，有对应的属性中文，可以更加方便地操作：

2.组件传值

通过进行组件传值让我掌握了应对JS代码灵活改进的应对方法，组件模型中的值在默认数据中可以随意设置，然后通过tableData传入JS代码中，再由methods方法中定义需要使用的数值：

3.组件展现

在配置界面时，先在导航中分出存放每个组件中的容器，一个容器放一个组件，然后点击页面配置，把表格组件拖入对应的容器中，最初始的基础表格组件则为我们刚刚配置带默认值的组件，拖出来之后可以配置里面的信息和对应的立方体，这样数据就展现出来。但一般我们会在表格中添加以时间查找，或者用户名称查找，是否翻页，也可以把表格导出。

复合组件

有时在数据分析中，通过一个组件没有办法把多维的数据分析得很透彻，正因如此，出现了复合组件。复合组件是一个多样的组件，可以从不同时间、空间分析数据，也是多个不同的组件，可以利用组件本身不同的优势来分析数据。比如想要查看企业单个产品盈利占比，或者想要查看此产品近几年的销量分析，需要同时用到饼状图和折线图。

1.组件配置

和普通组件一样，先配置容器大小，在配置边距的时候要看清楚是相对定位还是绝对定位。因为涉及到两种数据分析方式，所以我加入了比基础表更多的css样式，方便及时进行调整和改变。

高度则是在最上方的div的高度：

在axisPointer属性下面修改x轴文本的颜色，改X轴的颜色则需要在axisLabel中修改颜色，值得注意的是在修改颜色之前一定要选择show: true：

通过formatter这个属性来配置X轴Y轴的单位。

2.组件传值

首先也需要传值和实例化Echarts，不同于基础组件，在Y轴和X轴要分清楚每一列分别代表的是哪一个图，哪一个值最为主要。通过series里面的属性type来分辨到底是什么图：

如图所示，通过buildOpSeries方法利用传过来的legebds和seriesd的值来循环出数据。通过传入方法中的legends和series分别利用同一组数据来先拼出bar图，再拼出line图。利用data: series[i]传入需要循环进去的值，把对象opSeriesObj放到opSeries里，返回。

3.组件展现

用折柱混合组件的方式展现，首先明确横坐标的值，再把需要对应的统计的属性选上，比如想要查看企业本月违规的人对比和惩诫律对比，就用到了折柱混合图，如下配置图表：

报表组件

DAP数据分析平台中的业务类报表组件就是把数据具象化，刚刚说的都是比例，观察趋势，都是作为分析数据的角度来讨论，而业务报表则是把这些笼统的数据分门别类的整理出来，在饼状图或者折线图中只用到了几个字段，而业务类报表则是把所有涉及到的字段都完全展示出来。

1.组件模板

因为报表涉及到的字段信息很多，所以需要在报表前加上搜索功能，比如按照时间搜索，或按照名称搜索。再给组件容器空间时不同于普通组件分配容器大小，也需要给搜索框空间大小。如下图所示:

其中需要在div中添加iframe标签用来加载界面:

不同于经常设置的属性，这次新加了两个属于报表的属性代码，queryFields和paramKeys，他们分别表示查询字段和参数标识:

2.组件配置

可以通过分析模型中的业务类报表进行配置想要的报表，可以设置多表头，两行表头，还可以选择合并表头和固定表头。配置这些让报表变的更美观:

分析报表的js代码，由许多的方法拼成。例如downYearMonth()是向下拼出要查询某年的1到12月的下一个月。downYear()是向下走一年，upwardYear()是向上走一年。分别对应如下界面:

最后每一个按钮点击完毕后，都会利用queryMessage方法重新加载界面，通过刚刚的调整年月日的条件来加载数据：

3.组件展现

报表的作用是综合反映报告期内的产品成本，能够及时发现质量，销售等方面存在的问题，评价和考核各成本环境成本管理业绩，可以利用成本资料进行成本分析，还有企业的成本、利润的预测、决策业绩变质产品成本和各项费用计划、指定产品价格的重要依据。

心得总结

在修改DAP数据分析平台组件的时候使我更加深入了解了之前只是会用一些基础属性的前端框架，在这次练习中，一方面配置图表，一方面在互联网上和前辈那里去学习vue的语法知识并且还学习了一个全新的插件Echarts，虽然说此插件容易上手，但是在DAP数据分析平台的组件设置里需要和数据库中的表进行交互，也使我收货颇多。

1.产品理解

在数据加工处理进入数仓后，构建的分析模型（数据集、立方体）可以直接发布成数据服务，还可以通过配置可视化组件，完成多端（大屏、Web端/PC端、移动端）、多导航数据可视化展示。企业可基于大屏、Web端/PC端、移动端来监控当前运营情况、穿透分析历史经营情况，探索企业的未来发展趋势等，便于对当前工作做出调整，对未来发展做出预测，让企业大量的历史数据发挥价值。而DAP的亮点就是大屏展示，通过一个一个的组件来展现企业历史问题和历史成就。

2.产品应用

DAP数据分析平台应用很广，每一个组件都有其自身的优点，并且共同造就了一个数据分析平台，柱状图是数据分析中最基础的一种图表组件，通过柱子来表现数据的高度，进而比较不同数据之间的差异；柱状图的横轴是时间轴，纵轴是数据轴；折线图一般基于时间维度看数据量的变化趋势，发现整体走向和单体突出数据。

柱状图用来对比不同高点之间的变化，进而寻找原因。折线图可以将不同纬度的数据放在一起比较，比如新增用户、活跃用户、流失用户，三条用户变化曲线放在一起，就可以观察三者之间的彼此影响，例如新增用户量大时有没有对活跃用户带来提升，流失情况是否严重，进而得出活动效果的综合评价。饼状图的应用重点在于发现单体因素在整体因素中的占比，例如活跃用户在整体用户中的占比等。

3.产品展望

数据之间有联系的字段才能对数据进行调用，主流的数据会以字符、基因组数据图片、音频、视频形式呈现，在计算机语境下要把这些内容进行整和分析，放到数据大屏中实时分析。然而企业在数据湖中定向调取数据辅助决策时，往往更需要多元立体、统一主题的信息进行建模分析，这就对结构效率有了迫切的需求。

而DAP数据分析模型，正具有多立方体，多主题的应用，从而展现在数据大屏上，数据可视化就是通过大屏幕直观展示各项数据信息，通过拼接屏幕技术形成较大屏幕，让各种丰富数据信息可视化，展示更为详细并且展示效果更加生动。

本文由@数通畅联原创，欢迎转发，仅供学习交流使用，引用请注明出处！谢谢~