ECharts-饼图-默认高亮

45次阅读

共计 665 个字符，预计需要花费 2 分钟才能阅读完成。

效果: 饼图默认高亮第一条数据, 鼠标滑入哪块高亮哪块, 鼠标移出时高亮最后悬停的那块

...
<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>

正文完