项目上遇到这个问题,文档上没有找到案例,这里记录一下:
this.chart.tooltip({
position: 'top',// 固定位置展示 tooltip
crosshairs: {
type: 'rect',
}, // tooltip 辅助线配置
offset: 10, // tooltip 距离鼠标的偏移量
containerTpl: `<div class="g2-tooltip">
<div class="g2-tooltip-title" style="margin:10px 0;"></div>
<ul class="g2-tooltip-list"></ul>
</div>`, // tooltip 容器模板
itemTpl: `<li data-index={index}>
<span style="background-color:{color};width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:8px;"></span>人数: {value} <br/>
<span style="background-color:#00ba58;width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:8px;"></span>占比: {percent}
</li>`// tooltip 每项记录的默认模板,只接收name,value, index,color
});
this.chart.interval().position('groupVal*groupCnt').opacity(1)
.color('groupVal', val => {
let value = JSON.parse(val.replace('(', '['))[0]
if (value >= 0) {
return '#00c4c4';
}
return '#2194ff';
}).tooltip('groupVal*groupCnt*percent', (groupVal, groupCnt, percent) => {
return {
name: '人数',
value: groupCnt,
percent: (groupCnt / total * 100).toFixed(2) + '%'
}
})