Echarts是前端开发中常用的可视化图表库，漏斗图是其中高频使用的图表类型，常用于展示业务流程中各阶段的转化情况。漏斗图中间的文字是传递数据信息的重要部分，默认颜色可能与项目主题不匹配，需要手动调整。
修改中间文字颜色的核心配置项
Echarts漏斗图的中间文字属于label配置项下的内容，要修改文字颜色，需要在series的漏斗图配置中找到label属性，设置其color字段即可。如果需要区分不同状态的文字颜色，还可以结合rich富文本配置实现更灵活的效果。
基础修改方式
直接在漏斗图的label中设置color属性，就能统一修改所有中间文字的颜色，示例如下：
// 基础漏斗图配置示例
option = {
series: [
{
type: 'funnel',
left: '10%',
top: 60,
bottom: 60,
width: '80%',
min: 0,
max: 100,
minSize: '0%',
maxSize: '100%',
sort: 'descending',
gap: 2,
// 漏斗图标签配置，控制中间文字样式
label: {
show: true,
position: 'inside',
// 设置中间文字颜色为红色
color: 'red',
fontSize: 14
},
data: [
{ value: 60, name: '访问' },
{ value: 40, name: '咨询' },
{ value: 20, name: '订单' },
{ value: 10, name: '成交' }
]
}
]
};
富文本自定义不同文字颜色
如果需要漏斗图中间的不同文字部分显示不同颜色，比如数值和名称用不同颜色区分，可以使用rich配置定义多个文本样式，然后在formatter中调用对应的样式名：
option = {
series: [
{
type: 'funnel',
left: '10%',
top: 60,
bottom: 60,
width: '80%',
min: 0,
max: 100,
minSize: '0%',
maxSize: '100%',
sort: 'descending',
gap: 2,
label: {
show: true,
position: 'inside',
// 使用富文本格式化内容
formatter: function(params) {
// 名称用蓝色，数值用橙色
return '{name|' + params.name + '}n{value|' + params.value + '}';
},
rich: {
name: {
// 名称文字颜色设为蓝色
color: 'blue',
fontSize: 14,
lineHeight: 20
},
value: {
// 数值文字颜色设为橙色
color: 'orange',
fontSize: 16,
fontWeight: 'bold',
lineHeight: 20
}
}
},
data: [
{ value: 60, name: '访问' },
{ value: 40, name: '咨询' },
{ value: 20, name: '订单' },
{ value: 10, name: '成交' }
]
}
]
};
注意事项
- 如果同时设置了
label的color和rich中的颜色，rich中定义的颜色会优先生效。 - 颜色值支持十六进制、rgb、rgba以及颜色英文名称等多种格式，比如
#ff0000、rgb(255,0,0)、rgba(255,0,0,0.5)都是合法的取值。 - 如果漏斗图设置了
labelLayout配置，需要确认该配置没有覆盖label中的颜色属性，避免样式不生效。
常见问题排查
如果按照上述配置修改后文字颜色没有变化，可以先检查配置项是否写在了正确的位置，label需要直接放在series的漏斗图配置对象下，而不是嵌套在其他子配置中。如果还是不生效，可以在浏览器控制台打印当前的option配置，确认颜色属性是否被正确读取。