antv g2字体阴影_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 = newChart({

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) returnwarp.style.display= 'none'})

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