思路：使用G2的事件捕捉坐标轴文字的悬浮事件，然后动态添加dom显示全部文字
// 格式化文字，超过长度添加省略号 this.chart.axis('module', { tickLine: null, label: { autoRotate: false, autoHide: false, // 取消自动隐藏label formatter(text) { // 字符太长添加省略号 return text.length > 4 ? `${text.slice(0, 4)}...` : text; }, rotate: (Math.PI / 180) * -45, style: { fill: '#666', fontSize: 11, textAlign: 'right', }, }, }); // 捕捉axis-label的mouseenter事件创建DOM this.chart.on('axis-label:mouseenter', (ev) => { // 判断是否创建过div框,如果创建过就不再创建了 const id = document.getElementById('extension'); if (!id) { const div = '<div id = \'extension\' sytle="display:none"></div>'; $('html').append(div); } $('#extension') .css({ position: 'absolute', color: '#333', background: '#fff', 'font-size': '12px', padding: '5px', display: 'inline', border: '1px solid #333', 'z-index': '100', }) .text(ev.target.cfg.delegateObject.item.name); $('html').mousemove((event) => { const xx = event.pageX - 30; const yy = event.pageY + 20; $('#extension') .css('top', yy) .css('left', xx); }); }); // 捕捉axis-mouseleave隐藏DOM this.chart.on('axis-label:mouseleave', (ev) => { $('#extension').css('display', 'none'); });参考文章：
https://g2.antv.vision/zh/docs/manual/tutorial/event/#%E5%9B%BE%E5%BD%A2-element-%E4%B8%8A%E7%9A%84%E4%BA%8B%E4%BB%B6https://blog.csdn.net/weixin_42262990/article/details/88420915