本示例通過對靜態數據調整，展示某學校各階段學生人數對比柱圖。

1. 創建并選中柱狀圖組件，進入數據源面板，單擊數據映射查看柱圖默認自帶數據和適配結構。

   

   觀察數據結構，柱圖接受x字段作為X軸數據，y字段作為Y軸數據，colorField字段作為顏色堆疊分組。具體解釋參見柱狀圖參數說明。

2. 在可視化編輯狀態，可直接調整靜態數據。

   

3. 點擊，切換至代碼編輯狀態。通過增加、刪除或修改JSON格式的代碼完成數據源的編輯。

   

4. 當您調整成如下JSON數據后，柱圖將展示某學校各階段學生人數對比圖。

   某學校各階段學生人數JSON數據

   [
     {
       "colorField": 100,
       "x": "小學",
       "y": 145
     },
     {
       "x": "初中",
       "colorField": 100,
       "y": 200
     },
     {
       "x": "高中",
       "y": 290,
       "colorField": 100
     }
   ]

   

   說明

   完成數據配置后，可按需調整樣式。例如，上圖可隱藏圖例，顯示坐標軸標題，讓圖表語義更明確。

組件支持全局變量作為傳入數據，本示例演示將柱圖數據通過schoolInfo的全局變量形式接入組件。

1. 進入全局變量頁簽，新建變量并修改變量名稱為schoolInfo。

   

2. 修改初始值內容如下。

   某學校各階段學生人數JSON數據

   [
     {
       "colorField": 100,
       "x": "小學",
       "y": 145
     },
     {
       "x": "初中",
       "colorField": 100,
       "y": 200
     },
     {
       "x": "高中",
       "y": 290,
       "colorField": 100
     }
   ]

3. 創建選中柱狀圖組件，進入數據源面板，單擊數據映射查看柱圖默認自帶數據和適配結構。觀察數據結構，柱圖接受x字段作為X軸數據，y字段作為Y軸數據，colorField字段作為顏色堆疊分組。具體解釋參見柱狀圖參數說明。

4. 數據源類型選擇全局變量，并選擇schoolInfo作為組件的業務數據。

   

5. 組件數據和靜態數據一致，無需適配，此柱圖展示某學校各階段學生人數對比。

   

   說明

   全局變量除傳遞靜態值外，還有其他使用場景。具體請參見使用全局變量。

數據源方式接入業務數據流程如下：先接入數據，再通過數據響應結果觀察業務數據和組件數據的結構差距，通過數據映射或過濾器進行數據的適配處理，最終得到適配數據。本示例基于一份關鍵數據字段為 category產品類別和quantity銷售量的零售店數據集，用柱狀圖展示不同產品類別的銷售情況。

1. 創建選中柱狀圖組件，進入數據源面板，單擊數據映射查看柱圖默認自帶數據和適配結構。觀察數據結構，柱圖接受x字段作為X軸數據，y字段作為Y軸數據，colorField字段作為顏色堆疊分組。具體解釋參見柱狀圖參數說明。

2. 數據源類型選擇RDS for MySQL，選擇已有數據源，并用SQL取數獲取已準備好的業務數據。

   

3. 點擊數據響應結果，查看返回數據結構。

   [
     {   
       "id": 1,
       "category": "Electronics",
       "sales_amount": 15000,
     },
     {
     ...
     }
   ]

4. 由于目前返回數據結構并不是柱圖需要的數據結構，需要進行數據適配。可通過數據映射或過濾器進行數據處理。

   說明

   可同時使用過濾器和數據映射處理業務數據，過濾器優先。

   方式一：數據映射

   1. 打開數據映射，配置x字段和y字段如下圖。

   2. 由于未配置colorField字段，銷售柱圖如下：

   方式二：過濾器

   1. 可通過過濾器處理數據，代碼如下：

      function filter(data){
        return data.map(item => {
          return {
            x: item.category,
            y: item.quantity,
            colorField: 1
          }
        });
      }

   2. 您將得到如下銷售柱圖：