//配置的config
const config = {
data:{
name: 'root',
children: chartdata,
},
colorField: 'group_name',
legend: {
visible: false, // 设置图例不可见
},
tooltip: {
visible: true, // 设置工具提示可见
formatter: tooltipFormatter
},
label: {
// 可手动配置 label 数据标签位置
position: 'left-top',
// 配置样式
style: {
fill: '#000000',
opacity: 0.8,
fontSize: 14,
},
formatter: (data: any) => {
return `名称:${data.group_name}\n名称2:${data.customer_name}\n金额1:${data.be_overdue_amount}\n天数1:${data.be_overdue_day}`;
}, // 配置展示内容 --不需要就删除
},
};
注意:
tooltip: {
visible: true, // 设置工具提示可见
formatter: tooltipFormatter
},
这个 tooltipFormatter 的提示 。他只接收name 和 value
单独写。 可以看到他的内容在path中
**所以渲染 tooltipFormatter **
const tooltipFormatter = (data:any) => {
console.log(data)
const newdata= data.path[0].data
return {
name: "提示",
value: `<div style="padding: 8px;">
<div style="padding: 8px;">集团名称:${newdata.group_name}</div>
<div style="padding: 8px;">客户名称:${newdata.customer_name}</div>
<div style="padding: 8px;">逾期金额:${newdata.be_overdue_amount}</div>
<div style="padding: 8px;">逾期天数:${newdata.be_overdue_day}</div>
</div>`
};
};
如果不需要配置也可以直接是
const tooltipFormatter = (data:any) => {
console.log(data)
const newdata= data.path[0].data
return {
name: "提示",
value: `
集团名称:${newdata.group_name}<br />
客户名称:${newdata.customer_name}<br />
逾期金额:${newdata.be_overdue_amount}<br />
逾期天数:${newdata.be_overdue_day}<br />
`
};
};