本文介紹Echarts K線圖的圖表樣式和配置面板的功能。
圖表樣式
樣式面板
搜索配置:單擊樣式面板右上角的搜索配置項圖標,可在搜索配置面板中輸入您需要搜索的配置項名稱,快速定位到該配置項,系統支持模糊匹配。詳情請參見搜索配置項。
尺寸:包括組件的寬度和高度,單位為px。
定位:包括組件的橫坐標和縱坐標,單位為px。橫坐標為組件左上角距離頁面左邊界的像素距離,縱坐標為組件左上角距離頁面上邊界的像素距離。
旋轉:以組件的中心為中心點,進行旋轉,單位為度(°)。
手動輸入角度值,控制組件的旋轉角度。
單擊圖標,控制組件左右翻轉樣式。
單擊圖標,控制組件上下翻轉樣式。
不透明度:取值范圍為0~1。為0時,圖表隱藏;為1時,圖表全部顯示。默認為1。
圖例:單擊右側的眼睛圖標顯示圖例樣式。
左側:圖例與組件左側邊界的距離,默認為 25%。支持以下幾種輸入:
具體像素值,例如 20。
相對于容器高寬的百分比,例如 20%。
left,center 或 right,組件會根據相應的位置自動對齊。
頂部:圖例與組件上側邊界的距離,默認為 auto。支持以下幾種輸入:
具體像素值,例如 20。
相對于容器高寬的百分比,例如 20%。
left,center 或 right,組件會根據相應的位置自動對齊。
右側:圖例與組件右側邊界的距離,默認為 auto。支持以下幾種輸入:
具體像素值,例如 20。
相對于容器高寬的百分比,例如 20%。
left,center 或 right,組件會根據相應的位置自動對齊。
底部:圖例與組件下側邊界的距離,默認為 auto。支持以下幾種輸入:
具體像素值,例如 20。
相對于容器高寬的百分比,例如 20%。
left,center 或 right,組件會根據相應的位置自動對齊。
寬度:手動輸入數值,調整圖例的寬度。默認值為auto,自適應圖例的寬度。
高度:手動輸入數值,調整圖例的高度,默認值為auto,自適應圖例的高度。
朝向:單擊下拉列表,選擇圖例的布局朝向。
水平:圖例水平分布。
垂直:圖例垂直分布。
對齊:單擊下拉列表,選擇圖例標記和文本的對齊方式。
左側對齊:當圖形在文字左邊時,為左側對齊。
居中對齊:當圖例的圖形與文字重疊時,為居中對齊。
右側對齊:當圖形在文字右邊時,為右側對齊。
內邊距:單擊+或-號,或手動輸入數值,調整圖例內邊距,單位px,默認各方向內邊距為5。
元素間距:單擊+或-號,或手動輸入數值,調整圖例每項之間的距離。橫向布局時為水平間隔,縱向布局時為縱向間隔。
圖形寬度:單擊+或-號,或手動輸入數值,調整圖例標記的圖形寬度。
圖形高度:單擊+或-號,或手動輸入數值,調整圖例標記的圖形高度。
選擇模式:單擊右側的眼睛圖標顯示選擇模式。
關閉顏色:參考顏色選擇器,修改圖例關閉時的顏色。僅在預覽或發布頁面,單擊圖例元素時,可看到效果。
文本樣式
顏色:參考顏色選擇器,修改圖例文本的顏色。
字體樣式:圖例文本的字體風格。
字體粗細:圖例文本的字體粗細。
字體:圖例文本的字體系列。
字號:單擊+或-號,或手動輸入數值,改變圖例字體的大小。
背景色:參考顏色選擇器,修改圖例的背景顏色。
邊框色:參考顏色選擇器,修改圖例的邊框顏色。
邊框粗細:單擊+或-號,或手動輸入數值,調整圖例邊框的粗細。
網格:單擊右側的眼睛圖標顯示網格樣式。
左側:網格與組件左側邊界的距離,默認為 3%。支持以下幾種輸入:
具體像素值,例如 20。
相對于容器高寬的百分比,例如 20%。
left,center 或 right,組件會根據相應的位置自動對齊。
頂部:網格與組件上側邊界的距離,默認為 60。支持以下幾種輸入:
具體像素值,例如 20。
相對于容器高寬的百分比,例如 20%。
left,center 或 right,組件會根據相應的位置自動對齊。
右側:網格與組件右側邊界的距離,默認為 4%。支持以下幾種輸入:
具體像素值,例如 20。
相對于容器高寬的百分比,例如 20%。
left,center 或 right,組件會根據相應的位置自動對齊。
底部:網格與組件下側邊界的距離,默認為 3%。支持以下幾種輸入:
具體像素值,例如 20。
相對于容器高寬的百分比,例如 20%。
left,center 或 right,組件會根據相應的位置自動對齊。
寬度:網格的寬度,值默認值為 auto,寬度自適應。
高度:網格的高度,值默認值為 auto,高度自適應。
自適應布局:勾選后,柱狀圖進行自適應布局;去勾選,柱狀圖根據您配置的樣式進行布局。
背景色:參考顏色選擇器,修改網格的背景顏色,默認透明。
邊框色:參考顏色選擇器,修改網格的邊框顏色,默認透明。
邊框粗細:單擊+或-號,或手動輸入數值,調整網格邊框粗細。
x軸:單擊右側的眼睛圖標顯示x軸樣式。
位移:x軸相對于默認位置的偏移,默認為0。
名稱:自定義x軸名稱。
名稱位置:x軸名稱的位置,可選,包括起點、居中或終點,默認值為 終點。
名稱樣式
顏色:參考顏色選擇器,修改x軸名稱文本的顏色。
字體樣式:x軸名稱的字體風格。
字體粗細:x軸名稱的字體粗細。
字體:x軸名稱的字體系列。
字號:單擊+或-號,或手動輸入數值,修改x軸名稱的字體大小。
名稱間隔:單擊+或-號,或手動輸入數值,修改坐標軸名稱與軸線之間的距離。
名稱旋轉:單擊+或-號,或手動輸入數值,修改坐標軸名稱旋轉的角度值。
反向:勾選后,坐標軸反向顯示;去勾選,坐標軸正向顯示。
留白:勾選后,坐標軸兩側留白;去勾選,坐標軸兩側不留白。
最小值:坐標軸刻度最小值,默認值為數據最小值,表示取數據在該軸上的最小值作為最小刻度。不設置時會自動計算最小值保證坐標軸刻度的均勻分布。
最大值:坐標軸刻度最大值,默認值為數據最大值,表示取數據在該軸上的最大值作為最大刻度。不設置時會自動計算最大值保證坐標軸刻度的均勻分布。
自動伸縮:勾選后,坐標刻度不會強制包含零刻度。只在數值軸中有效,設置了最大值和最小值后該配置項無效。
靜態:勾選后,坐標軸為靜態無法交互。
軸線:單擊右側的眼睛圖標顯示x軸軸線。
在零上:x 軸或者 y 軸的軸線是否在另一個軸的 0 刻度上,只有在另一個軸為數值軸且包含 0 刻度時有效。
軸線樣式
顏色:參考顏色選擇器,修改x軸軸線的顏色。
寬度:單擊+或-號,或手動輸入數值,修改x軸軸線的寬度。
類型:坐標軸軸線的類型??蛇x,包括實線和虛線。
透明度:單擊+或-號,或手動輸入數值,修改x軸軸線的透明度。范圍為 [0,1]。
刻度:單擊右側的眼睛圖標顯示x軸刻度。
和標簽對齊:勾選后,刻度線和標簽對齊。類目軸中在勾選了留白后有效。
分割間隔:單擊+或-號,或手動輸入數值,修改坐標軸刻度的顯示間隔,在類目軸中有效。
內部:勾選后,坐標軸刻度朝內;去勾選,坐標軸刻度朝外。
長度:單擊+或-號,或手動輸入數值,修改坐標軸刻度的長度。
軸線樣式
顏色:單擊下拉框,選擇刻度線顏色的填充樣式,包括顏色填充和漸變填充。參考顏色選擇器,修改刻度線的顏色。
寬度:單擊+或-號,或手動輸入數值,修改刻度線的寬度。
類型:坐標軸軸線的類型??蛇x,包括實線和虛線。
透明度:單擊+或-號,或手動輸入數值,修改刻度線的透明度。范圍為 [0,1]。
刻度標簽:單擊右側的眼睛圖標顯示x軸刻度標簽。
分割間隔:坐標軸刻度標簽的顯示間隔,在類目軸中有效,默認會采用標簽不重疊的策略間隔顯示標簽??梢栽O置成 0 強制顯示所有標簽。如果設置為 1,表示隔一個標簽顯示一個標簽,如果值為 2,表示隔兩個標簽顯示一個標簽,以此類推。
內部:勾選后,坐標軸刻度標簽朝內;去勾選,坐標軸刻度標簽朝外。
旋轉:刻度標簽旋轉的角度,在類目軸的類目標簽顯示不下的時候可以通過旋轉防止標簽之間重疊。旋轉的角度從 -90 度到 90 度。
外間距:刻度標簽與軸線之間的距離。
顯示最小標簽:勾選后,顯示最小的刻度標簽。默認自動判定,即如果標簽重疊,不會顯示最小的刻度標簽。
顯示最大標簽:勾選后,顯示最大的刻度標簽。默認自動判定,即如果標簽重疊,不會顯示最大的刻度標簽。
文本樣式
顏色:參考顏色選擇器,修改坐標軸刻度標簽的顏色。
字體樣式:坐標軸刻度標簽文字的字體風格。
字體粗細:坐標軸刻度標簽文字的字體粗細。
字體:坐標軸刻度標簽文字的字體系列。
字號:坐標軸刻度標簽文字的字體大小。
對齊:坐標軸刻度標簽文字水平對齊方式,包括左側對齊、居中對齊和右側對齊。
對齊方式:可選,支持頂部對齊、居中對齊和底部對齊。
分割線:單擊右側的眼睛圖標顯示分割線。
分割間隔:單擊+或-號,或手動輸入數值,修改坐標軸分隔線的顯示間隔,在類目軸中有效,默認會采用分割線不重疊的策略間隔顯示分割線??梢栽O置成 0 強制顯示所有分割線。如果設置為 1,表示隔一個分割線顯示一個分割線,如果值為 2,表示隔兩個分割線顯示一個分割線,以此類推。
軸線樣式
寬度:單擊+或-號,或手動輸入數值,修改x軸分割線的線寬。
類型:坐標軸軸線的類型。可選,包括實線和虛線。
透明度:單擊+或-號,或手動輸入數值,修改x軸分割線的透明度,范圍為 [0,1]。
分割區域:單擊右側的眼睛圖標顯示分割區域。
分割間隔:單擊+或-號,或手動輸入數值,修改坐標軸分隔區域的顯示間隔,在類目軸中有效,默認會采用分割區域不重疊的策略間隔顯示分割區域。可以設置成 0 強制顯示所有分割區域。如果設置為 1,表示隔一個分割區域顯示一個分割區域,如果值為 2,表示隔兩個分割區域顯示一個分割區域,以此類推。
區域樣式
透明度:單擊+或-號,或手動輸入數值,修改分割區域的透明度,范圍為 [0,1]。
坐標軸指示器:單擊右側的眼睛圖標顯示坐標軸指示器。
類型:指示器類型,可選,包括直線指示器和陰影指示器。
自動吸附:勾選后,坐標軸指示器自動吸附到點上。這個功能在數值軸和時間軸上比較有意義,可以自動尋找細小的數值點。
初始值:坐標軸指示器的初始位置,默認為0。
狀態:坐標軸指示器當前的狀態,勾選后顯示,去勾選后隱藏。
標簽:單擊右側的眼睛圖標顯示坐標軸指示器的標簽。
小數精度:文本標簽中數值的小數點精度,默認根據當前軸的值自動判斷,也可以指定一個整數值,如 2,表示保留兩位小數。
外間距:勾選后,坐標軸指示器標簽與坐標軸之間有一定間距。去勾選,坐標軸指示器標簽與坐標軸之間沒有間距。
文本樣式
顏色:參考顏色選擇器,修改坐標軸指示器標簽文本的顏色。
字體樣式:坐標軸指示器標簽文本的字體風格。
字體粗細:坐標軸指示器標簽文本的字體粗細。
字體:坐標軸指示器標簽文本的字體系列。
字號:坐標軸指示器標簽文本的字體大小。
背景色:坐標軸指示器文本標簽的背景顏色。
邊框色:坐標軸指示器文本標簽的邊框顏色。
邊框粗細:坐標軸指示器文本標簽的邊框粗細。
軸線樣式
顏色:參考顏色選擇器,修改坐標軸軸線的顏色。
寬度:單擊+或-號,或手動輸入數值,修改坐標軸軸線的線寬。
類型:坐標軸軸線的類型??蛇x,包括實線和虛線。
透明度:單擊+或-號,或手動輸入數值,修改坐標軸軸線的透明度,范圍為 [0,1]。
拖拽手柄:單擊右側的眼睛圖標顯示拖拽手柄。
大小:單擊+或-號,或手動輸入數值,修改拖拽手柄的大小。
外間距:單擊+或-號,或手動輸入數值,修改拖拽手柄中心點和軸的距離。
顏色:拖拽手柄的顏色。
刷新頻率:手柄拖拽時觸發大屏更新周期,單位為毫秒,調大這個數值可以改善性能,但是降低體驗。
y軸:請參考本章x軸樣式進行配置。
數據縮放:單擊右側的眼睛圖標顯示數據縮放。
起始百分比:K線圖數據窗口范圍的起始百分比。
結束百分比:K線圖數據窗口范圍的結束百分比。
左側:數據縮放與組件左側邊界的距離,默認為 auto。支持以下幾種輸入:
具體像素值,例如 20。
相對于容器高寬的百分比,例如 20%。
left,center 或 right,組件會根據相應的位置自動對齊。
頂部:數據縮放與組件上側邊界的距離,默認為 auto。支持以下幾種輸入:
具體像素值,例如 20。
相對于容器高寬的百分比,例如 20%。
left,center 或 right,組件會根據相應的位置自動對齊。
右側:數據縮放與組件右側邊界的距離,默認為 auto。支持以下幾種輸入:
具體像素值,例如 20。
相對于容器高寬的百分比,例如 20%。
left,center 或 right,組件會根據相應的位置自動對齊。
底部:數據縮放與組件下側邊界的距離,默認為 auto。支持以下幾種輸入:
具體像素值,例如 20。
相對于容器高寬的百分比,例如 20%。
left,center 或 right,組件會根據相應的位置自動對齊。
朝向:單擊下拉列表,選擇數據縮放的布局朝向。包括水平和垂直。
縮放鎖定:單擊右側的眼睛圖標鎖定縮放。
文本樣式
顏色:參考顏色選擇器,修改文本的顏色。
字體樣式:文本的字體風格。
字體粗細:文本的字體粗細。
字體:文本的字體系列。
字號:單擊+或-號,或手動輸入數值,改變字體的大小。
數據背景樣式
手柄圖標(SVG路徑):手柄圖標所在項目中的SVG路徑。
手柄尺寸:手柄圖標在數據縮放視圖中的尺寸大小。
手柄樣式
提示框:單擊右側的眼睛圖標顯示提示框。
系列:單擊右側的或圖標,添加或刪除一個條件樣式。 單擊或圖標配置多個條件樣式的排列樣式。單擊圖標,即可復制當前選中的條件樣式配置并新增一個同樣配置的條件樣式。
名稱:自定義系列名稱,需要與數據中的
s
字段值配合使用。類型:K線圖的類型,可選。包括K線和折線。
標記圖形:自定義標記圖形,可選,默認值為emptyCircle。標記類型包括 emptyCircle,rect,roundRect,triangle,diamond, pin,arrow, none,也可以配置為圖片的URL或path,詳細請參考ECharts官網。
標記尺寸:單擊+或-號,或手動輸入數值,修改標記圖形的尺寸。
標記旋轉角度:單擊+或-號,或手動輸入數值,修改標記圖形的旋轉角度。
顯示圖標:控制標記圖形的顯隱狀態。
懸浮動畫:勾選后,開啟鼠標hover時的動畫效果。
圖例懸浮鏈接:勾選后,開啟圖標懸浮的鏈接。
堆疊圖:數據堆疊,同個類目軸上系列配置相同的 stack 值可以堆疊放置。
連接空數據:勾選后,可以使用空數據對k線圖進行模擬。
裁剪超出:勾選后,可以將超出窗口的部分裁剪。
階梯線圖:設置是否是階梯線圖。可以設置為true顯示成階梯線圖,也支持設置成start、middle和end分別配置在當前點,當前點與下個點的中間點和下個點拐彎。
標簽
普通項:單擊右側的眼睛圖標顯示普通項(沒有響應鼠標事件的柱子)標簽文本。
位置:設置標簽相當對于K線圖的位置,包括但不限于top、left和inside。
文本樣式
顏色:參考顏色選擇器,修改普通項標簽文本的顏色。
字體樣式:普通項標簽文本的字體風格。
字體粗細:普通項標簽文本的字體粗細。
字體:普通項標簽文本的字體系列。
字號:普通項標簽文本的字體大小。
重點項:單擊右側的眼睛圖標顯示重點項(響應鼠標事件的柱子)標簽文本。
位置:設置標簽相當對于K線圖的位置,包括但不限于top、left和inside。
文本樣式
顏色:參考顏色選擇器,修改重點項標簽文本的顏色。
字體樣式:重點項標簽文本的字體風格。
字體粗細:重點項標簽文本的字體粗細。
字體:重點項標簽文本的字體系列。
字號:重點項標簽文本的字體大小。
元素樣式
普通項
重點項
軸線樣式
普通項
顏色:單擊下拉框,選擇軸線顏色的填充樣式,包括顏色填充和漸變填充。參考顏色選擇器,修改軸線的顏色。
寬度:單擊+或-號,或手動輸入數值,修改軸線的寬度。
類型:軸線的描邊類型,可選,包括實線和虛線。
透明度:單擊+或-號,或手動輸入數值,修改軸線的透明度。范圍為 [0,1]。
平滑曲線:單擊右側的眼睛圖標顯示是否平滑曲線。
單調平滑函數:設置折線圖的平滑程度。
降采樣:折線圖在數據量遠大于當前點時的降采樣策略,參數可選,包括但不限于max、min和average。
靜態:勾選后,該系列不響應和觸發鼠標事件。
動畫:勾選后,開啟動畫效果。
數據源面板
字段 | 說明 |
| 用于配置折線圖中每個x軸的類目,即x軸的值。 |
| 用于配置K線圖當日開盤價的值。 |
| 用于配置K線圖當日收盤價的值。 |
| 用于配置K線圖當日最低價的值。 |
| 用于配置K線圖當日最高價的值。 |
數據項配置 | 說明 |
數據源 | 組件的數據源中通過代碼編輯或可視化編輯展示了組件所包含的數據字段。也可以修改數據類型,靈活配置組件數據。 |
數據映射 | 當您需要自定義圖表字段配置時,可以在數據映射模塊設置不同的字段映射內容,將這些字段映射到組件對應的字段上。無需修改數據源中的字段,就可以實現數據的實時匹配。也可以單擊圖標對字段分別樣式配置。 |
過濾器 | 打開過濾器,選擇已創建的數據過濾器或新建數據過濾器,并配置數據過濾器腳本,實現數據的篩選功能。詳情請參見管理數據過濾器。 |
數據響應結果 | 實時展示了組件所使用的數據。當組件數據源發生變化時,數據響應結果會對應展示最新的數據。如果系統反應延遲,您可以單擊右側的圖標,查看數據響應結果,也可以單擊右側的圖標,獲取組件的最新數據。您也可以單擊查看示例,查看當前組件的響應結果示例。 |
禁止加載態 | 勾選復選框,在組件更新和預覽數據看板時,將看不到組件初始化時的加載內容,去勾選則相反。默認為去勾選狀態。 |
受控模式 | 勾選復選框,組件初始化狀態下不請求數據,僅通過全局變量或藍圖編輯器配置的方法發起請求數據;去勾選復選框,可以使用自動更新請求數據。默認為去勾選狀態。 |
自動更新請求 | 勾選復選框,可以手動輸入輪詢的時間頻次設置動態輪詢。清除后則不會自動更新,需要手動刷新頁面,或通過藍圖編輯器和全局變量事件來觸發請求更新數據。 |
高級面板
交互 | 說明 |
當點擊數據項時 | 打開開關,開啟組件交互功能。當單擊選中某個數據項時拋出回調值,默認拋出數據中的 |
當圖例點擊時 | 打開開關,開啟組件交互功能。當單擊某個圖例時拋出回調值,默認拋出數據中的 |
藍圖交互
單擊頁面左上角的圖標,進入藍圖頁面。
在圖層節點頁簽下,添加當前組件至主畫布中。
查看藍圖配置參數。
事件
事件
說明
當數據接口請求完成時
數據接口請求返回并經過過濾器處理后拋出的事件,同時拋出處理后的JSON格式的數據。具體數據示例請參見畫布編輯器中組件右側配置面板數據源頁簽的數據響應結果區域。
當點擊數據項時
當單擊K線圖的數據時拋出的事件,同時拋出對應的數據項。
當圖例點擊時
當單擊K線圖的圖例時拋出的事件,同時拋出對應的數據項。
動作
動作
說明
請求數據接口
重新請求服務端數據,上游數據處理節點或圖層節點拋出的數據將作為參數。例如K線圖配置了API數據源為
https://api.test
,傳到請求數據接口動作的數據為{ id: '1'}
,則最終請求接口為https://api.test?id=1
。導入數據接口
按組件繪制格式處理數據后,導入組件,重新繪制。不需要重新請求服務端數據。具體數據示例請參見畫布編輯器中組件右側配置面板數據源頁簽的數據響應結果區域。
顯示提示框
動作傳入數據為object類型,參數包括
dataindex
(數據索引)、name
(數據名)、x
(橫坐標位置)和y
(縱坐標位置)。參考數據示例{ "dataIndex": 1, "name": "", "x": 1, "y": 1 }
隱藏提示框
隱藏提示框,不需要參數。
圖例控制
動作傳入數據為object類型,參數包括
type
(圖例動作類型)和name
(圖例名稱)。參考數據示例{ "type": "",//圖例動作類型包括: legendSelect, legendUnSelect, legendToggleSelect "name": "" }
移動
將組件移動到指定位置,參考數據示例。
{ // 移動方式。絕對定位:to,相對定位:by。默認值:to。 "positionType": "to", // 指定位置。x坐標,y坐標。 "attr": { "x": 0, "y": 0 }, // 動畫方式。 "animation": { "enable": false, // 動畫延時。 "animationDuration": 1000, // 動畫曲線??蛇x值為:linear|easeInOutQuad|easeInOutExpo。 "animationEasing": "linear" } }
切換顯隱
切換組件顯示或者隱藏,不需要參數。
顯示
顯示組件,參考數據示例。
{ "animationType": "",//動畫方式,可選值:fade,不填無動畫。 "animationDuration": 1000,//動畫延遲,單位ms。 "animationEasing": ""http://動畫曲線 }
隱藏
隱藏組件,參考數據示例。
{ "animationType": "",//動畫方式,可選值:fade,不填無動畫。 "animationDuration": 1000,//動畫延遲,單位ms。 "animationEasing": ""http://動畫曲線 }
更新組件配置
動態更新組件的樣式配置。需要先在組件的樣式面板中,單擊復制配置到剪貼板,獲取組件配置數據。再根據需要在藍圖編輯器配置頁面的數據處理節點中更改對應樣式的字段值。