基本折線圖

基本折線圖是折線圖的一種，能通過多系列數據配置的方式，展示同一類目下不同數據的變化，能夠以折線和區域相結合的方式，智慧地展示多維的數據變化趨勢。本文檔為你介紹基本折線圖各配置項的含義，幫助你快速準確地使用基本折線圖組件。

配置

• 基礎設置

  • width：組件在編輯器中的寬度

  • height：組件在編輯器中的高度

  • top：組件與編輯器頂部的距離

  • left：組件與編輯器左側的距離

• 畫布間距

  • 頂間距：該圖表與元件邊界頂部的距離，單位為px

  • 右間距：該圖表與元件邊界右側的距離，單位為px

  • 底間距：該圖表與元件邊界底部的距離，單位為px

  • 左間距：該圖表與元件邊界左側的距離，單位為px

• 標題

  • 顯示/隱藏：是否展示該圖表的標題

  • 標題名稱：該圖表的標題的名稱

  • 左邊距：標題離容器左側的距離

  • 上邊距：標題離容器上側的距離

  • 文本樣式

    • 字型大小：標題的字體大小

    • 顏色：標題的顏色，支持hex、rgb以及rgba格式的色值

    • 字體：標題的字體

    • 字體粗細：標題字體的粗細

• 提示框

  • 顯示/隱藏：當滑鼠懸浮到圖表上的點時，是否展示其提示的資訊

  • 觸發類型：如何觸發提示框的展示

  • 格式：提示框的展示內容可支援自訂配置，其中{a}表示系列名稱，{b}表示類目軸的值，{c}表示數值

  

  • 背景顏色：提示框的背景顏色，支持hex、rgb以及rgba格式的色值

  • 邊線顏色：提示框邊線的顏色，支持hex、rgb以及rgba格式的色值

  • 邊線寬度：提示框邊線的寬度，單位px

  • 內邊距：提示框的內邊距，例如："5,5,5,5"，代表上右下左邊距分別為5px、5px、5px、5px

• 圖例

  • 顯示/隱藏：是否展示該表圖的圖例

  • 左間距：圖例與容器左側的距離

  • 頂間距：圖例與容器上側的距離

  • 排列方向：圖例的排列方向，可選擇水準 or 垂直進行展示

  • 圖例圖示：圖例的圖示，可選圓形、方形、三角形、菱形圖示進行展示

  • 文本樣式

    • 字型大小：圖例的字體大小

    • 顏色：圖例的顏色，支持hex、rgb以及rgba格式的色值

    • 字體：圖例的字體

    • 字體粗細：圖例的字體粗細

• X軸

  • 顯示/隱藏：是否展示該圖表的x軸

  • 兩端留白：控制資料起點是否從零刻度開始，建議使用兩端留白，比較美觀

  

  • 坐標軸名稱

    • x軸名稱：x軸的名稱

    • x軸名稱位置：x軸的名稱位置，可選起點處、居中、終點處

    • 軸線間距：x軸的名稱與軸線的距離

    • 樣式

      • 顏色：坐標軸名稱的顏色，支持hex、rgb以及rgba格式的色值

      • 字體大小：坐標軸名稱的字體大小

      • 字體粗細：坐標軸名稱的字體粗細

      • 字體：坐標軸名稱的字體

  

  • 軸線

    • 顯示/隱藏：是否展示x軸的軸線

    • 軸線樣式

      • 顏色：軸線的顏色，支持hex、rgb以及rgba格式的色值

      • 樣式：軸線可選實線 or 虛線進行展示

      • 寬度：控制軸線的粗細，單位px

  

  • 刻度值

    • 顯示/隱藏：是否展示x軸的刻度值

    • 字型大小：刻度值的字體大小

    • 顏色：刻度值的顏色，支持hex、rgb以及rgba格式的色值

    • 字體：刻度值的字體

    • 字體粗細：刻度值字體的粗細

  

  • 刻度線

    • 顯示/隱藏：是否展示x軸上的刻度線

    • 向內朝向：控制刻度線的朝向

    

    • 對齊標籤：坐標軸刻度是否和標籤對齊

    

    • 刻度線樣式

      • 顏色：刻度線的顏色，支持hex、rgb以及rgba格式的色值

      • 線寬：刻度線的線寬，單位px

  • 格線

    • 顯示/隱藏：是否展示圖表區域中的格線

    • 格線樣式

      • 顏色：格線的顏色，支持hex、rgb以及rgba格式的色值

      • 樣式：格線的樣式，可選實線、虛線、點進行展示

      • 線寬：格線的線寬，單位px

  

• Y軸

  y軸的配置與x軸基本類似，具體配置應用可參照x軸

  • 顯示/隱藏：是否展示該圖表的y軸

  • 坐標軸名稱

    • y軸名稱：y軸的名稱

    • y軸名稱位置：y軸的名稱位置，可選起點處、居中、終點處

    • 軸線間距：y軸的名稱與軸線的距離

    • 樣式

      • 顏色：坐標軸名稱的顏色，支持hex、rgb以及rgba格式的色值

      • 字體大小：坐標軸名稱的字體大小

      • 字體粗細：坐標軸名稱的字體粗細

      • 字體：坐標軸名稱的字體

  • 軸線

    • 顯示/隱藏：是否展示y軸的軸線

    • 軸線樣式

      • 顏色：軸線的顏色，支持hex、rgb以及rgba格式的色值

      • 樣式：軸線可選實線 or 虛線進行展示

      • 寬度：控制軸線的粗細，單位px

  • 刻度值

    • 顯示/隱藏：是否展示y軸的刻度值

    • 字型大小：刻度值的字體大小

    • 顏色：刻度值的顏色，支持hex、rgb以及rgba格式的色值

    • 字體：刻度值的字體

    • 字體粗細：刻度值字體的粗細

  • 刻度線

    • 顯示/隱藏：是否展示x軸上的刻度線

    • 向內朝向：控制刻度線的朝向

  • 格線

    • 顯示/隱藏：是否展示圖表區域中的格線(按照x軸的刻度進行劃分)

    • 格線樣式

      • 顏色：格線的顏色，支持hex、rgb以及rgba格式的色值

      • 樣式：格線的樣式，可選實線、虛線、點進行展示

      • 線寬：格線的線寬，單位px

• 資料數列

  該配置項為一個陣列，可配置多個系列，編輯器將遍歷資料，使資料通過一個或多個系列配置迴圈渲染。若需要自訂某些資料為特定樣式則需要手動對資料進行排序

  • 列欄位名：與資料配置中的欄位一致，控制圖表一組資料的展示

  • 系列名：通過系列名，可自訂圖例的名稱

  

  • 拐點樣式：資料點的樣式，可選不顯示、圓點、圓圈進行展示

  • 標籤

    • 顯示/隱藏：是否展示此系列下圖表的標籤

    • 字型大小：標籤的字體大小

    • 顏色：標籤的顏色，支持hex、rgb以及rgba格式的色值

    • 字體：標籤的字體

    • 字體粗細：標籤字體的粗細

  

  • 折線樣式

    • 顏色：折線的顏色，支持hex、rgb以及rgba格式的色值

    • 線寬：格線的線寬，單位px

    • 樣式：折線的樣式，可選實線、虛線、點進行展示

  • 曲線平滑：開啟後，折線將變成連續的曲線進行展示

  

  • 區域填滿：開啟後，該折線區域將進行漸變展示

  

數據

return [{
    "x": "1月",
    "y1": 215,
    "y2": 245
}, ......]

• x：類目軸欄位

• y：數據軸自訂欄位元，需要與每個序列配置項中的列欄位元名一致