13518219792

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

创新互联ECharts教程:设置yAxis坐标轴指示器的拖拽手柄

考虑到您可能会在触屏的环境下使用 ECharts 图表,所以不仅在 xAxis 的坐标轴指示器中有拖拽手柄,在 yAxis 中同样也会对坐标轴指示器的拖拽手柄样式进行设置,该设置过程与在 xAxis 中的设置相差不大。

yAxis.axisPointer.handle   |   Object

在 yAxis 中应用拖拽手柄,适用于触屏的环境。参见 例子。

yAxis.axisPointer.handle.show   |   boolean

[ default: false ]

是否开启坐标轴指示器拖拽手柄,当 show 设为 true 时开启,这时显示手柄,并且 axisPointer 会一直显示。

yAxis.axisPointer.handle.icon   |   *

拖拽手柄的图标。

参见 使用图片的例子

yAxis.axisPointer.handle.size   |   number, Array

[ default: 45 ]

拖拽手柄的尺寸,可以设置单值,如 45,也可以设置为数组:[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 ]

手柄拖拽时触发视图更新周期,单位为毫秒,调大这个数值可以改善性能,但是降低体验。

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 ]

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


文章标题:创新互联ECharts教程:设置yAxis坐标轴指示器的拖拽手柄
网页路径:http://cdbrznjsb.com/article/ccidiii.html

其他资讯

让你的专属顾问为你服务