如何修改饼图的文字颜色和大小？
原创
如何修改饼图的文字颜色和大小？
原创
小焱写作
发布于 2025-09-02 08:45:12
发布于 2025-09-02 08:45:12
代码可运行
运行总次数：0
代码可运行
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts饼图文字样式设置</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<style>
body {
padding: 20px;
}
#chart-container {
width: 100%;
height: 500px;
}
.controls {
margin-bottom: 20px;
padding: 15px;
background: #f5f5f5;
border-radius: 8px;
}
button {
margin: 0 10px 10px 0;
padding: 6px 12px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="controls">
<h3>文字样式控制</h3>
<button id="defaultStyle">默认样式</button>
<button id="largeText">增大文字</button>
<button id="darkTheme">深色主题</button>
<button id="emphasisStyle">突出显示</button>
</div>
<div id="chart-container"></div>
<script>
const chart = echarts.init(document.getElementById('chart-container'));
// 示例数据
const data = [
{ name: '产品A', value: 35 },
{ name: '产品B', value: 25 },
{ name: '产品C', value: 20 },
{ name: '产品D', value: 15 },
{ name: '产品E', value: 5 }
];
// 基础配置
let option = {
title: {
text: '产品销售占比',
left: 'center',
textStyle: {
color: '#333',
fontSize: 18
}
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'horizontal',
bottom: 10,
// 图例文字样式
textStyle: {
color: '#666', // 文字颜色
fontSize: 12, // 文字大小
fontWeight: 'normal'
}
},
series: [
{
name: '销售占比',
type: 'pie',
radius: ['40%', '70%'],
center: ['50%', '45%'],
// 扇区标签文字样式
label: {
show: true,
color: '#333', // 文字颜色
fontSize: 14, // 文字大小
fontWeight: 'normal', // 文字粗细
formatter: '{b}: {d}%' // 显示格式：名称: 百分比
},
// 连接线样式
labelLine: {
show: true,
length: 20,
length2: 30,
lineStyle: {
color: '#999' // 连接线颜色
}
},
// 高亮状态的文字样式
emphasis: {
label: {
show: true,
color: '#f00', // 高亮时文字颜色
fontSize: 16, // 高亮时文字大小
fontWeight: 'bold'
}
},
data: data
}
]
};
chart.setOption(option);
// 样式切换按钮
document.getElementById('defaultStyle').addEventListener('click', () => {
chart.setOption({
legend: {
textStyle: {
color: '#666',
fontSize: 12
}
},
series: [{
label: {
color: '#333',
fontSize: 14
},
emphasis: {
label: {
color: '#f00',
fontSize: 16
}
}
}]
});
});
document.getElementById('largeText').addEventListener('click', () => {
chart.setOption({
legend: {
textStyle: {
fontSize: 14
}
},
series: [{
label: {
fontSize: 16
},
emphasis: {
label: {
fontSize: 18
}
}
}]
});
});
document.getElementById('darkTheme').addEventListener('click', () => {
chart.setOption({
backgroundColor: '#333',
title: {
textStyle: {
color: '#fff'
}
},
legend: {
textStyle: {
color: '#ddd'
}
},
series: [{
label: {
color: '#fff'
},
labelLine: {
lineStyle: {
color: '#666'
}
},
emphasis: {
label: {
color: '#ffdd00'
}
}
}]
});
});
document.getElementById('emphasisStyle').addEventListener('click', () => {
chart.setOption({
series: [{
label: {
color: '#2c3e50',
fontSize: 14,
fontWeight: 'bold',
fontStyle: 'italic' // 斜体
}
}]
});
});
// 响应窗口大小变化
window.addEventListener('resize', () => {
chart.resize();
});
</script>
</body>
</html>原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
