eCharts 轴线文本 太长省略 hover 展示全部

因为有其他复杂的配置，所以在开发这个功能的时候不能调用echarts.setOption这个api来实现，因为用这个来hover一次就会触发一次，则会其他的功能会一直闪烁重新渲染。

思路：

1、在轴线中的yAxis/xAxis，给name添加函数做文本省略处理；

2、在图表容器中添加一个文本标签展示全称，根据定位来展示要显示的位置；

3、位置计算：用echarts中的chart?.on('mouseover', (e) =>{}）来获取鼠标的位置展示，用chart.getZr().on.('mouseout', (e) =>{})来处理退出展示

代码：

第一步：就不写了

第二步：

第三步：

鼠标移入

  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是一个范围值，可以根据自己的情况调整