本章重点介绍DWF可视化控件，可视化控件包括：混合图、散点图、饼图、省份地图、仪表盘、动态地图和自定义控件,自定义控件可以实现与echarts可视化的集成。

1.混合图控件

1.1柱状图和折线图

混合图控件可支持柱状图、折线图、横堆叠图、纵堆叠图在一个看板上实现，下图是结合设备管理数据模型，用混合图控件设计的设备开工时长和故障总数看板，其中X轴为设备实体类Asset中设备“代号”，柱状图为设备实体类Asset“工作小时数”，折线图表示设备的“总故障报警数”，下面围绕这个看板来介绍混合图的功能。

图-开工时长和总故障报警数看板

下面介绍混合图控件的功能，首选，选择布局控件，本例子中选择的是“列”控件，再拖“混合图”控件到布局控件内，目标类：选择目标类，本列子中选择的是设备实体类；

1.图表标题：定义看板标题，本例子中定义的是”工作时长&故障数“；

2.图例字体大小和颜色选择，设置图例字体的大小和颜色；

3.最大数据数量：定义屏幕上一屏显示最大的对象数，当数据对象大于所选择的“最大数据数量”时，在APP应用端X轴下就会出现滚动条，通过拖动滚动条来显示完整的数据对象；

4.X轴类型：X轴类型有2个选项：

• category：当X轴选择category时，表示X轴为选择的类型，本例子X轴选择的是设备“代号”，Y轴显示为该设备实体类的“工作小时数”属性的值，此时，柱状图为垂直的柱状图；
•  value：当X轴选择value时,X轴显示为“工作小时数”，Y轴为设备“代号”，此时的柱状图为水平柱状图；

5.图表与容器内部的距离：此处需要定义图表的四个边界与容器上下、左右的距离，图标边界是指图表最外侧（坐标轴坐标值数据的最外端）。

下图为图表系列配置页面，功能介绍如下：

图-图表系列配置

1.在映射属性的右侧，选择“添加属性”的“+”号，则下方出现一个新的属性映射条；

2.图表系列配置：选择图表系列配置进入设置界面；

3.类型：混合图中支持4中类型的图表：

• bar：柱状图，柱状图的方向取决于X轴类型的取值，当X轴类型取category时，柱状图为纵向柱状图，当X轴类型取 value时，柱状图为横向柱状图
• line：折线图
• crosspile: 横向顿叠图
• verticaleStack ：纵向堆叠图

4. Y轴位置：定义图表Y轴是靠左侧还是右侧，本例子中，设备工作时长的y轴定义在左侧，总故障报警数的Y轴定义在右侧；

5.X轴：定义X轴属性，本例子X轴定义为设备实体类Asset中”代号“；

6. X轴标签的角度：本例子中定义代号用为30°，即数据对象“代号”倾斜30°；

7.Y轴：Y轴定义为设备实体类Asset中的”工作小时数“；

8.Y轴单位：本案例工作时长单位定义为”小时“

9.悬停提示内容：定义除X轴，Y轴以外需要在鼠标悬停时提示的内容，本案例中的柱状图除X轴为”代号“，Y轴为”工作小时数“外，可以再增加”业主名称“、”设备名称“等鼠标悬停时提示信息；

10. 工具栏：系统提供了工具栏开关，如果工具栏设置为开启，在右侧的工具栏就会出现A在pp应用端，工具栏中提供了图表形式的切换：

• ：切换为折线图
• ：切换柱状图
• ：切换为对贴图
• ：保存为图片

11.过滤条件：可以对所展示的数据进行过滤条件的设置，以展示所需要表达的数据。

1.2 堆叠图

在上面图表系列配置的”类型“中，如果选择类型为：crosspile横向顿叠图、verticaleStack纵向堆叠图，当类型选择为堆叠图后，Y轴即可选择多个需要展现的属性，就形成堆叠的效果。

如果选择多个属性，则在图表系列配置中的属性映射中就会出现多个系列，可分别对每个序列的配置进行再单独的设置，如：对Y轴的设置、颜色、Y轴网格线等进行设置。

2.散点图控件

下图为设备管理案例中设备实体类Asset中描述设备经纬度的散点图，下面介绍散点图的定制过程。

图-设备经纬度位置散点图

首先拖布局控件中”列“控件到画布区，其次择”散点图“到布局内，定义散点图的图表名称，再定义”最大数据量“的值，例子中最大值定于为60；

1.X轴：将X轴定义为设备实体类Asset中的位置经度，且设置X轴的单位；

2.Y轴：将Y轴定义为设备实体类Asset中的位置纬度；且设置Y轴的单位；

3.过滤条件：设置要展现数据的过滤条件即完成散点图的定义。

3.饼图控件

下面结合设备管理案例中故障报警数来介绍饼图的使用。

图-设备故障报警数饼图

首先拖布局控件中”列“控件到画布区，其次择”饼图“控件到布局内，定义饼图的图表名称为”设备故障报警数“；

1.标签：将标签定义为设备实体类Asset 中的”代号“；

2.数值：将数值定义为设备实体类Asset 中的”总故障报警数“；

3.数值形式：可选择”数值“或”百分比“；

4.图表形式：可选择图表形式为”饼图“或”圆环图“；可例子选择为饼图；

5.图表半径：通过过滤条件过滤要展示的数据；

7.绘制：选择“绘制”可绘制定义的饼图。

4.省份地图控件

下图为设备管理按照设备实体类Asset中”工作地点“即省份对工作小时数进行统计的省份地图看板，省份地图可以实现按照所选择的标签进行统计。

图-设备管理工作时长统计

首先拖布局控件中”列“控件到画布区，其次择”省份地图“控件到布局内，图表基础配置内容如下；

1.图表标题：例子中定义为”省份设备工作时长统计“；

2.标签：定义统计的标签，例子中定义设备实体类Asset中”工作地点“，希望按照省份”工作地点“对设备的“工作小时数”进行统计；

3.数值：定义要统计的数值，例子中对设备实体类Asset中”工作小时数“按照省份进行统计；

4.过滤条件：选择数据的过滤条件，如年份，实现按照年份、省份对设备进行工作小时数统计。

5.点击绘制，即可完成对省份地图的汇总和可视化。

5.仪表盘控件

下图为设备运行里程监控看板的设计。

图-设备运行里程监控

首先拖布局控件中”列“控件到画布区，其次择”仪表盘“控件到布局内，图表基础配置内容如下：

1.图表标题：定义图表看板的标题，本例子中定义为”设备运行里程监控“；

2.数值标题：仪表盘内的标题，例子中定义为：总里程；

3.数值定义：定义数值最小和最大值，例子中最大值定义为1500公里；显示格式有2种显示方式：百分比和数值；

4.数值：定义要显示的数字，例子中定义的为设备实体类Asset中“总里程数”；

5.过滤条件：设置需要过滤的条件；

6.点击“绘制”，即可完成设备运行里程监控看板的绘制。

7.动态地图控件

动态地图在第二部分系统定制中第三章表单建模入门(四)）中有详细的介绍，不在此赘述。需要说明的问题是，动态地图显示的是根据设备的经纬度信息在定位设备在地图上的位置，而省份地图是根据标签对数据进行统计，二者要表达的内涵完全不一样。

8.自定义控件

自定义控件：具有一定开发能力的用户，用HTML、CSS、JavaScript和Vue代码，定制可视化控件。可视化控件中的自定义支持myChart的方法，可以直接使用myChart来基于echarts制作DWF不支持的图表，支持this.handleQuery 获取类对象的数据。如果需要有复杂的交互逻辑和点击事件就需要用到插件开发。

“自定义”控件将在第三部分的第九章中介绍：用自定义控件实现高级可视化。