需求:
期望移入显示的tooltip可以自定义title和g2-tooltip-list-item
官网链接:https://g2plot.antv.vision/zh/examples/bar/basic#width-ratio
效果如下
默认显示如下:
tooltip默认展示的title是我们Y轴对应数据,
默认展示的g2-tooltip-list-item是x轴数据类型名称:x轴对应的数据
用到tooltip相关属性
代码如下
import React, { useEffect } from 'react';
import { Bar } from '@antv/g2plot';
import styles from './index.less';
const data = [
{ type: 'a', value: 0.16 },
{ type: 'b', value: 0.125 },
{ type: 'c', value: 0.24 },
{ type: 'c', value: 0.19 },
{ type: 'd', value: 0.22 },
{ type: 'e', value: 0.05 },
{ type: 'f', value: 0.01 },
];
const SalesScore: React.FC = ({ }) => {
useEffect(() => {
handleInit();
}, []);
const handleInit = () => {
const TypeBar = new Bar('type-bar', {
data: data?.reverse(),
color: '#7BD4E0',
xField: 'value',
yField: 'type',
barWidthRatio: 0.5,
xAxis: {
label: {
autoHide: true,
autoRotate: false,
},
},
meta: {
type: {
alias: '类别',
},
sales: {
alias: '分数',
},
},
tooltip: {
showTitle: true,
showMarkers: false,
customContent: (title: string, items: any) => `<div>
<div>销售类型${title}</div>
<li class="g2-tooltip-list-item">
<span class="g2-tooltip-marker" style="background-color:#7BD4E0;width:0px;height:0px;border-radius:50%;display:inline-block;margin-right:8px;"></span>
得分:
<span class="g2-tooltip-value"> ${items?.[0]?.value}</span>
</li>
</div>`,
domStyles: {
'g2-tooltip': {
paddingTop: '12px',
}, // 设置 tooltip 的 css 样式
},
},
});
TypeBar.render();
};
return (
<div style={{ textAlign: 'center' }}>
<div id="type-bar"></div>
</div>
);
};
export default SalesScore;
注意事项
1.tooltip的formatter属性
格式化 tooltip item 内容(暂时不支持多 tooltipItems 的格式化,可以使用 customContent 处理)
formatter不能修改tooltip title,只能修改-tooltip-list-item的数据
2.tooltip的itle属性
设置 tooltip 的标题内容:如果值为数据字段名,则会展示数据中对应该字段的数值,如果数据中不存在该字段,则直接展示 title 值。
title只能修改tooltip title,并且类型是string,这个值是固定值,设置以后,所有的tooltip的title值都是固定值
tooltip: {
formatter: (datum: Datum) => {
console.log('datum---', datum);
return { name: '分数', value: datum.value };
},
title: '2222',
showTitle: true,
},
3.tooltip的customContent属性
支持自定义模板
核心代码如下:
tooltip: {
showTitle: true,
showMarkers: false,
customContent: (title: string, items: any) => `<div>
<div>销售类型${title}</div>
<li class="g2-tooltip-list-item">
<span class="g2-tooltip-marker" style="background-color:#7BD4E0;width:0px;height:0px;border-radius:50%;display:inline-block;margin-right:8px;"></span>
得分:
<span class="g2-tooltip-value"> ${items?.[0]?.value}</span>
</li>
</div>`,
domStyles: {
'g2-tooltip': {
paddingTop: '12px',
}, // 设置 tooltip 的 css 样式
},
},