这里我列举两种实现方式
方式一
直接利用echarts的tooltip触发的时机,先声明一个变量,用来记录当前选中的标签索引,触发tooltip就相当于触发了鼠标的mousemove事件,通过tooltip的formatted函数的参数,得到索引,并且赋值给变量,这里赋值之后直接调用resize方法更新视图,(如果报错,那就给方法加一个延时器),可能是由于dom元素没有获取到,随后再监听一个mouseout事件,如果mouseout不好用就用mouseleave,手动给变量值为空,再次调用resize事件即可
tooltip: {
formatter: (params)=>{
that.selectedIndex= params[0].dataIndex
myChart.resize()
myChart.on(“mouseout”,function(){
that.selectedIndex= “”
myChart.resize()
}
}
}
具体变量数据根据自己的实际情况替换
初始化时就在xAxis配置中写好处高亮的理逻辑,同下面的setOption中给x轴配置的内容
方式二
直接就是给图表监听鼠标移动事件和鼠标移出事件,通过setOption重新设置x轴label样式,这个方法会自动更新图表,所以不需要再调用resize方法了
myChart.getZr().on(“mousemove”, function(e){
// 获取当前索引
let index= [e.offsets, e.offsetY]
let pointGrid= myChart.convertFromPixel({seriesIndex: 0}, index)
that.selectedIndex= pointGrid[0]
myChart.setOption({
xAxis: {
data: xData
…
axisLabel:{
rich:{
a:{
color:…// 选中样式
},
b:{
color:…..//非选中样式
}
},
formatter: function(value){
if(xData[that.selectedIndex] == value){
return “{a| value}”
}else{
return“{b| value}”
}
}
}
}
})
})
再监听mouseout事件,将变量值变为“”,再重新通过setOption方法给x轴更改配置
同样的,如果必要情况下也需要在初始化图表之后,加一个延时器再给它们监听这两个事件