当前位置：首页 > web >正文

eChart饼环pie中间显示总数_2个以上0值不挤掉

web 2025/8/20 0:36:37

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>环饼图显示总数</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<style>
#main { width: 600px; height: 400px; margin: 0 auto; }
</style>
</head>
<body>
<div id="main"></div>
<script type="text/javascript">
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);

const data = [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 0, name: '视频广告'},
{value: 0, name: '搜索引擎'}
];

const total = data.reduce((sum, item) => sum + item.value, 0);

var option = {
tooltip: {
trigger: 'item',
// 关键修复:1.确保0值也显示提示
formatter: function(params) {
return `${params.name}: ${params.value}`;
}
},
legend: {
top: '5%',
left: 'center'
},
series: [{
name: '访问量统计',
type: 'pie',
radius: ['40%', '70%'],
//关键修复:2.确保0值也显示提示,强制显示0值项
stillShowZeroSum: true,
//关键修复:3.确保0值也显示提示设置最小角度使0值可见
minAngle: 1, // 最小角度5度（可调整）

avoidLabelOverlap: false,
// 关键修改：禁用普通状态下的标签显示
label: {
show: false, // 关闭每个扇形的标签
position: 'center'
},
// 关键修改：只在高亮状态显示中心标签
emphasis: {
disabled: false, // 确保高亮效果可用
scale: true, // 启用放大效果
scaleSize: 5, // 放大尺寸
label: {
show: false,
position: 'center',
formatter: `总访问量\n{total|${total}}`, // 只显示总数
fontSize: 18,
fontWeight: 'normal',
rich: {
total: {
fontSize: 28,
fontWeight: 'bold',
color: '#333',
lineHeight: 40
}
}
}
},
labelLine: {
show: false
},
data: data
}]
};

myChart.setOption(option);

// 添加自定义中心标签（非交互状态时显示）
const centerText = document.createElement('div');
centerText.style.position = 'absolute';
centerText.style.textAlign = 'center';
centerText.style.pointerEvents = 'none';
centerText.innerHTML = `
<div style="font-size: 18px; color: #666;">总访问量</div>
<div style="font-size: 28px; font-weight: bold; color: #333;">${total}</div>
`;

// 将中心标签定位到图表中心
chartDom.appendChild(centerText);

// 监听图表尺寸变化，保持居中
const resizeObserver = new ResizeObserver(() => {
const { width, height } = chartDom.getBoundingClientRect();
centerText.style.width = width + 'px';
centerText.style.top = (height / 2 - 30) + 'px';
});
resizeObserver.observe(chartDom);
</script>
</body>
</html>