codecamp

设置yAxis坐标轴指示器的拖拽手柄

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

yAxis.axisPointer.handle   |   Object

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

yAxis.axisPointer.handle.show   |   boolean

[ default: false ]

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

yAxis.axisPointer.handle.icon   |   *

拖拽手柄的图标。

  • 可以通过 'image://url' 设置为图片,其中 url 为图片的链接,或者 dataURI。
  • 可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

参见 使用图片的例子

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 ]

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

设置y轴坐标轴指示器的阴影样式
y轴所有图形的zlevel和z值
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

ECharts配置项.setOption

ECharts图例组件配置项

ECharts图例组件配置 文本样式

ECharts xAxis配置 直角坐标系x轴

ECharts xAxis配置 x坐标轴名称的文本样式

ECharts xAxis配置 设置x坐标轴轴线

ECharts xAxis配置 x坐标轴刻度设置

ECharts xAxis配置 x坐标轴刻度标签设置

xAxis配置x坐标轴分隔线

xAxis配置坐标轴分隔区域设置

xAxis配置类目数据

ECharts xAxis配置 类目标签的文本样式

ECharts极坐标系的径向轴

如何使用dataZoom组件

ECharts工具栏组件(toolbox)

ECharts工具栏的feature属性

ECharts导出图片的操作

ECharts的数据视图工具

ECharts数据区域缩放工具

ECharts动态类型切换工具

ECharts区域选择组件(brush)

ECharts系列列表:平行坐标系

ECharts系列:主题河流图

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }