如何在ECharts中设置饼图的文字样式以适应不同的分辨率？
原创
如何在ECharts中设置饼图的文字样式以适应不同的分辨率？
原创
小焱
发布于 2025-09-03 13:29:31
发布于 2025-09-03 13:29:31
代码可运行
运行总次数：0
代码可运行
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式饼图文字样式</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#chart-container {
width: 100vw;
height: 100vh;
}
.info-panel {
position: fixed;
top: 10px;
left: 10px;
background: rgba(255, 255, 255, 0.9);
padding: 10px 15px;
border-radius: 6px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
font-family: sans-serif;
font-size: 14px;
}
</style>
</head>
<body>
<div class="info-panel">
<p>当前分辨率: <span id="resolution">--</span></p>
<p>文字基准大小: <span id="baseSize">--</span>px</p>
</div>
<div id="chart-container"></div>
<script>
const chart = echarts.init(document.getElementById('chart-container'));
const resolutionEl = document.getElementById('resolution');
const baseSizeEl = document.getElementById('baseSize');
// 示例数据
const data = [
{ name: '产品A', value: 35 },
{ name: '产品B', value: 25 },
{ name: '产品C', value: 20 },
{ name: '产品D', value: 15 },
{ name: '产品E', value: 5 }
];
// 1. 根据容器尺寸计算基准字体大小
function getBaseFontSize() {
// 获取容器尺寸
const container = document.getElementById('chart-container');
const width = container.clientWidth;
const height = container.clientHeight;
// 取宽高中的较小值作为计算基准
const base = Math.min(width, height);
// 根据基准尺寸计算字体大小（按比例）
// 确保在小屏幕上不小于8px，大屏幕上不大于20px
return Math.max(8, Math.min(20, Math.floor(base * 0.025)));
}
// 2. 根据基准大小计算所有文字样式
function getResponsiveTextStyles() {
const baseSize = getBaseFontSize();
// 更新信息面板
const container = document.getElementById('chart-container');
resolutionEl.textContent = `${container.clientWidth} × ${container.clientHeight}`;
baseSizeEl.textContent = baseSize;
return {
// 标题样式
titleStyle: {
color: '#333',
fontSize: baseSize * 1.5, // 标题比基准大50%
fontWeight: 'bold'
},
// 图例文字样式
legendTextStyle: {
color: '#666',
fontSize: baseSize * 0.9 // 图例比基准小10%
},
// 扇区标签文字样式
labelStyle: {
show: true,
color: '#333',
fontSize: baseSize, // 基准大小
formatter: '{b}: {d}%'
},
// 连接线样式
labelLineStyle: {
length: baseSize * 1.5, // 连接线长度按基准比例
length2: baseSize * 2,
lineStyle: {
color: '#999',
width: Math.max(1, Math.floor(baseSize * 0.1)) // 线宽按比例
}
},
// 高亮状态样式
emphasisLabelStyle: {
color: '#e63946',
fontSize: baseSize * 1.2 // 高亮时大20%
}
};
}
// 3. 创建响应式图表配置
function createResponsiveOption() {
const styles = getResponsiveTextStyles();
return {
title: {
text: '产品销售占比分析',
left: 'center',
textStyle: styles.titleStyle
},
tooltip: {
trigger: 'item'
},
legend: {
// 根据屏幕宽度自动调整图例位置
orient: window.innerWidth < 768 ? 'vertical' : 'horizontal',
left: window.innerWidth < 768 ? 10 : 'center',
bottom: window.innerWidth < 768 ? 'auto' : 10,
textStyle: styles.legendTextStyle
},
series: [{
type: 'pie',
// 根据屏幕尺寸调整饼图大小
radius: window.innerWidth < 576 ? ['35%', '70%'] : ['40%', '70%'],
center: ['50%', '45%'],
label: styles.labelStyle,
labelLine: styles.labelLineStyle,
emphasis: {
label: styles.emphasisLabelStyle
},
data: data
}]
};
}
// 4. 初始化图表
function initChart() {
chart.setOption(createResponsiveOption());
}
// 5. 监听窗口大小变化，实时更新样式
window.addEventListener('resize', function() {
// 先调整图表尺寸
chart.resize();
// 再更新响应式配置
chart.setOption(createResponsiveOption());
});
// 初始化
initChart();
</script>
</body>
</html>原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
