详解Echarts 基本折线图的样式数据与交互配置 - DataV

本文介紹Echarts 基本折線圖的圖表樣式和配置面板的功能。

圖表樣式

配置面板

搜尋配置：單擊配置面板右上方的搜尋配置，可在搜尋配置面板中輸入您需要搜尋的配置項名稱，快速定位到該配置項，系統支援模糊比對。詳情請參見搜尋資產配置。
圖表尺寸：包括組件的寬度和高度，單位為px。可單擊表徵圖鎖定組件的寬高比，等比例修改組件的寬高。再次單擊進行解鎖，解鎖後寬高比不受限制。
圖表位置：包括組件的橫座標和縱座標，單位為px。橫座標為組件左上方距離頁面左邊界的像素距離，縱座標為組件左上方距離頁面上邊界的像素距離。
旋轉角度：以組件的中心為中心點，進行旋轉，單位為度（°）。
- 手動輸入角度值，控制組件的旋轉角度。
- 拖動表徵圖內的黑點，控制組件的旋轉角度。
- 單擊表徵圖，控制組件左右翻轉樣式。
- 單擊表徵圖，控制組件上下翻轉樣式。
不透明度：取值範圍為0~1。為0時，圖表隱藏；為1時，圖表全部顯示。預設為1。
渲染引擎：設定折線圖的渲染引擎。包括canvas和svg。
圖例：單擊右側的眼睛表徵圖顯示圖例樣式。
- 水平位置：單擊下拉式清單，選擇圖例標記和文本的對齊。
  - 自動：預設自動，根據組件的位置和朝向決定。
  - 靠左對齊：當圖形在文字左邊時，為靠左對齊。
  - 置中對齊：當圖例的圖形與文字重疊時，為置中對齊。
  - 靠右對齊：當圖形在文字右邊時，為靠右對齊。
- 垂直位置：單擊下拉式清單，選擇圖例標記和文本的對齊。
  - 自動：預設自動，根據組件的位置和朝向決定。
  - 頂部對齊：當圖形在視窗上方時，為頂部對齊。
  - 置中對齊：當圖形在視窗中間時，為置中對齊。
  - 底部對齊：當圖形在視窗下方時，為底部對齊。
- 朝向：單擊下拉式清單，選擇圖例的布局朝向。
  - 水平：圖例水平分布。
  - 垂直：圖例垂直分布。
- 內邊距：單擊+或-號，或手動輸入數值，調整圖例內邊距，單位px，預設各方向內邊距為5。
- 元素間距：單擊+或-號，或手動輸入數值，調整圖例每項之間的距離。橫向布局時為水平間隔，縱向布局時為縱向間隔。
- 文本樣式
  - 顏色：參考顏色選取器說明，修改圖例文本的顏色。
  - 字型樣式：圖例文本的字型風格。
  - 字型粗細：圖例文本的字型粗細。
  - 字型：圖例文本的字型系列。
  - 字型大小：單擊+或-號，或手動輸入數值，改變圖例字型的大小。
網格：單擊右側的表徵圖顯示網格樣式。
- 左邊距：單擊+或-號，或手動輸入數值，調整網格左邊距，單位px。
- 上邊距：單擊+或-號，或手動輸入數值，調整網格上邊距，單位px。
- 右邊距：單擊+或-號，或手動輸入數值，調整網格右邊距，單位px。
- 下邊距：單擊+或-號，或手動輸入數值，調整網格下邊距，單位px。
x軸：單擊右側的眼睛表徵圖顯示x軸樣式。
- 位置：設定x軸在視窗的位置。
  - 底部：x軸在視窗的底部位置。
  - 頂部：x軸在視窗的頂部位置。
- 名稱：自訂x軸名稱。
- 名稱位置：x軸名稱的位置，可選，包括起點、終點或置中，預設值為終點。
- 名稱樣式
  - 顏色：參考顏色選取器說明，修改x軸名稱文本的顏色。
  - 字型樣式：x軸名稱的字型風格。
  - 字型粗細：x軸名稱的字型粗細。
  - 字型：x軸名稱的字型系列。
  - 字型大小：單擊+或-號，或手動輸入數值，修改x軸名稱的字型大小。
- 名稱間隔：單擊+或-號，或手動輸入數值，修改座標軸名稱與軸線之間的距離。
- 名稱旋轉：單擊+或-號，或手動輸入數值，修改座標軸名稱旋轉的角度值。
- 反向：勾選後，座標軸反向顯示；去勾選，座標軸正向顯示。
- 留白：勾選後，座標軸兩側留白；去勾選，座標軸兩側不留白。
- 靜態：勾選後，座標軸為靜態無法互動。
- 軸線：單擊右側的眼睛表徵圖顯示x軸軸線。
  - 在零上：x 軸或者 y 軸的軸線是否在另一個軸的 0 刻度上，只有在另一個軸為數值軸且包含 0 刻度時有效。
  - 線樣式
    - 顏色：參考顏色選取器說明，修改x軸軸線的顏色。
    - 寬度：單擊+或-號，或手動輸入數值，修改x軸軸線的寬度。
    - 類型：座標軸軸線的類型。可選，包括實線、虛線和點線。
    - 透明度：單擊+或-號，或手動輸入數值，修改x軸軸線的透明度。範圍為 [0,1]。
- 刻度標記：單擊右側的眼睛表徵圖顯示x軸刻度。
  - 和標籤對齊：在勾選留白時有效，可以保證刻度標記和標籤對齊。
  - 內部：勾選後，座標軸刻度朝內；去勾選，座標軸刻度朝外。
  - 長度：單擊+或-號，或手動輸入數值，修改座標軸刻度的長度。
  - 線樣式
    - 顏色：參考顏色選取器說明，修改刻度標記的顏色。
    - 寬度：單擊+或-號，或手動輸入數值，修改刻度標記的寬度。
    - 類型：座標軸軸線的類型。可選，包括實線、虛線和點線。
    - 透明度：單擊+或-號，或手動輸入數值，修改刻度標記的透明度。範圍為 [0,1]。
- 刻度標籤：單擊右側的眼睛表徵圖顯示x軸刻度標籤。
  - 顯示格式：設定刻度標籤的顯示格式，例如06，06:00和06時。
  - 分割間隔：座標軸刻度標籤的顯示間隔，在類目軸中有效，預設會採用標籤不重疊的策略間隔顯示標籤。可以設定成 0 強制顯示所有標籤。如果設定為 1，表示隔一個標籤顯示一個標籤，如果值為 2，表示隔兩個標籤顯示一個標籤，以此類推。
  - 內部：勾選後，座標軸刻度標籤朝內；去勾選，座標軸刻度標籤朝外。
  - 旋轉：刻度標籤旋轉的角度，在類目軸的類目標籤顯示不下的時候可以通過旋轉防止標籤之間重疊。旋轉的角度從 -90 度到 90 度。
  - 外間距：刻度標籤與軸線之間的距離。
  - 顯示最小標籤：勾選後，顯示最小的刻度標籤。預設自動判定，即如果標籤重疊，不會顯示最小的刻度標籤。
  - 顯示最大標籤：勾選後，顯示最大的刻度標籤。預設自動判定，即如果標籤重疊，不會顯示最大的刻度標籤。
  - 顏色：參考顏色選取器說明，修改座標軸刻度標籤的顏色。
  - 字型樣式：座標軸刻度標籤文字的字型風格。
  - 字型粗細：座標軸刻度標籤文字的字型粗細。
  - 字型：座標軸刻度標籤文字的字型系列。
  - 字型大小：座標軸刻度標籤文字的字型大小。
- 分割線：單擊右側的眼睛表徵圖顯示分割線。
  - 線樣式
    - 顏色：參考顏色選取器說明，修改x軸分割線的顏色。
    - 寬度：單擊+或-號，或手動輸入數值，修改x軸分割線的線寬。
    - 類型：x軸分割線的類型。可選，包括實線、虛線和點線。
    - 透明度：單擊+或-號，或手動輸入數值，修改x軸分割線的透明度，範圍為 [0,1]。
y軸：請參考x軸樣式進行配置。
提示框：單擊右側的眼睛表徵圖顯示提示框。
- 觸發類型：自訂觸發類型，可選，預設為座標軸。
  - 資料項目：資料項目圖形觸發，主要在散佈圖，餅圖等無類目軸的圖表中使用。
  - 座標軸：座標軸觸發，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用。
  - 不觸發：什麼都不觸發。
- 座標軸指標：單擊右側的眼睛表徵圖顯示座標軸指標。
  - 類型：指標類型，包括直線指標、陰影指標和交叉指標。
  - 自動吸附：勾選後，座標軸指標自動吸附到點上。這個功能在數值軸和時間軸上比較有意義，可以自動尋找細小的數值點。
  - 指示線樣式
    - 顏色：參考顏色選取器說明，修改指示線的顏色。
    - 寬度：單擊+或-號，或手動輸入數值，修改指示線的線寬。
    - 類型：指示線的類型。可選，包括實線、虛線和點線。
    - 透明度：單擊+或-號，或手動輸入數值，修改指示線的透明度，範圍為 [0,1]。
  - 指示陰影樣式
    - 顏色：參考顏色選取器說明，修改指示陰影的顏色。
    - 透明度：單擊+或-號，或手動輸入數值，修改指示陰影的透明度，範圍為 [0,1]。
  - 指示交叉樣式
    - 顏色：參考顏色選取器說明，修改指示交叉的顏色。
    - 寬度：單擊+或-號，或手動輸入數值，修改指示交叉的線寬。
    - 類型：指示交叉的類型。可選，包括實線、虛線和點線。
    - 透明度：單擊+或-號，或手動輸入數值，修改指示交叉的透明度，範圍為 [0,1]。
  - 背景色：提示框文字標籤的背景顏色。
  - 文本樣式
    - 顏色：參考顏色選取器說明，修改提示框標籤文本的顏色。
    - 字型樣式：提示框文本的字型風格。
    - 字型粗細：提示框標籤文本的字型粗細。
    - 字型：提示框標籤文本的字型系列。
    - 字型大小：提示框標籤文本的字型大小。
系列：單擊右側的或表徵圖，添加或刪除一個條件樣式。單擊或表徵圖配置多個條件樣式的排列樣式。單擊表徵圖，即可複製當前選中的條件樣式配置並新增一個同樣配置的條件樣式。
- 名稱：自訂系列名稱，需要與資料中的s欄位值配合使用。
- 標記圖形：自訂標籤圖形，預設值為圓形。標記類型包括無，圓形，矩形，圓角矩形，三角形，菱形，圖釘和箭頭，詳細請參考ECharts官網。
- 標記尺寸：單擊+或-號，或手動輸入數值，修改標記尺寸大小，單位為px。
- 標記旋轉角度：單擊+或-號，或手動輸入數值，修改標記旋轉角度，單位為度。
- 顯示表徵圖：單擊右側的眼睛表徵圖顯示表徵圖樣式。
- 懸浮動畫：勾選後，開啟滑鼠hover時的動畫效果。
- 圖例聯動高亮：勾選後，啟動圖例hover時的聯動高亮。
- 階梯線圖：設定折線圖的階梯樣式，包括關閉、當前點拐彎、中間點拐彎和下一點拐彎。
- 標籤：單擊右側的眼睛表徵圖顯示標籤樣式。
  - 位置：設定標籤相當對於折線圖的位置，包括但不限於top、left和inside。
  - 定位距離：設定標籤相對於折線圖上邊框線的距離。
  - 旋轉：標籤旋轉的角度，在類目軸的類目標籤顯示不下的時候可以通過旋轉防止標籤之間重疊。旋轉的角度從 -90 度到 90 度。
  - 顏色：參考顏色選取器說明，修改標籤文本的顏色。
  - 字型樣式：標籤文本的字型風格。
  - 字型粗細：標籤文本的字型粗細。
  - 字型：標籤文本的字型系列。
  - 字型大小：標籤文本的字型大小。
- 元素樣式
  - 顏色：參考顏色選取器說明，修改元素樣式的顏色。
  - 透明度：單擊+或-號，或手動輸入數值，修改指示交叉的透明度，範圍為 [0,1]。
- 線樣式
  - 顏色：參考顏色選取器說明，修改線的顏色。
  - 寬度：單擊+或-號，或手動輸入數值，修改線的線寬。
  - 類型：線的類型。可選，包括實線、虛線和點線。
  - 透明度：單擊+或-號，或手動輸入數值，修改線的透明度，範圍為 [0,1]。
- 地區樣式
  - 顏色：參考顏色選取器說明，修改地區樣式的顏色。
  - 透明度：單擊+或-號，或手動輸入數值，修改地區交叉的透明度，範圍為 [0,1]。
- 平滑曲線：單擊+或-號，或手動輸入數值，修改折線的平滑程度，單位為%，範圍為 [0,1]。
動畫：勾選後，開啟動畫效果。
動畫時間長度：單擊+或-號，或手動輸入數值，修改初始動畫的時間長度，單位為毫秒。
緩動效果：單擊下拉框，選擇資料更新動畫的緩動效果，預設為cubicOut。

資料面板

配置欄位說明

欄位	說明
`x`	用於配置折線圖中每個x軸的類目，即x軸的值。
`y`	用於配置折線圖中每個點的值。
`s`	（可選）系列值，與樣式面板中的系列配置項配合使用。

配置項	說明
受控模式	開啟開關，資產初始化狀態下不請求資料，僅通過回調ID或藍圖編輯器配置的方法發起請求資料；關閉開關，可以使用自動更新請求資料。開關預設為關閉狀態。
自動更新請求	選中後可以設定動態輪詢，還可以手動輸入輪詢的時間頻次。取消選中後則不會自動更新，需要手動重新整理頁面，或通過藍圖編輯器和回調ID事件來觸發請求更新資料。
資料來源	單擊配置資料來源，可在設定資料來源面板中修改資料來源類型和資料查詢代碼、預覽資料來源返回結果以及查看資料響應結果，詳情請參見配置資產資料。
資料過濾器	資料過濾器提供資料結構轉換、篩選和一些簡單的計算功能。單擊添加過濾器，可在設定資料來源面板配置資料過濾器指令碼，詳情請參見過濾器使用說明。
資料響應結果	展示資料請求的響應結果。當資料來源發生改變時，可單擊右側的表徵圖，即時查看資料響應結果。

互動面板

互動說明

互動	說明
當點擊資料項目時	選中啟用，開啟組件互動功能。基本折線圖組件擁有互動配置，當單擊選中某個資料項目時拋出回調值，預設拋出資料中的x和y欄位。具體配置請參見如何配置數字翻牌器組件的回調ID。
當圖例點擊時	選中啟用，開啟組件互動功能。基本折線圖組件擁有互動配置，當單擊某個圖例時拋出回調值，預設拋出資料中的selected欄位。具體配置請參見如何配置數字翻牌器組件的回調ID。

藍圖編輯器互動配置

在畫布編輯器頁面，按右鍵組件，選擇匯出到藍圖編輯器。
單擊頁面左上方的表徵圖。

在藍圖編輯器配置頁面，單擊匯入節點欄內的基本折線圖組件，在畫布中可以看到如下圖所示的基本折線圖的藍圖編輯器配置參數。

事件

事件	說明
當資料介面請求完成時	資料介面請求返回並經過過濾器處理後拋出的事件，同時拋出處理後的JSON格式的資料。具體資料樣本請參見畫布編輯器中組件右側配置面板資料頁簽的資料響應結果地區。
當資料介面請求失敗時	資料介面請求失敗時（請求失敗的情況可能是：網路問題或介面報錯等）返回並經過過濾器處理後拋出的事件，同時拋出處理後的JSON格式的資料。具體資料樣本請參見畫布編輯器中組件右側配置面板資料頁簽的資料響應結果地區。
當點擊資料項目時	當單擊基本折線圖的柱子時拋出的事件，同時拋出該柱子對應的資料項目。
當圖例點擊時	當單擊基本折線圖的圖例時拋出的事件，同時拋出該柱子對應的資料項目。

動作

動作	說明
請求資料介面	重新請求服務端資料，上遊資料處理節點或圖層節點拋出的資料將作為參數。例如基本折線圖配置了API資料來源為`https://api.test`，傳到請求資料介面動作的資料為`{ id: '1'}`，則最終請求介面為`https://api.test?id=1`。
匯入資料介面	按組件繪製格式處理資料後，匯入組件，重新繪製。不需要重新請求服務端資料。具體資料樣本請參見畫布編輯器中組件右側配置面板資料頁簽的資料響應結果地區。
高亮顯示	動作傳入資料為object類型，參數包括`seriesName`（系列名）、`seriesIndex`（系列索引）、`dataIndex`（資料索引）和`name`（資料名）。資料樣本： `{ "seriesName": "", "seriesIndex": 1, "dataIndex": 1, "name": "" }`
取消高亮	動作傳入資料為object類型，參數包括`seriesName`（系列名）、`seriesIndex`（系列索引）、`dataIndex`（資料索引）和`name`（資料名）。資料樣本： `{ "seriesName": "", "seriesIndex": 1, "dataIndex": 1, "name": "" }`
顯示提示框	動作傳入資料為object類型，參數包括`dataindex`（資料索引）、`name`（資料名）、`x`（橫座標位置）和`y`（縱座標位置）。資料樣本： `{ "dataIndex": 1, "name": "", "x": 1, "y": 1 }`
隱藏提示框	隱藏提示框，不需要參數。
圖例控制	動作傳入資料為object類型，參數包括`type`（圖例動作類型）和`name`（圖例名稱）。資料樣本： `{ "type": "legendToggleSelect", "name": "" }`
更新群組件配置	動態更新組件的樣式配置。需要先在組件的配置面板中，單擊複製配置到剪貼簿，擷取組件配置資料。再根據需要在藍圖編輯器配置頁面的資料處理節點中更改對應樣式的欄位值。
顯示	顯示組件，參考資料樣本如下。 `return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }`
隱藏	顯示組件，參考資料樣本如下。 `return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }`
切換顯隱狀態	切換組件顯示或者隱藏，參考資料樣本如下。 `return { "animationIn": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }, "animationOut": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" } }`
移動	將組件移動到指定位置，參考資料樣本如下。 `return{ // 移動方式。絕對位置：to，相對定位：by。預設值：to。 "positionType": "to", // 指定位置。x座標，y座標。 "attr": { "x": 0, "y": 0 }, // 動畫方式。 "animation": { "enable": false, // 動畫延時。 "animationDuration": 1000, // 動畫曲線。可選值為：linear\|easeInOutQuad\|easeInOutExpo。 "animationEasing": "linear" } }`