Echarts属性trigger:axis、axisPointer效果展示
//提示框取默认值,即鼠标移动到柱状图会显示内容
tooltip: {
trigger: 'axis', //触发类型;轴触发,axis则鼠标hover到一条柱状图显示全部数据,item则鼠标hover到折线点显示相应数据,
axisPointer: { //坐标轴指示器,坐标轴触发有效,
type: 'line', //默认为line,line直线,cross十字准星,shadow阴影
crossStyle: {
color: '#fff'
}
}
}
trigger: ‘axis’,坐标轴触发,效果:
![](https://i-blog.csdnimg.cn/blog_migrate/cdbea532c3d070eb2fb01fa3638e4f6f.png)
trigger: ‘item’,项目触发,效果:
![](https://i-blog.csdnimg.cn/blog_migrate/3b0c2014858379d81fdb5bf7daf6b58f.png)
自定义展示内容:
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
},
formatter(params) {
// console.log(params)
let list = []
let listItem = ''
for (var i = 0; i < params.length-2; i++) {
list.push(
params[i]['seriesName']+':'+params[i]['value']
)
}
listItem = list.join('<br>')
return '<div class="showBox">' + listItem + '</div>'
}
},
由此可知修改线条颜色 需要设置lingStyle(看文档解释,前提要设置成type:'line’才有用)
axisPointer:{ //基准线
lineStyle:{
color:'#52cdef'
}
}