效果: 饼图默认高亮第一条数据, 鼠标滑入哪块高亮哪块, 鼠标移出时高亮最后悬停的那块
...
<div id="test" style="width: 400px; height: 400px"></div>
<script>
let echart = echarts.init(document.getElementById('test'))
let option = {
...
}
echart.setOption(option)
// 默认高亮第一条数据
echart.dispatchAction({
type: 'highlight',
dataIndex: 0
})
// 监听鼠标滑入事件
echart.on('mouseover', (e) => {
// 鼠标滑入取消整个系列高亮
echart.dispatchAction({
type: 'downplay',
seriesIndex: e.seriesIndex
})
// 然后高亮鼠标悬停的那块
echart.dispatchAction({
type: 'highlight',
dataIndex: e.dataIndex
})
})
// 监听鼠标滑出事件
echart.on('mouseout', (e) => {
// 鼠标滑出取消整个系列所有高亮
echart.dispatchAction({
type: 'downplay',
seriesIndex: e.seriesIndex
})
// 然后高亮鼠标最后悬停的那块
echart.dispatchAction({
type: 'highlight',
dataIndex: e.dataIndex
})
})
</script>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。