ECharts pie chart is highlighted by default

Posted May 25, 20201 min read

Effect:By default, the pie chart highlights the first piece of data, which block is highlighted when the mouse is slid in, and the last hovered block is highlighted when the mouse is moved out

...
<div id = "test" style = "width:400px; height:400px"> </div>

<script>
    let echart = echarts.init(document.getElementById('test'))

    let option = {
        ...
    }

    echart.setOption(option)

    //The first data is highlighted by default
    echart.dispatchAction({
        type:'highlight',
        dataIndex:0
    })

    //Monitor mouse-in event
    echart.on('mouseover',(e) => {
        //Mouse over to cancel the entire series highlight
        echart.dispatchAction({
            type:'downplay',
            seriesIndex:e.seriesIndex
        })
        //Then highlight the mouse hover
        echart.dispatchAction({
            type:'highlight',
            dataIndex:e.dataIndex
        })
    })

    //Monitor mouse out event
    echart.on('mouseout',(e) => {
        //Mouse out to cancel all highlights of the entire series
        echart.dispatchAction({
            type:'downplay',
            seriesIndex:e.seriesIndex
        })
        //Then highlight the last mouse hover
        echart.dispatchAction({
            type:'highlight',
            dataIndex:e.dataIndex
        })
    })
</script>