ECharts的emphasis配置用于控制系列项在鼠标悬停、选中触发等强调状态下的样式表现，合理设置该配置可以提升图表的交互体验，让重点数据更突出。不同的图表系列对emphasis的支持存在差异，配置时也需要遵循特定的层级规则。
emphasis基础配置结构
emphasis配置通常放在series的对应系列配置项下，基础结构包含样式属性和触发方式两个核心部分，以下是折线图系列的emphasis基础配置示例：
option = {
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'line',
data: [120, 200, 150, 80, 70],
// 强调效果配置
emphasis: {
// 触发强调的方式，可选'self'（自身触发）、'series'（同系列其他项触发）
focus: 'self',
// 强调状态下的样式配置
itemStyle: {
color: '#ff0000',
borderWidth: 3,
borderColor: '#fff'
},
label: {
show: true,
fontSize: 14,
fontWeight: 'bold'
}
}
}
]
};
不同系列的特殊配置规则
柱状图系列
柱状图的emphasis除了常规样式配置外，还支持配置柱子的阴影效果，示例代码如下：
series: [
{
type: 'bar',
data: [120, 200, 150, 80, 70],
emphasis: {
itemStyle: {
color: '#ff9900',
// 柱状图阴影模糊大小
shadowBlur: 10,
// 柱状图阴影颜色
shadowColor: 'rgba(0,0,0,0.3)',
// 柱状图阴影偏移
shadowOffsetX: 0,
shadowOffsetY: 0
}
}
}
]
饼图系列
饼图的emphasis支持配置扇区的偏移效果，让选中的扇区向外突出，示例代码如下：
series: [
{
type: 'pie',
data: [
{ value: 1048, name: '搜索引擎' },
{ value: 735, name: '直接访问' },
{ value: 580, name: '邮件营销' }
],
emphasis: {
// 扇区偏移距离
scaleSize: 10,
itemStyle: {
color: '#36cfc9'
},
label: {
show: true,
fontSize: 16
}
}
}
]
常见配置陷阱
陷阱1：配置层级错误
很多开发者会把emphasis配置放在series同级或者itemStyle内部，这会导致配置不生效。正确的层级是emphasis直接作为系列配置的子项，与type、data等配置平级。错误配置示例如下：
// 错误配置示例
series: [
{
type: 'line',
data: [120, 200, 150, 80, 70],
itemStyle: {
// 错误：把emphasis放在itemStyle内部
emphasis: {
color: '#ff0000'
}
}
}
]
陷阱2：focus配置与交互需求不匹配
focus属性控制强调时其他同系列项的显示状态，默认值为none，即强调时其他项样式不变。如果设置为series，强调当前项时同系列其他项会淡出，很多开发者没有注意这个属性，导致交互效果不符合预期。如果需要仅当前项高亮，需显式设置focus: 'self'。
陷阱3：样式属性名拼写错误
ECharts的样式属性名遵循驼峰命名规则，比如边框宽度是borderWidth而不是border-width，很多开发者受CSS书写习惯影响，使用短横线命名，导致样式不生效。以下是错误和正确的属性名对比：
| 错误写法 | 正确写法 |
|---|---|
| border-color | borderColor |
| font-size | fontSize |
| shadow-blur | shadowBlur |
陷阱4：动态数据更新后emphasis失效
如果通过setOption动态更新series数据，没有保留emphasis配置，会导致强调效果消失。动态更新时需要确保emphasis配置项仍然存在，或者将emphasis配置提取为公共配置复用。
调试技巧
如果emphasis配置不生效，可以通过ECharts实例的on方法监听鼠标事件，打印当前配置排查问题，示例代码如下：
// 假设已经初始化了echarts实例chart
chart.on('mouseover', function(params) {
console.log('当前鼠标悬停的配置项：', params);
// 打印当前系列的完整配置，检查emphasis是否存在
console.log('当前系列配置：', chart.getOption().series[params.seriesIndex]);
});
通过以上配置规则和陷阱梳理，开发者可以快速掌握ECharts系列项emphasis的正确配置方式，避免常见的配置错误，实现符合预期的图表强调交互效果。