坐标轴指示器是指示坐标轴当前刻度的工具。
在之前的 tooltip、xAxis(yAxis)、 grid 配置系列中,都包含着 axisPointer 的设置,大家也可以看到其中的显示效果,在此也有对应的配置优先级,其中关系大致如下:
- 单独配置的 axisPointer 优先级 永远 高于 在 tooltip 中配置的优先级。
- 没有条件一的影响下,层级越深,优先级越高
基本使用:鼠标悬浮到图上,可以出现标线和刻度文本。
文章最后的配置代码为 解剖图的示例代码
一、坐标轴指示器 axisPointer 配置代码
option={
// 全局配置坐标轴指示器
axisPointer:{
id:1, // 组件ID
show:true, // 是否显示组件
type:'line', // 指示器类型 line 、shadow 、none
snap:true, // 是否吸附到店上
z:1, // 坐标轴指示器的 z 值
status:'show', // 初始指示器的状态, show 显示, hide 隐藏
value:5000, // 当前指示器初始的 Vlaue 值
triggerOn:'mousemove', // 坐标轴指示器触发条件,鼠标移动还是点击
// 坐标轴指示器文本标签 头
label:{
show:true, // 是否显示文本标签
precision:2, // 文本中数值的精准度,保留两位小数
formatter:'{value}数值',// 文本标签文字的格式化器
margin:5, // label 距离轴的距离
color:'red', // 文字的颜色
fontStyle:'normal', // 字体的风格
fontWeight:400, // 字体粗细
fontFamily:'serif', // 字体系列
fontSize:15, // 字体大小
lineHeight:50, // 字体行高
width:200, // 文本显示宽度
height:300, // 文本显示高度
textBorderColor:'red', // 文字描边颜色
textBorderWidth:50, // 文字描边宽度
textBorderType:'solid', // 文字描边类型
textBorderDashOffset:15, // 文字描边类型为虚线时,虚线的偏移量
textShadowColor:'red', // 文字阴影颜色
textShadowBlur:10, // 文字阴影长度
textShadowOffsetX:10, // 文字阴影水平偏移量
textShadowOffsetY:10, // 文字阴影竖直偏移量
overflow:'break', // 文本超出宽度是否截断或者换行
ellipsis:'···', // 文本超出截断后,文本显示的内容
padding:[5,5,5,5], // 文本标签内边距
backgroundColor:'red', // 文本标签的背景颜色
borderColor:'red', // 文本标签的边框颜色
borderWidth:5, // 文本标签的边框宽度
shadowBlur:4, // 标签阴影大小
shadowColor:'red', // 标签阴影颜色
shadowOffsetX:10, // 标签阴影水平偏移量
shadowOffsetY:10, // 标签阴影竖直偏移量
},
// 坐标轴指示器文本标签 尾
// 指示器-线的样式 头
lineStyle:{
color:'red', // 线的颜色
width:10, // 线的宽度
type:'solid', // 线的类型
dashOffset:10, // 线类型为虚线时,虚线的偏移量
cap:'butt', // 线段末端的形状
join:'bevel', // 两个线段之间相连部分的形状
miterLimit:10, // join 为 miter 时,斜接面的比例
shadowBlur:10, // 线的阴影长度
shadowColor:'red', // 线的阴影颜色
shadowOffsetX:10, // 线阴影水平偏移量
shadowOffsetY:10, // 线阴影竖直偏移量
opacity:0.8, // 线的透明度
},
// 直线指示器的样式 尾
// 阴影指示器的样式 头
shadowStyle:{
color:'red', // 图形填充颜色
shadowBlur:10, // 图形阴影长度
shadowColor:'red', // 图形阴影颜色
shadowOffsetX:10, // 图形阴影水平偏移量
shadowOffsetY:10, // 图形阴影竖直偏移量
opacity:0.8, // 图形透明度
},
// 阴影指示器的样式 尾
triggerEmphasis:true, // 是否触发系列强调功能,对应的数据是否高亮
triggerTooltip:true, // 是否触发 tooltip
// 拖拽手柄样式 头
handle:{
show:true, // 是否一直显示手柄
icon:'pin', // 这个配置似乎有问题,配置之后手柄就消失
size:20, // 手柄大小
margin:50, // 手柄与轴的距离
color:'red', // 手柄颜色
throttle:50, // 手柄拖拽时触发视图的更新周期
shadowBlur:5, // 手柄阴影大小
shadowColor:'red', // 手柄阴影颜色
shadowOffsetX:10, // 手柄阴影水平偏移量
shadowOffsetY:10, // 手柄阴影竖直偏移量
},
// 拖拽手柄样式 尾
// 在一个 Echartsr 容器中,关联不同图形中坐标轴指示器,同时触发
link:[
{
xAxisIndex:[1,2,3], // 同时触发图形中 xAxisIndex 为 0、3、4 的 X 坐标轴指示器
yAxisName:'all', // 同时触发所有图形的 Y 坐标轴指示器
},
],
},
};
二、解剖图
三、解剖图 option 配置代码
使用:
代码:
option = {
title: {
text: 'World Population'
},
legend: {},
grid: {
left: '10%',
right: '4%',
width:'80%',
height:'80%',
containLabel: true
},
axisPointer:{
show:true,
label:{
formatter:'{value}数据',
},
value:520000,
status:'show',
handle:{
show:true,
},
lineStyle:{
color:'red',
cap:'round',
width:4,
},
triggerEmphasis:true,
triggerOn:'mousemove',
},
xAxis: [{
type: 'value',
boundaryGap: [0, 0.01],
},
{
type: 'value',
boundaryGap: [0, 0.01],
axisPointer:{
show:true,
label:{
formatter:'{value}数据',
},
}
}],
yAxis: {
type: 'category',
data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'],
axisPointer:{
show:true,
handle:{
margin:100,
}
}
},
series: [
{
name: '2011',
type: 'bar',
data: [18203, 23489, 29034, 104970, 131744, 630230]
},
{
name: '2012',
type: 'bar',
data: [19325, 23438, 31000, 121594, 134141, 681807]
}
]
};