### 柱形圖組件就是添加柱形圖的組件。點擊“”圖標，再點擊“柱形圖”，即可創建新的圖像，如圖2.11   ## **一、組件名稱設置** ### 選中該柱形圖組件，在操作界面右側的“圖層名稱”處可修改組件的名稱，如圖2.12。（名稱最好要設置一下，方便后期組件管理）   ## **二、系統配色** ### 選中該柱形圖組件，在操作界面右側，打開“系統配色”開關，在“配色選擇”下拉框中選擇主題色，來修改柱形圖組件的配色，如圖2.13。 * ### 默認配色：效果圖如圖2.131； * ### 紫色主題：效果圖如圖2.132； * ### 綠色主題：效果圖如圖2.133；    ## **三、位置設置** ### 想達到圖2.14中圖表的效果，可如下設置： ### 選中該柱形圖組件，在操作界面右側，打開“豎展示”開關，就可實現，操作步驟如圖2.15。     ## **四、柱體設置** ### 選中該柱形圖組件，在操作界面右側的“柱體設置”處可修改設置組件的外觀特點，如圖2.16。 * ### 最大寬度：柱體的最大寬度，可以調節改變柱體的寬度； * ### 圓角：柱體4個角的弧度； * ### 最小高度：柱體最小不能低于的高度；   ## **五、標題設置** ### 選中該柱形圖組件，在操作界面右側的“標題設置”處可修改柱形圖組件的標題樣式，如圖2.17。 * ### 標題開關：該開關控制標題的顯示與隱藏； * ### 標題：標題顯示的內容； * ### 字體顏色：標題的顏色； * ### 字體粗細：標題字體的粗細； * ### 字體大小：標題字體大小； * ### 字體位置：標題的位置，分為：居中、左對齊、右對齊； * ### 副標題：副標題內容（如果不想顯示副標題，不填寫內容就不顯示）； * ### 字體顏色：副標題字體顏色； * ### 字體粗細：副標題字體的粗細； * ### 字體大小：副標題字體大小；   ## **六、X軸設置** ### 選中該柱形圖組件，在操作界面右側的“X軸設置”處可修改柱形圖組件的X軸樣式，如圖2.18。 * ### 名稱：X軸的名稱； * ### 顯示：X軸是否顯示； * ### 顯示網格：網格是否顯示； * ### 軸線顏色：網格線顏色設置； * ### 標簽間距：每個柱狀圖之間的距離； * ### 文字角度：X軸文字的旋轉角度； * ### 軸反轉：柱狀圖順序左右調轉； * ### 字號：X軸字體大小；   ## **七、Y軸設置** ### 選中該柱形圖組件，在操作界面右側的“Y軸設置”處可修改柱形圖組件的Y軸樣式，如圖2.19。 * ### 名稱：Y軸的名稱； * ### 顯示：Y軸是否顯示； * ### 軸網格線：網格是否顯示； * ### 軸線顏色：網格線顏色設置； * ### 軸反轉：柱狀圖順序上下調轉；打開軸翻轉開關，效果圖如2.191； * ### 字號：Y軸字體大小；     ## **八、字體設置** ### 選中該柱形圖，在操作界面右側的“字體設置”處可修改柱體頂部文字的樣式，如圖2.192。 * ### 顯示：數值文字是否顯示； * ### 字體大小：文字的大小； * ### 字體顏色：文字的顏色； * ### 字體粗細：文字的粗細；   ## **九、提示語設置** ### 選中該柱形圖組件，在操作界面右側的“提示語設置”處可修改柱形圖組件的提示語，如圖2.193。效果圖如圖2.194； * ### 字體大小：提示語的字體大小； * ### 字體顏色：提示語的字體顏色；     ## **十、坐標軸邊距設置** ### 選中該柱形圖組件，在操作界面右側的“坐標軸邊距設置”處可修改柱形圖距離左、右、上、下的距離，如圖2.195。 * ### 左邊距（像素）：柱形圖距離左邊的距離； * ### 頂邊距（像素）：柱形圖距離頂部的距離； * ### 右邊距（像素）：柱形圖距離右邊的距離； * ### 底邊距（像素）：柱形圖距離底部的距離；   ## **十一、圖例設置** ### 選中該柱形圖組件，在操作界面右側的“圖例設置”處可設置圖例的樣式，如圖2.196；效果圖如2.197。 * ### 圖例開關：是否顯示圖例； * ### 字體顏色：圖例的字體顏色。如果要想自定義圖例的顏色，需要關閉系統配色（圖2.1971）和刪除所有自定義配色（圖2.1972）中的顏色。 * ### 圖例寬度：圖例的寬度； * ### 橫向位置：圖例的位置，分為：居中、左對齊、右對齊，如圖2.1973； * ### 縱向位置：圖例的位置，分為：頂部、底部，如圖2.1974； * ### 布局朝向：圖例的排列順序，分為：橫排和豎排，如圖2.1975； * ### 字體大小：圖例的字體大小；               ## **十二、自定義配色設置** ### 選中該柱形圖組件，在操作界面右側的“自定義配色設置”處可配置上邊不能設置的內容，如圖2.198。 * ### 文字顏色：X、Y軸字體的顏色； * ### 軸線顏色：X、Y軸軸線顏色； * ### 配色：柱體的顏色；如果開啟了“系統配色”，需要先把系統配色先關掉，這樣自定義的柱體顏色才起作用；   ## **十三、接口設置** ### 選中該柱形圖組件，在操作界面右側，點擊“”，可設置接口，如圖2.199。 ### 1\. 數據類型 ### 數據類型分為靜態數據和動態數據； * ### 靜態數據：寫死的數據； * ### 動態數據：會隨著接口傳過來的數據實時變化；（一般這種比較常用） ### 2\. 接口地址 * ### categories：X軸參數； * ### series：柱形內容；內部 name為柱形名稱，data為柱形相對應Y軸的值； ### （1）靜態數據，接口地址傳過來的內容要符合以下格式： ~~~ （1）兩個柱形圖接口格式： {"categories":["蘋果","三星","小米","oppo","vivo"],"series":[{"name":"手機品牌","data":[1000879,3400879,2300879,5400879,3400879]},{"name":"手機品牌銷售","data":[100087,340087,230087,540087,340087]}]} （2）一個柱形圖接口格式： {"categories":["蘋果","三星","小米","oppo","vivo"],"series":[{"name":"手機品牌","data":[1000879,3400879,2300879,5400879,3400879]}]} ~~~ ### （2）動態數據，接口地址傳過來的內容要符合以下格式： ~~~ （1）兩個柱形圖接口格式如下，效果圖如圖2.1991； {"data":{"categories":["蘋果","三星","小米","oppo","vivo"],"series":[{"name":"手機品牌","data":[1000879,3400879,2300879,5400879,3400879]},{"name":"手機品牌銷售","data":[100087,340087,230087,540087,340087]}]}} （2）一個柱形圖接口格式如下，效果圖如圖2.1992； {"data":{"categories":["蘋果","三星","小米","oppo","vivo"],"series":[{"name":"手機品牌","data":[1000879,3400879,2300879,5400879,3400879]}]}} ~~~ ### 3\. 刷新時間 ### 這個參數主要針對動態數據設置的，完成數據的實時更新。 * ### 如果你想設置成5秒刷新一次，可以將刷新時間設置成“5000”； ### 4\. 刷新數據 ### 這個參數主要是重新請求以下接口，完成數據的更新。    ### 5\. 接口參數 ### 暫時未用到； ### 6\. 數據處理 ### 這個參數用于處理圖表中的數據，比如：你在不方便修改接口的時候，想修改一下圖表中的某一個或某幾個數據，可在這里邊修改。   * ### 查看數據格式： ### 點擊數據“數據處理”的編輯按鈕，輸入“console.log('======>',option)”，如圖2.1993操作；再點擊“確定”按鈕，再點擊“刷新”，打開調試模式，就可看到數據格式和數據內容，可根據自己需求修改，如圖2.1994；       * ### 修改格式如下： ~~~ option=>{ option.categories=["蘋果1","三星1","小米1","oppo1","vivo1"] return option } ~~~  ### 7.通用處理 ### 這個參數用于處理圖表中的樣式，比如：你在不方便修改的樣式或樣式配置中沒有，可在這里邊修改。   * ### 查看數據格式： ### 點擊數據“通用處理”的編輯按鈕，輸入“console.log('======>',option)”，如圖2.1995操作；再點擊“確定”按鈕，再點擊“刷新”，打開調試模式，就可看到數據格式和數據內容，可根據自己需求修改，如圖2.1996；      * ### 修改格式如下： ~~~ option=>{ option.title={ "show": false, "text": "銷售", "left": "left", "textStyle": { "fontSize": 18, "fontWeight": "bolder", "color": "#c23531" } } return option } ~~~