import ECOption from "_s/libs/echarts-config.d.ts";
import echarts from "_s/libs/echarts-config.ts";
import ReactEChartsCore from "echarts-for-react/lib/core";
<div className="pieCharts" style={{ width: '50%', position: 'relative', }}>
<ReactEChartsCore
echarts={echarts}
option={option1}
theme={"theme_name"}
style={{ width: "100%", height: "240px" }}
/>
</div>
//说明 : 主要记录 tooltip中的 ,formatter的 divcontent 部分
const option1: ECOption = {
tooltip: {
trigger: 'item',
formatter: (params) => {
const { name, value, percent } = params;
const divcontent = `<div style="padding: 10px 2px;color:black;display:flex;justifyContent:start">
<div>
<div style="padding: 4px 0px;color:#333333">${name}</div>
<div style="padding: 4px 0px;color:#333333"><span style="display:inline-block;width:10px;height:10px;line-height:10px;border-radius:50%;background-color:#7262fd;margin-right:10px"></span>金额:${value}</div>
<div style="padding: 4px 0px;color:#333333"><span style="display:inline-block;width:10px;height:10px;line-height:10px;border-radius:50%;background-color:#45cbf1;margin-right:10px"></span>百分比:${percent}%</div></div>
`
return divcontent;
},
},
legend: false,
color: [
"#45cbf1",
"#7262fd",
],
series: [
{
name: '占比图',
type: 'pie',
radius: '110',
startAngle: startAngle,
data: dueOverdue,
emphasis: {
label: {
show: false,
}
},
label: {
show: false,
position: 'center'
},
}
]
};
一般的直接 写 formatter: "{b}
金额:{c}
百分比:{d}% ", 即可
const option2: ECOption = {
tooltip: {
trigger: 'item',
formatter: "{b}
金额:{c}
百分比:{d}% ",
},
color: [
"#ff860f",
"#ffb607",
],
}
图例截图