饼图文字颜色和大小的设置如何在多个图表中保持一致？
原创
饼图文字颜色和大小的设置如何在多个图表中保持一致？
原创
小焱
发布于 2025-09-02 13:38:41
发布于 2025-09-02 13:38:41
代码可运行
运行总次数：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>
.chart-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
padding: 20px;
}
.chart-item {
width: 100%;
height: 400px;
border: 1px solid #f0f0f0;
border-radius: 8px;
padding: 10px;
}
.controls {
padding: 20px;
background: #f5f5f5;
}
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="increaseSize">增大文字</button>
<button id="darkTheme">深色主题</button>
</div>
<div class="chart-container">
<div id="chart1" class="chart-item"></div>
<div id="chart2" class="chart-item"></div>
<div id="chart3" class="chart-item"></div>
<div id="chart4" class="chart-item"></div>
</div>
<script>
// 1. 定义公共文字样式配置 - 所有图表共享
const commonTextStyles = {
// 图例文字样式
legendTextStyle: {
color: '#666', // 文字颜色
fontSize: 12, // 文字大小
fontWeight: 'normal'
},
// 扇区标签文字样式
labelStyle: {
show: true,
color: '#333', // 文字颜色
fontSize: 14, // 文字大小
fontWeight: 'normal',
formatter: '{b}: {d}%'
},
// 连接线样式
labelLineStyle: {
lineStyle: {
color: '#999'
}
},
// 高亮状态样式
emphasisLabelStyle: {
color: '#e63946',
fontSize: 16,
fontWeight: 'bold'
},
// 标题样式
titleStyle: {
color: '#333',
fontSize: 16,
fontWeight: 'bold'
}
};
// 2. 初始化所有图表
const chart1 = echarts.init(document.getElementById('chart1'));
const chart2 = echarts.init(document.getElementById('chart2'));
const chart3 = echarts.init(document.getElementById('chart3'));
const chart4 = echarts.init(document.getElementById('chart4'));
// 3. 图表数据
const data1 = [
{ name: '手机', value: 45 },
{ name: '电脑', value: 30 },
{ name: '平板', value: 25 }
];
const data2 = [
{ name: '北京', value: 35 },
{ name: '上海', value: 30 },
{ name: '广州', value: 20 },
{ name: '深圳', value: 15 }
];
const data3 = [
{ name: '第一季度', value: 20 },
{ name: '第二季度', value: 25 },
{ name: '第三季度', value: 30 },
{ name: '第四季度', value: 25 }
];
const data4 = [
{ name: '男性', value: 55 },
{ name: '女性', value: 45 }
];
// 4. 创建图表配置的通用函数
function createPieOption(title, data) {
return {
title: {
text: title,
left: 'center',
textStyle: commonTextStyles.titleStyle
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'horizontal',
bottom: 10,
textStyle: commonTextStyles.legendTextStyle
},
series: [{
type: 'pie',
radius: ['40%', '70%'],
center: ['50%', '45%'],
label: commonTextStyles.labelStyle,
labelLine: commonTextStyles.labelLineStyle,
emphasis: {
label: commonTextStyles.emphasisLabelStyle
},
data: data
}]
};
}
// 5. 为每个图表设置配置
chart1.setOption(createPieOption('电子产品销售占比', data1));
chart2.setOption(createPieOption('地区用户分布', data2));
chart3.setOption(createPieOption('季度业绩占比', data3));
chart4.setOption(createPieOption('用户性别比例', data4));
// 6. 全局样式修改函数
function updateAllStyles(newStyles) {
// 更新公共样式
Object.assign(commonTextStyles.legendTextStyle, newStyles.legendTextStyle || {});
Object.assign(commonTextStyles.labelStyle, newStyles.labelStyle || {});
Object.assign(commonTextStyles.labelLineStyle.lineStyle, newStyles.labelLineStyle || {});
Object.assign(commonTextStyles.emphasisLabelStyle, newStyles.emphasisLabelStyle || {});
Object.assign(commonTextStyles.titleStyle, newStyles.titleStyle || {});
// 重新设置所有图表
chart1.setOption(createPieOption('电子产品销售占比', data1));
chart2.setOption(createPieOption('地区用户分布', data2));
chart3.setOption(createPieOption('季度业绩占比', data3));
chart4.setOption(createPieOption('用户性别比例', data4));
}
// 7. 样式控制按钮
document.getElementById('defaultStyle').addEventListener('click', () => {
updateAllStyles({
legendTextStyle: { color: '#666', fontSize: 12 },
labelStyle: { color: '#333', fontSize: 14 },
labelLineStyle: { color: '#999' },
emphasisLabelStyle: { color: '#e63946', fontSize: 16 },
titleStyle: { color: '#333', fontSize: 16 }
});
// 重置背景
document.querySelectorAll('.chart-item').forEach(el => {
el.style.backgroundColor = '';
});
});
document.getElementById('increaseSize').addEventListener('click', () => {
updateAllStyles({
legendTextStyle: { fontSize: 14 },
labelStyle: { fontSize: 16 },
emphasisLabelStyle: { fontSize: 18 },
titleStyle: { fontSize: 18 }
});
});
document.getElementById('darkTheme').addEventListener('click', () => {
updateAllStyles({
legendTextStyle: { color: '#ddd' },
labelStyle: { color: '#fff' },
labelLineStyle: { color: '#666' },
emphasisLabelStyle: { color: '#ffdd00' },
titleStyle: { color: '#fff' }
});
// 设置深色背景
document.querySelectorAll('.chart-item').forEach(el => {
el.style.backgroundColor = '#333';
});
});
// 响应窗口大小变化
window.addEventListener('resize', () => {
chart1.resize();
chart2.resize();
chart3.resize();
chart4.resize();
});
</script>
</body>
</html>原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
