應用示例

以堆疊條形圖形式展示某公司1月至3月某物品的銷售單價（price）和銷售量（sales）數據。

步驟一：添加組件

1. 創建Web應用。具體操作，請參見創建Web應用。

2. 在Web應用編輯器中，單擊最左側的組件圖標。

3. 在畫布左側組件列表上方，輸入條形圖，找到該組件，然后將組件拖拽到中間畫布。

   有關組件添加的更多信息，請參見添加組件。

   

步驟二：配置數據源

1. 在Web編輯器中，選中組件，在右側樣式中單擊配置數據源。

2. 在數據源配置頁面，選擇數據源類型，完成配置。

   可選數據類型有接口、數據表資源、靜態數據、應用推送。

3. 單擊確定。

   數據展示頁簽左側數據源顯示已配置的數據源名稱，維度和度量顯示從數據源中自動解析的屬性字段。

   說明

   數據源屬性字段匹配規則：

   • 維度：布爾型、字符型、時間型字段。

   • 度量：數值型字段。

4. 可選：單擊左上角數據表，查看已配置數據源的所有數據信息。

步驟三：配置數據展示

在數據展示頁簽，設置條形圖展示數據和樣式，如圖所示。

1. 根據實際需求，分別拖拽一個維度字段和多個度量字段到縱軸和橫軸。

   說明

   系統默認為已添加度量字段對應的條形圖自動分配一個顏色，支持在頁面右側屬性頁簽下的顏色中進行修改。不支持在顏色中新增或者刪除度量字段。

2. 可選：在橫軸和縱軸框，單擊字段三角入口，執行以下操作。

   

   操作項	說明
   匯總方式	可選：總和（默認值）、平均值、最大值、最小值、計數。 僅度量字段支持該功能。字段前會顯示已設置的匯總方式。 設置度量字段匯總方式后，支持再次配置過濾篩選條件，展示特定數據。 說明 只有當組件數據源類型為數據表資源時，才支持該功能。
   篩選器	添加字段到篩選器，作為篩選項根據該字段配置條件過濾展示數據。最多支持添加10個篩選器。 您也可從左側維度或度量中，單擊字段三角入口，添加字段到篩選器。 說明 只有當組件數據源類型為數據表資源時，才支持該功能。 更多信息，請參見篩選器配置。
   設置顯示名	編輯字段的顯示名稱。

3. 在數據展示頁簽右側，單擊樣式，設置組件展示樣式。

   配置項	說明
   圖表類型	設置圖表類型。 以Y軸為參考方向，分為條形圖（各系列的數據并行顯示）和堆疊條形圖（各系列的數據依次堆疊）。
   全局樣式	設置全局字體。
   標題	設置是否顯示標題或圖例標志。如果顯示，可設置相應的顯示樣式。
   圖例
   X軸	設置是否顯示X或Y軸刻度值，及可顯示的效果。 說明 X軸刻度數量從最小值所在刻度算起，例如最小值為0，最大值為500，間隔為50，刻度數量為11。
   Y軸
   標簽	設置是否顯示組件的X軸數據點具體數值、背景網格線、背景顏色和邊框 ，及可顯示的效果。
   橫向網格線
   背景
   邊框
   無數據提示	設置是否顯示無數據提示。如果顯示，可設置顯示的樣式。

4. 單擊完成配置，返回Web應用編輯器，查看已配置的組件數據。

5. 調整組件在頁面中的最終位置。有關組件通用樣式配置的更多信息，請參見樣式配置。

步驟四：配置交互動作

1. 在Web應用編輯器右側交互中，單擊新增交互，設置事件和動作。

   該組件支持鼠標移入事件。例如，鼠標移入，執行動作展示隱藏，顯示某個隱藏的組件，展示組件數據更多的說明信息。

   具體操作，請參見交互配置。

2. 單擊頁面右上方的預覽，預覽和調試組件展示的數據和樣式。