手把手教你如何使用象限图组件

DevUI是一支兼具设计视角和工程视角的团队，服务于华为云 DevCloud平台和华为内部数个中后台系统，服务于设计师和前端工程师。
官方网站： devui.design
Ng组件库： ng-devui（欢迎Star）
官方交流群：添加 DevUI小助手（微信号：devui_official）进群

引言

象限图常常用于规划事件的优先级，用于分析处理数据与指望的偏离程度等。目前各大主流的Angular组件库中均未发现相似象限图的组件，而DevUI组件库则基于DevCloud业务的诉求，设计并开发出一款灵活配置，功能齐全的象限图组件。

在此可查看本组件的demo及使用：https://devui.design/components/quadrant-diagram/demo

功能介绍

数据随心掌控：

1. 组件经过与拖拽的联动，坐标跟随线的定位，能够轻松实现标签的移动，便于使用者进行数据的变动，掌控事项的发展；
2. 组件提供了详情展现功能，悬停到对应标签便可获取标签的坐标信息以及标签详情信息。固然，悬停展现的详情数据可由用户自行定制，充分切合各种展现场景；
3. 组件自己不侵入修改标签的数据，经过返回用户所需信息，由用户本身决定应该显示的内容及位置，实现用户对于数据的可掌控性。

三种模式，任意切换：

组件内置了功能区域，提供标签的放大，缩小及象限图全屏的功能。

1. 最小化：可以直观的查看标签的分布状况，便于作事项的管理与协调；
2. 中间态：方便的查看具体标签的所在位置，以实现快速拖拽移动等功能；
3. 最大化：标签下方增长进度条展现，清晰直观的了解每个标签项的进展状况。

此外，三个模式的样式模板均暴露给使用者，您能够自由定制您想要展现的样式。

除了三种模式以外，组件还提供了全屏功能，象限图区域将铺满整个屏幕，很是适合用于会议演示以及工做汇报等场景。

样式专属定制：

组件自己默认提供了“少女系马卡龙”配色，清爽活泼，默认使用“事务优先级排列”场景，用户无需设置多余内容便可开箱使用。固然，对于组件自己提供的默认配置不够满意的话，组件还提供了自由度很高的样式自定义方式，能够彻底修改象限区域颜色及标题，坐标系信息，标签的展现样式等，配置简单，自由灵活。下图为定制的象限图展现：

配置介绍

基本用法

因为象限图自己有默认的基础配置，若是您想开箱即用，不需定制化处理，则只需传入labelData数据，并经过dropEvent事件动态处理labelData,使象限图上的内容展现实时变动。

<d-quadrant-diagram   
  [labelData]="labelData"   
  (dropEvent)="dropEvent($event)"
></d-quadrant-diagram>

下面咱们详细介绍一下labelData中每一个数据的配置项：

export interface ILabelDataConfigs {  
  x: number; // X轴坐标值  
  y: number; // Y轴坐标值  
  title: string; // 标签的名称  
  content?: string; // 鼠标悬浮在标签上时的提示内容  
  progress?: number; // 标签对应事项的进度  
  [propName: string]: any; // 其余数据
}

其中，值得注意的是，标签的坐标值是根据其中心点的位置进行设置，title为标签的标题，当title过长时，将以超出部分显示省略号的方式在标签容器中显示；content 为悬停时下方的详情信息，将在下个版本支持传入template；progress则是标签下方的进度显示，传入数字为0-100，表示当前事项的进展；此外，用户还可传入其余参数，方便自定义处理。

此外，还提供了smallLabelTemplate，normalLabelTemplate，largeLabelTemplate参数，使用户能够定制三种模式的不一样标签样式。

象限图配置：

想要配置一个自定义的象限图？只须要简单的两步：

1.经过view属性设置象限图所占区域，view值可动态变化，象限图也会作出相应的改变。值得注意的是，目前只支持传入number，单位为px，当您须要根据容器自适应时，须要实时计算一下容器的实际宽高，并传入**view**中。具体配置项以下：

export interface IViewConfigs {  
  height: number; // 象限图高度  
  width: number; // 象限图宽度
}

2.经过quadrantConfigs 参数设置四个象限的标题，颜色等，该参数传入长度为4的数组，Array[0]，Array[1]，Array[2]，Array[3]分别表明第一，二，三，四象限。此外，若是您只想使用坐标功能，还可经过showQuadrants 参数关闭象限的显示。每一个象限可配置的内容以下：

export interface IQuadrantConfigs {  
  backgroundColor?: any; // 背景色  
  color?: any; // 字体颜色  
  title?: string; // 象限标题  
  top?: number; // 标题与象限区域顶部的距离  
  left?: number; // 标题与象限区域左侧的距离
}

坐标系设置:

组件中的坐标系设置是根据数学上坐标系的设置与使用作了相应的匹配，更加贴合用户的使用习惯。例如，设置坐标系的原点，坐标轴的最大最小值，坐标轴的标题等；更多设置可参考下方的配置：

export interface IAxisConfigs {  
  tickWidth?: number; // 刻度的宽(高)度，默认为10  
  spaceBetweenLabelsAxis?: number; // 刻度值和坐标轴之间的距离，默认为20  
  xAxisLabel?: string; // X轴名称，默认值为'紧急度'  
  yAxisLabel?: string; // Y轴名称，默认值为'重要度'  
  axisMargin?: number; // 右侧留出的空白区域  
  xWeight?: number; // X轴权重，默认值为1  
  yWeight?: number; // Y轴权重，默认值为1  
  xAxisRange?: IRangeConfigs; // X轴的坐标值范围和间距设置,默认值为{min:0,max:100,step:10}  
  yAxisRange?: IRangeConfigs; // Y轴的坐标值范围和间距设置,默认值为{min:0,max:100,step:10}  
  originPosition?: { left: number; bottom: number; }; // 原点的位置设置，默认值为{left:30,bottom:30}
}

其中，坐标值范围与间距的配置为：

export interface IRangeConfigs {  
  min: number; // 坐标轴起始值  
  max: number; // 坐标轴终止值  
  step: number; // 坐标轴刻度值的间隔
}

拖拽配置：

象限图组件支持与拖拽组件的联动，经过设置dropScope属性，可匹配标签的可拖拽位置；只要象限图与其余可拖拽区域的dropscope值一致，便可实现两个区域的联动，通常经常使用于将象限图上的标签“删除”。（想要了解更多拖拽组件的信息，可查看：https://devui.design/components/dragdrop/demo）

<section>  
  <div class="row">    
    <div class="col-sm-3">      
      <div 
        class="card" dDroppable 
        [dropScope]="'devui-quadrant-diagram'" 
        (dropEvent)="onDrop($event, list)"
       >        
        <div class="card-header">可拖拽项</div>        
        ...      
      </div>    
    </div>  
  </div>
</section>
<d-quadrant-diagram  
  [labelData]="labelData"  
  [quadrantConfigs]="quadrantConfigs"  
  [axisConfigs]="axisConfigs"  
  [view]="view"  
  [dropScope]="'devui-quadrant-diagram'"  
  (dropEvent)="dropEvent($event)"
></d-quadrant-diagram>

上述代码中，一个可放置拖拽元素的div与d-quadrant-diagram 的**dropScope** 一致，那么两个区域便可实现标签的交互。

对上述配置感到迷茫的话能够在：https://devui.design/components/quadrant-diagram/demo中查看配置自定义象限图demo，或在官方交流群中讨论。

总结

象限图组件的衍生是DevUI组件库对业界主流组件库的缺失内容的补充，你们若是发现有相似的产品或组件也能够进行分享和交流。目前该组件还属于演进状态，你们使用上有疑问或者有优化建议，欢迎在github上提issue，或者也可加入上方的官方交流群进行探讨。

加入咱们

咱们是DevUI团队，欢迎来这里和咱们一块儿打造优雅高效的人机设计/研发体系。招聘邮箱：muyang2@huawei.com。

文/DevUI Lynn

往期文章推荐

《Web界面深色模式和主题化开发》

《手把手教你搭建一个灰度发布环境》

《手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件》