設置yAxis坐標軸指示器的拖拽手柄

2018-09-12 11:07 更新

考慮到您可能會在觸屏的環(huán)境下使用 ECharts 圖表,所以不僅在 xAxis 的坐標軸指示器中有拖拽手柄,在 yAxis 中同樣也會對坐標軸指示器的拖拽手柄樣式進行設置,該設置過程與在 xAxis 中的設置相差不大。

yAxis.axisPointer.handle   |   Object

在 yAxis 中應用拖拽手柄,適用于觸屏的環(huán)境。參見 例子。

yAxis.axisPointer.handle.show   |   boolean

[ default: false ]

是否開啟坐標軸指示器拖拽手柄,當 show 設為 true 時開啟,這時顯示手柄,并且 axisPointer 會一直顯示。

yAxis.axisPointer.handle.icon   |   *

拖拽手柄的圖標。

  • 可以通過 'image://url' 設置為圖片,其中 url 為圖片的鏈接,或者 dataURI。
  • 可以通過 'path://' 將圖標設置為任意的矢量路徑。這種方式相比于使用圖片的方式,不用擔心因為縮放而產(chǎn)生鋸齒或模糊,而且可以設置為任意顏色。路徑圖形會自適應調(diào)整為合適的大小。路徑的格式參見 SVG PathData??梢詮?Adobe Illustrator 等工具編輯導出。

參見 使用圖片的例子

yAxis.axisPointer.handle.size   |   number, Array

[ default: 45 ]

拖拽手柄的尺寸,可以設置單值,如 45,也可以設置為數(shù)組:[width, height]。

yAxis.axisPointer.handle.margin   |   number

[ default: 50 ]

拖拽手柄與 y 軸的距離。注意,這是手柄中心點和 y 軸的距離。

yAxis.axisPointer.handle.color   |   string

[ default: '#333' ]

拖拽手柄的顏色。

yAxis.axisPointer.handle.throttle   |   number

[ default: 40 ]

手柄拖拽時觸發(fā)視圖更新周期,單位為毫秒,調(diào)大這個數(shù)值可以改善性能,但是降低體驗。

yAxis.axisPointer.handle.shadowBlur   |   number

[ default: 3 ]

拖拽手柄圖形陰影的模糊大小。

該屬性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起設置圖形的陰影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

yAxis.axisPointer.handle.shadowColor   |   Color

[ default: #aaa ]

拖拽手柄陰影的顏色。支持的格式同color。

yAxis.axisPointer.handle.shadowOffsetX   |   number

[ default: 2 ]

拖拽手柄陰影在水平方向上的偏移距離。

yAxis.axisPointer.handle.shadowOffsetY   |   number

[ default: 0 ]

拖拽手柄陰影在垂直方向上的偏移距離。

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號