Chart.tooltip(true, { // 提示信息配置
containerTpl: '<div class="g2-tooltip">' + '<p class="g2-tooltip-title">开盘时间</p>' + '<ul class="g2-tooltip-list"></ul>' + '</div>', // tooltip的外层模板
itemTpl:
'<li class="g2-tooltip-list-item" data-index={index}>'
+ '<div><div style="color: #33BBFF; text-align: center; font-size: 12px;">开盘时间</div><div style="font-size: 12px;">{time}</div></div>'
+ '</li> ',
offset: 0,
'g2-tooltip': {
position: 'absolute',
width: '80px',
height: '40px',
backgroundColor: 'rgba(13,21,42,1)',
border: '1px solid rgba(51, 187, 255, 0.5)',
borderRadius: "3px 3px 3px 3px",
color: '#fff',
fontSize: '12px',
textAlign: 'center',
padding: '0px',
paddingLeft: '8px',
marginTop: '3px',
'transition': 'top 200ms,left 200ms'
},
'g2-tooltip-title': {
display: 'none'
},
crosshairs: { // 用于设置 tooltip 的辅助线或者辅助框
style: {
stroke: '#33bbff', // 辅助线的颜色
strokeOpacity: 0.3
}
},
position: 'top',
inPlot: false, //不用tooltip一直在图表视图内,以便最末尾tooltip位置乱跑
// triggerOn:'click', //触发方式,不选默认mousemove
})
antV-G2自定义tooltip的结构
最新推荐文章于 2024-07-16 10:48:38 发布