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 分页组件》