JSRUN 用代码说话

径向轴指示器的拖拽手柄

编辑教程

径向轴指示器的拖拽手柄

同样,如果在触屏的环境中使用 ECharts 极坐标系的径向轴指示器的时候,我们可能需要启用一个拖拽手柄 ,通过该拖拽手柄您就能很好的控制径向轴的指示器了。那么,接下来我们看看如何对该拖拽手柄进行属性设置。


radiusAxis.axisPointer.handle

Object 径向轴指示器的拖拽手柄,适用于触屏的环境。参见 例子。


radiusAxis.axisPointer.handle.show

boolean [ 默认值: false ]

当 show 设为 true 时开启,这时显示手柄,并且 axisPointer 会一直显示。


radiusAxis.axisPointer.handle.icon

* 设置手柄的图标。

可以通过 'image://url' 设置为图片,其中 url 为图片的链接,或者 dataURI。

可以通过 'path://' 将图标设置为任意的矢量路径。

这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

参见 使用图片的例子


radiusAxis.axisPointer.handle.size

number, Array [ 默认值: 45 ]

设置手柄的尺寸,可以设置单值,如 45,也可以设置为数组:[width, height]。


radiusAxis.axisPointer.handle.margin

number [ 默认值: 50 ]

设置手柄与径向轴的距离。注意,这是手柄中心点和轴的距离。


radiusAxis.axisPointer.handle.color

string [ 默认值: '#333' ]

设置手柄颜色。


radiusAxis.axisPointer.handle.throttle

number [ 默认值: 40 ]

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


radiusAxis.axisPointer.handle.shadowBlur

number [ 默认值: 3 ]

设置手柄图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

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

radiusAxis.axisPointer.handle.shadowColor

Color [ 默认值: #aaa ]

设置手柄阴影颜色。支持的格式同color。


radiusAxis.axisPointer.handle.shadowOffsetX

number [ 默认值: 2 ]

设置手柄阴影在水平方向上的偏移距离。


radiusAxis.axisPointer.handle.shadowOffsetY

number [ 默认值: 0 ]

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

JSRUN闪电教程系统是国内最先开创的教程维护系统, 所有工程师都可以参与共同维护的闪电教程,让知识的积累变得统一完整、自成体系。 大家可以一起参与进共编,让零散的知识点帮助更多的人。
X
支付宝
9.99
无法付款,请点击这里
金额: 0
备注:
转账时请填写正确的金额和备注信息,到账由人工处理,可能需要较长时间
如有疑问请联系QQ:565830900
正在生成二维码, 此过程可能需要15秒钟