bizcharts custom settings Tooltip template
<Tooltip
crosshairs={
{
type: 'y'
}}
useHtml
htmlContent={
(
title,
items
) => `<div class="g2-tooltip" style='position:absolute;background:#fff'><div class="g2-tooltip-title">${
title} </div><ul>
<li><span style="background-color:{color};width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:8px;"></span></li>
<li>${
items[0].name}： ${
items[0].value}百万</li>
<li>${
((items[0] || {
}).point || {
})['_origin'].names || ''}</li>
</ul></div>`}
/>
Using Loops in Tooltips
<ToopTip
useHtml
htmlContent={
(title, items) => {
items.sort((a, b) => {
return Number(b?.value) - Number(a?.value);
});
return `<div class="g2-tooltip" style='position:absolute;background:#fff;padding:10px 15px 0 15px;opacity:0.9;border-radius:10px;'>
<div class="g2-tooltip-title">${
title}</div>
${
items[0]
? `<div>
<span style='display:inline-block;width:8px;height:8px;border-radius:50%;background:${
items[0]?.color
};margin-right:8px'></span>
<span>${
numFormat((items || [])[0]?.value, '0,0.00', true)}</span>
</div>`
: '<div></div>'
}
${
items[1]
? ` <div>
<span style='display:inline-block;width:8px;height:8px;border-radius:50%;background:${
items[1]?.color
};margin-right:8px'></span>
<span>${
numFormat((items || [])[1]?.value, '0,0.00', true)}</span>
</div>`
: '<div></div>'
}
</div>`;
}}
/>