手把手教你如何使用象限圖組件

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分頁組件》