您现在的位置是：网站首页 > 富文本样式设置文章详情
富文本样式设置
陈川
【
ECharts
】
65619人已围观
7978字
富文本样式设置
ECharts 提供了富文本样式设置功能，允许在图表中灵活地控制文本的显示样式。通过富文本样式，可以实现文本的多行显示、自定义颜色、字体大小、对齐方式等，满足各种复杂的文本展示需求。
富文本的基本语法
ECharts 中的富文本样式使用 rich 属性定义，并通过 formatter 函数或字符串模板进行配置。基本语法结构如下：
option = {
series: [{
type: 'bar',
label: {
show: true,
formatter: function(params) {
return `{a|${params.value}}`;
},
rich: {
a: {
color: '#ff0000',
fontSize: 16,
fontWeight: 'bold'
}
}
}
}]
};
文本样式属性
富文本支持多种样式属性，常用的包括：
color: 文本颜色fontSize: 字体大小fontWeight: 字体粗细fontFamily: 字体类型lineHeight: 行高backgroundColor: 背景色borderColor: 边框颜色borderWidth: 边框宽度borderRadius: 边框圆角padding: 内边距align: 水平对齐方式verticalAlign: 垂直对齐方式
多行文本与组合样式
富文本支持多行显示和样式组合，通过定义不同的样式类并在 formatter 中引用：
option = {
series: [{
type: 'pie',
label: {
formatter: [
'{title|标题}',
'{value|123}'
].join('\n'),
rich: {
title: {
color: '#333',
fontSize: 14,
align: 'center'
},
value: {
color: '#ff0000',
fontSize: 24,
fontWeight: 'bold',
align: 'center'
}
}
}
}]
};
动态样式设置
富文本样式可以动态变化，根据数据值调整显示效果：
option = {
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80],
type: 'bar',
label: {
show: true,
formatter: function(params) {
if (params.value > 150) {
return `{high|${params.value}}`;
} else {
return `{normal|${params.value}}`;
}
},
rich: {
high: {
color: '#ff0000',
fontWeight: 'bold'
},
normal: {
color: '#999'
}
}
}
}]
};
复杂文本布局
富文本支持更复杂的布局，包括图标与文本混排：
option = {
series: [{
type: 'scatter',
symbolSize: 20,
data: [[10, 20], [30, 40], [50, 60]],
label: {
show: true,
formatter: function(params) {
return `{icon|◉} {value|${params.value[1]}}`;
},
rich: {
icon: {
fontSize: 16,
color: '#5470c6'
},
value: {
fontSize: 12,
color: '#666',
padding: [0, 0, 0, 5]
}
}
}
}]
};
文本阴影与边框效果
通过富文本可以实现更丰富的视觉效果：
option = {
series: [{
type: 'line',
data: [120, 132, 101, 134, 90, 230, 210],
label: {
show: true,
formatter: '{a|{c}}',
rich: {
a: {
color: '#fff',
fontSize: 14,
fontWeight: 'bold',
textShadowBlur: 5,
textShadowColor: '#000',
textShadowOffsetX: 1,
textShadowOffsetY: 1,
backgroundColor: '#5470c6',
padding: [3, 5],
borderRadius: 4
}
}
}
}]
};
响应式富文本设置
结合 ECharts 的响应式 API，可以创建适应不同屏幕尺寸的富文本样式：
function resizeRichText() {
const fontSize = window.innerWidth < 600 ? 12 : 14;
myChart.setOption({
series: [{
label: {
rich: {
a: {
fontSize: fontSize
}
}
}
}]
});
}
window.addEventListener('resize', resizeRichText);
富文本与动画结合
富文本样式可以与 ECharts 的动画效果结合，创建动态变化的文本：
option = {
series: [{
type: 'pie',
radius: ['40%', '70%'],
label: {
formatter: '{a|{b}: {c}}',
rich: {
a: {
fontSize: 14,
color: '#333',
transition: 'all 0.3s'
}
}
},
emphasis: {
label: {
rich: {
a: {
fontSize: 18,
color: '#ff0000'
}
}
}
},
data: [
{value: 1048, name: '搜索引擎'},
{value: 735, name: '直接访问'},
{value: 580, name: '邮件营销'}
]
}]
};
富文本在工具提示中的应用
工具提示(tooltip)也支持富文本样式：
option = {
tooltip: {
trigger: 'axis',
formatter: function(params) {
return `
<div style="font-weight:bold;margin-bottom:5px">${params[0].axisValue}</div>
${params.map(item => `
<div>
<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${item.color};margin-right:5px"></span>
<span style="color:#666">${item.seriesName}: </span>
<span style="font-weight:bold">${item.value}</span>
</div>
`).join('')}
`;
}
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
富文本性能优化
当图表中包含大量富文本时，可以考虑以下优化策略：
- 减少不必要的富文本样式定义
- 对静态文本使用缓存
- 限制富文本的复杂程度
- 在不需要交互时关闭富文本功能
option = {
series: [{
type: 'bar',
large: true, // 开启大数据量优化
label: {
show: false, // 默认关闭标签
emphasis: { // 只在悬停时显示
show: true,
formatter: '{a|{b}}',
rich: {
a: {
fontSize: 12
}
}
}
},
data: largeDataArray
}]
};
富文本与主题结合
ECharts 的主题系统可以与富文本样式结合使用，实现统一的视觉风格：
// 定义主题
echarts.registerTheme('myTheme', {
textStyle: {
fontFamily: 'Arial'
},
rich: {
header: {
fontSize: 18,
fontWeight: 'bold',
color: '#333'
},
body: {
fontSize: 14,
color: '#666'
}
}
});
// 应用主题
const myChart = echarts.init(dom, 'myTheme');
myChart.setOption({
series: [{
type: 'bar',
label: {
formatter: '{header|标题}\n{body|内容}',
rich: {
// 继承主题中的rich定义
}
}
}]
});
富文本与国际化
富文本样式可以配合国际化方案，实现多语言支持：
const i18n = {
en: {
title: 'Sales',
unit: 'USD'
},
zh: {
title: '销售额',
unit: '元'
}
};
function setChartLanguage(lang) {
myChart.setOption({
series: [{
label: {
formatter: `{title|${i18n[lang].title}}\n{value|1000} {unit|${i18n[lang].unit}}`,
rich: {
title: {
fontSize: 16
},
value: {
fontSize: 24,
fontWeight: 'bold'
},
unit: {
fontSize: 12
}
}
}
}]
});
}
富文本与SVG渲染
当使用 SVG 渲染器时，富文本的表现会有一些差异：
// 使用SVG渲染器初始化
const myChart = echarts.init(dom, null, {renderer: 'svg'});
myChart.setOption({
series: [{
type: 'pie',
label: {
// SVG渲染器下部分CSS属性可能不支持
formatter: '{a|{b}}',
rich: {
a: {
color: '#333',
fontSize: 14,
// SVG不支持textShadow
// textShadow: '1px 1px 2px #000'
}
}
}
}]
});
富文本与Canvas渲染对比
Canvas 和 SVG 渲染器对富文本的支持有所不同：
- Canvas 支持更丰富的文本效果（如阴影）
- SVG 渲染的文本更清晰，适合高分辨率显示
- Canvas 在大数据量时性能更好
- SVG 支持文本选择（需额外配置）
// 根据需求选择合适的渲染器
function initChart(useSVG) {
return echarts.init(dom, null, {
renderer: useSVG ? 'svg' : 'canvas'
});
}
富文本与ECharts GL
在 3D 图表中使用富文本时，需要考虑额外的视觉因素：
option = {
series: [{
type: 'bar3D',
label: {
show: true,
formatter: '{a|{b}}',
rich: {
a: {
color: '#fff',
// 3D图表中需要更强的阴影提高可读性
textShadowBlur: 10,
textShadowColor: '#000'
}
},
// 3D标签需要调整位置
position: 'top'
},
data: [...]
}]
};
富文本与无障碍访问
为提升可访问性，富文本应遵循以下原则：
- 确保足够的颜色对比度
- 避免仅通过颜色传达信息
- 为图标提供文本替代
- 保持合理的字体大小
option = {
series: [{
type: 'pie',
label: {
formatter: '{icon|●} {text|{b}: {c}}',
rich: {
icon: {
// 为图标提供ARIA标签
ariaLabel: '数据项',
fontSize: 12
},
text: {
color: '#333',
// 确保与背景的对比度
backgroundColor: 'rgba(255,255,255,0.7)',
fontSize: 14
}
}
}
}]
};
