聚焦功能focus
,Echarts版本需要
≥v5.0.0`
柱条与刻度标签联动聚焦
绘制一个简易的柱状图
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
emphasis: {
focus: true // 聚焦
}
}
]
设置emphasis.focus
为true
,会触发聚焦效果,默认聚焦效果只会出现在柱条上,x轴标签不会跟着一起联动。
需要结合事件处理函数on
来实现
myChart.on('mouseover', param => {
myChart.dispatchAction({
type: "highlight",
dataIndex: param.dataIndex
})
// 通过修改文字颜色实现聚焦效果
myChart.setOption({
xAxis: {
axisLabel: {
color: (value, index) => {
return index === param.dataIndex ? '#333' : '#eee'
}
}
}
})
})
// 鼠标移出恢复
myChart.on('mouseout', param => {
myChart.dispatchAction({
type: "downplay"
})
myChart.setOption({
xAxis: {
axisLabel: {
color: (value, index) => {
return '#333'
}
}
}
})
})
设置xAxis.triggerEvent
开启标签响应鼠标事件
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
triggerEvent: true
}
多柱条相同系列联动
注意要设置系列名
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: '上月',
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
emphasis: {
focus: true
}
},
{
name: '本月',
data: [98, 123, 152, 110, 90, 160, 120],
type: 'bar',
emphasis: {
focus: true
}
}
]
同一个系列高亮
myChart.on('mouseover', param => {
myChart.dispatchAction({
type: "highlight",
seriesName: param.seriesName
});
})
// 这里不需要设置鼠标移出事件也会自动恢复
// myChart.on('mouseout', param => {
// myChart.dispatchAction({
// type: "downplay"
// })
// })