因为有其他复杂的配置,所以在开发这个功能的时候不能调用echarts.setOption这个api来实现,因为用这个来hover一次就会触发一次,则会其他的功能会一直闪烁重新渲染。
思路:
1、在轴线中的yAxis/xAxis,给name添加函数做文本省略处理;
2、在图表容器中添加一个文本标签展示全称,根据定位来展示要显示的位置;
3、位置计算:用echarts中的chart?.on('mouseover', (e) =>{})来获取鼠标的位置展示,用chart.getZr().on.('mouseout', (e) =>{})来处理退出展示
代码:
第一步:就不写了
第二步:
<div style="position: 'relative'" class="echarts">
<div class="container" ref=container></div>
<span id="spanId" style="display: 'none'; position: 'absolute'; bottom: '0px'; left: '0px'; zIndex: 9999"></span>
</div>
</div>
第三步:
鼠标移入
this.chart?.on('mouseover', (e: any) => {
if (e.componentType == 'yAxis' || e.componentType == 'xAxis') {
const barTooltip: HTMLElement = document.querySelector('#$spanId');
const xx = e.event.event.zrX;
const yy = e.event.event.zrY;
let length = 3;//x轴最大显示字符
if (e.componentType == 'yAxis') {
length = 5;//y轴最大显示字符
}
if (e.value.length > length) {
this.hoverValue = {
value: e.value,
x: xx,
y: yy,
};
barTooltip.innerHTML = e.value;
barTooltip.style.display = 'inline';
barTooltip.style.top = yy + 'px';
barTooltip.style.left = xx + 'px';
}
}
});
鼠标移出:
this.chart?.getZr()?.on?.('mouseout', (e) => {
const barTooltip: HTMLElement = document.querySelector('#spanId');
const { x, y } = this.hoverValue;
if (barTooltip && (x < e.event.zrX - 20 || x > e.event.zrX + 20 || y < e.event.zrY - 20 || y > e.event.zrY + 20)) {
barTooltip.style.display = 'none';
}
});
//20是一个范围值,可以根据自己的情况调整