### 折線圖組件就是添加折線圖的組件。點擊“”圖標，再點擊“折線圖”，即可創建新的圖像，如圖2.21；   ## **一、組件名稱設置** ### 選中折線圖組件，在操作界面右側的“圖層名稱”處可修改組件的名稱，如圖2.22。（名稱最好要設置一下，方便后期組件管理）   ## **二、系統配色** ### 選中該折線圖組件，在操作界面右側，打開“系統配色”開關，在“配色選擇”下拉框中選擇主題，來修改折線圖組件的配色，如圖2.23。 * ### 默認配色：效果圖如圖2.231； * ### 紫色主題：效果圖如圖2.232； * ### 綠色主題：效果圖如圖2.233；    ## **三、位置設置** ### 選中該折線圖組件，在操作界面右側，打開“豎展示”開關，可修改折線圖組件的顯示方向，如圖2.24；效果圖如圖2.241。     ## **四、折線設置** ### 選中該折線圖組件，在操作界面右側的“折線設置”處可修改設置組件的外觀特點，如圖2.25。 * ### 標記點：設置折線圖上是否有標記點，默認有標記點；（關閉標記點開關，效果圖如圖2.251；打開標記點開關，效果圖如圖2.252） * ### 點大小：設置標記點的大小； * ### 平滑曲面開關：設置折線圖是平滑曲面還是折線，默認是平滑曲面；（關閉平滑曲面開關，效果圖如圖2.253；打開平滑曲面開關，如圖2.254） * ### 階梯線圖：包含當前點、中間點、下個拐點。當前點指：當前點做階梯拐點，如圖2.255；中間點指：當前為中間點做拐點，如圖2.256；下個拐點：下個點做拐點，如圖2.257。 * ### 面積堆積：設置折線圖是否是面積堆積樣式；（關閉面積堆積開關，效果圖圖如圖2.258，打開面積堆積開關，效果圖如圖2.259） * ### 線條寬度：設置線條的寬度；（圖2.25標記1）       ## **五、標題設置** ### 選中該折線圖組件，在操作界面右側的“標題設置”處可修改折線圖組件的標題樣式，如圖2.26。 * ### 標題開關：該開關控制標題的顯示與隱藏； * ### 標題：標題顯示的內容； * ### 字體顏色：標題的顏色； * ### 字體粗細：標題字體的粗細； * ### 字體大小：標題字體大小； * ### 字體位置：標題的位置，分為：居中、左對齊、右對齊； * ### 副標題：副標題內容； * ### 字體顏色：副標題字體顏色； * ### 字體粗細：副標題字體的粗細； * ### 字體大小：副標題字體大小；   ## **六、X軸設置** ### 選中該折線圖組件，在操作界面右側的“X軸設置”處可修改折線圖組件的X軸樣式，如圖2.27。 * ### 名稱：X軸的名稱； * ### 顯示：X軸是否顯示； * ### 顯示網格：網格是否顯示；（打開顯示網格線開關，效果圖如圖2.271） * ### 軸線顏色：網格線顏色設置； * ### 標簽間距：每個類型之間的距離； * ### 文字角度：X軸文字的旋轉角度；（調整文字角度，效果圖如圖2.272） * ### 軸反轉：折線圖順序左右調轉； * ### 字號：X軸字體大小；    ## **七、Y軸設置** ### 選中該折線圖組件，在操作界面右側的“Y軸設置”處可修改折線圖組件的Y軸樣式，如圖2.28。 * ### 名稱：Y軸的名稱； * ### 顯示：Y軸是否顯示； * ### 軸網格線：網格是否顯示； * ### 軸線顏色：網格線顏色設置； * ### 軸反轉：折線圖順序上下調轉； * ### 字號：Y軸字體大小；   ## **八、字體設置** ### 選中該折線圖，在操作界面右側的“字體設置”處可修改折線圖組件上文字的樣式，如圖2.29。 **備注：上邊“折線設置 ->標記點”開關一定打開** * ### 顯示：數值文字是否顯示； * ### 字體大小：文字的大小； * ### 字體顏色：文字的顏色； * ### 字體粗細：文字的粗細；   ## **九、提示語設置** ### 選中該折線圖組件，在操作界面右側的“提示語設置”處可修改折線圖組件的提示語，如圖2.291；效果圖如圖2.292； * ### 字體大小：提示語的字體大小； * ### 字體顏色：提示語的字體顏色；     ## **十、坐標軸邊距設置** ### 選中該折線圖組件，在操作界面右側的“坐標軸邊距設置”處可修改折線圖距離左、右、上、下的距離，如圖2.293。 * ### 左邊距（像素）：折線圖距離左邊的距離； * ### 頂邊距（像素）：折線圖距離頂部的距離； * ### 右邊距（像素）：折線圖距離右邊的距離； * ### 底邊距（像素）：折線圖距離底部的距離；   ## **十一、圖例設置** ### 選中該折線圖組件，在操作界面右側的“圖例設置”處可設置圖例的樣式，如圖2.294；效果圖如圖2.295。 * ### 圖例開關：是否顯示圖例； * ### 字體顏色：圖例的字體顏色。如果要想自定義圖例的顏色，需要關閉系統配色（圖2.2951）和刪除所有自定義配色（圖2.2952）中的顏色。 * ### 圖例寬度：圖例的寬度； * ### 橫向位置：圖例的位置，分為：居中、左對齊、右對齊，如圖2.2953； * ### 縱向位置：圖例的位置，分為：頂部、底部，如圖2.2954； * ### 布局朝向：圖例的排列順序，分為：橫排和豎排，如圖2.2955； * ### 字體大小：圖例的字體大小；               ## **十二、自定義配色設置** ### 選中該折線圖組件，在操作界面右側的“自定義配色設置”處可配置上邊不能設置的內容，如圖2.296。 * ### 文字顏色：X、Y軸字體的顏色； * ### 軸線顏色：X、Y軸軸線顏色； * ### 配色：折線的顏色，如果開啟了“系統配色”，需要先把系統配色先關掉，這樣自定義的顏色才起作用；   ## **十三、接口設置** ### 選中該折線圖組件，在操作界面右側，點擊“”，可設置接口，如圖2.297。 ### 1\. 數據類型 ### 數據類型分為靜態數據和動態數據； * ### 靜態數據：寫死的數據； * ### 動態數據：會隨著接口傳過來的數據實時變化；（一般這種比較常用） ### 2\. 接口地址 * ### categories：X軸參數； * ### series：柱形內容；內部 name為柱形名稱，data為柱形相對應Y軸的值； ### （1）靜態數據，接口地址傳過來的內容要符合以下格式： ~~~ {"categories":["蘋果","三星","小米","oppo","vivo"],"series":[{"name":"手機品牌","data":[1000879,3400879,2300879,5400879,3400879]},{"name":"手機品牌銷售","data":[100087,340087,230087,540087,340087]}]} ~~~ ### （2）動態數據，接口地址傳過來的內容要符合以下格式： ~~~ {"data":{"categories":["蘋果","三星","小米","oppo","vivo"],"series":[{"name":"手機品牌","data":[1000879,3400879,2300879,5400879,3400879]},{"name":"手機品牌銷售","data":[100087,340087,230087,540087,340087]}]}} ~~~ ### 3\. 刷新時間 ### 這個參數主要針對動態數據設置的，完成數據的實時更新。 * ### 如果你想設置成5秒刷新一次，可以將刷新時間設置成“5000”； ### 4\. 刷新數據 ### 這個參數主要是重新請求以下接口，完成數據的更新。