The axis indicator is a tool that indicates the current scale of the axis.
In the previous tooltip, xAxis(yAxis), and grid configuration series, the settings of axisPointer are included. You can also see the display effects, and there are corresponding ones hereConfigure priority, the relationship is roughly as follows:
- The priority of axisPointer configured separately is always higher than the priority configured in tooltip.
- Without the influence of condition 1, the deeper the level, the higher the priority.
Basic usage: Hover the mouse over the graph, and the line and scale text will appear.
The final configuration code of the article is Anatomy diagram examplecode
1. Axis indicator axisPointer configuration code
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 坐标轴指示器
},
],
},
};2. Anatomy diagram
3. Anatomy option configuration code
use:
Code:
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]
}
]
};