1.移入高亮 移出恢复
移入事件:
myChart.on('mouseover', params => {
// 也可以在鼠标移入的时候拿到y轴上的值
if (params.componentType === 'yAxis') {
const yAxisName = params.value
// 拿到y轴上的名称并添加样式
const yAxisItem = {
value: yAxisName,
textStyle: {
color: '#00ff7f'
}
}
// 拿到鼠标移入的是第几项
const index = categories.findIndex(item => {
return item === yAxisName || item.value === yAxisName
})
// 更新y轴上的数据样式,并重绘
categories.splice(index, 1, yAxisItem)
option.yAxis.data = JSON.parse(JSON.stringify(categories))
myChart.setOption(option)
}
})
移出事件
// 注册 mouseout 事件,类目轴名称恢复默认颜色
myChart.on('mouseout', params => {
if (params.componentType === 'yAxis') {
const yAxisName = params.value
const index = categories.findIndex(item => {
return item === yAxisName || item.value === yAxisName
})
categories.splice(index, 1, yAxisName)
option.yAxis.data = JSON.parse(JSON.stringify(categories))
myChart.setOption(option)
}
})
2.点击高亮当前项
myChart.on('click', (params) => {
// 注意:点击的时候就先将y轴上的数据恢复!!!
// 如果不恢复的话,就是点击几个高亮几个。。。
categories = ['categoryA', 'categoryB', 'categoryC']
// 拿到点击的名称并设置颜色
if (params.componentType === 'yAxis') {
const yAxisName = params.value
const yAxisItem = {
value: yAxisName,
textStyle: {
color: '#00ff7f'
}
}
// 找到是第几项
const index = categories.findIndex(item => {
return item === yAxisName || item.value === yAxisName
})
// 更新这一项的设置(除了名称外添加了样式),并重绘
categories.splice(index, 1, yAxisItem)
option.yAxis.data = JSON.parse(JSON.stringify(categories))
myChart.setOption(option)
}
})