antv g2坐标轴文字过长时添加省略号，悬浮显示全部

 

antv g2坐标轴文字过长时添加省略号，悬浮显示全部

示例改编自antv基础条形图 https://g2.antv.vision/zh/examples/bar/basic#basic

 

import { Chart } from '@antv/g2';

const data = [
  { country: '巴西', population: 18203 },
  { country: '印尼', population: 23489 },
  { country: '美国', population: 29034 },
  { country: '印度', population: 104970 },
  { country: '中国中国中国中国中国中国中国中国中国中国中国中国', population: 131744 },
];

const chart = new Chart({
  container: 'container',
  autoFit: true,
  height: 500,
});

chart.data(data);
chart.scale('population', { nice: true });
// 格式化文字，超过长度添加省略号
chart.axis('country', {
  tickLine: null,
  label: {
    autoRotate: false,
    autoHide: false, // 取消自动隐藏label
    formatter(text) {
      // 字符太长添加省略号
      return text.length > 4 ? `${text.slice(0, 4)}...` : text;
    }
  },
});
chart.coordinate().transpose();
chart.tooltip({
  showMarkers: false
});
chart.interaction('active-region');
chart.interval().position('country*population');

// 捕捉axis-label的mouseenter事件创建DOM
chart.on('axis-label:mouseenter', ev => {
  // 判断是否创建过div框,如果创建过就不再创建了
  const warp = document.getElementById('antv-text-extension');
  if (!warp) {
    const div = document.createElement("div")
    div.id = 'antv-text-extension';
    document.body.append(div)
  }
  warp.style.cssText = 'position: absolute; color: #fff; background: #393C41; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.10); font-size: 12px; padding: 5px; display: inline; z-index: 100; max-width: 160px;'
  warp.innerHTML = (ev.target.cfg.delegateObject.item.name);

  document.addEventListener('mousemove', ev => {
    const xx = ev.pageX - 30;
    const yy = ev.pageY + 20;
    warp.style.top = yy + 'px';
    warp.style.left = xx + 'px';
  })
    
// 捕捉axis-mouseleave隐藏DOM
  chart.on('axis-label:mouseleave', () => {
    warp.style.display = 'none'
  })
})
chart.render();

 

比较核心的部分是

使用G2的事件捕捉坐标轴文字的悬浮事件，然后动态添加dom显示全部文字

// 格式化文字，超过长度添加省略号
chart.axis('country', {
  tickLine: null,
  label: {
    autoRotate: false,
    autoHide: false, // 取消自动隐藏label
    formatter(text) {
      // 字符太长添加省略号
      return text.length > 4 ? `${text.slice(0, 4)}...` : text;
    }
  },
});


// 捕捉axis-label的mouseenter事件创建DOM
chart.on('axis-label:mouseenter', ev => {
  // 判断是否创建过div框,如果创建过就不再创建了
  const warp = document.getElementById('antv-text-extension');
  if (!warp) {
    const div = document.createElement("div")
    div.id = 'antv-text-extension';
    document.body.append(div)
  }
  warp.style.cssText = 'position: absolute; color: #fff; background: #393C41; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.10); font-size: 12px; padding: 5px; display: inline; z-index: 100; max-width: 160px;'
  warp.innerHTML = (ev.target.cfg.delegateObject.item.name);

  document.addEventListener('mousemove', ev => {
    const xx = ev.pageX - 30;
    const yy = ev.pageY + 20;
    warp.style.top = yy + 'px';
    warp.style.left = xx + 'px';
  })
    
// 捕捉axis-mouseleave隐藏DOM
  chart.on('axis-label:mouseleave', () => {
    warp.style.display = 'none'
  })
})

 

来更新一版

。

。

。

很高兴在antv官网案例中试出结果，但是，到我自己的项目上，死活走不通，我想出一切可能，连node都升级了，但是就是不行

chart.on('axis-label:mouseenter', ev => {})

方法死活不走

 

绝望来绝望去，最终在大佬指导下，另起最简单的HTML页面，排除项目中的其他因素（算是检查问题的一个方法），然后尝试改动了antv版本，（我是不情愿改的，因为官网上也是4.x的版本，我的项目是4.0.15版本，按理说小版本不应该有问题，就是这种盲目自信，走了很多坑，不过还好终于试了下，降了点版本，果然可，antv兼容性做的有待提高啊，后期估计会调整）

 

降低版本到4.0.14，不要降太多，不然可能会导致其他功能也会有问题（也是给自己一个教训，不要盲目相信框架插件的，一切的有可能都值得去尝试！！）

yarn add @antv/g2@4.0.14

 

得到效果图

 

 

再更一版

。

。

。

又遇到一个新问题，当不移动鼠标，滚动页面的时候，没有触发axis-mouseleave鼠标移除事件，dom元素没有销毁，这里需要添加监听滚动事件来解决

// 捕获滚动事件隐藏DOM
document.addEventListener('scroll', () => {
  const warp = document.getElementById('antv-text-extension')
  if (!warp) return
  warp.style.display = 'none'
})

 

 

 

参考文章：https://blog.csdn.net/qq_24922757/article/details/109202727

 

最后励志下自己，未来可期，加油哦！！！💪