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

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团队，欢迎来这里和我们一起打造优雅高效的人机设计/研发体系。招聘邮箱：[e-mail]。

文/DevUI Lynn

往期文章推荐

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

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

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