CODEWITHSUNDEEP
javascriptgraphecharts
R Rajan
R Rajan

Reputation: 81

How to highlights bar when click echart bar graph?

I have created a bar graph using the echarts library. How can I highlight the bar graph when the user clicks on a bar, or else apply the bar border when a bar is clicked?

Is there a way to highlight a bar when the click event is triggered for the bar?

Upvotes: 6

Views: 8955

Answers (2)

sangelee
sangelee

Reputation: 165

Can be highlight like this:

chart.on('click', (params) => {
  chart.dispatchAction({
    type: 'highlight',
    seriesIndex: params.seriesIndex,
    dataIndex: params.dataIndex
  })
})

The highlight style can be set using emphasis.itemStyle

The document can be found here: https://echarts.apache.org/en/api.html#action.highlight

Upvotes: 3

Clocher Zhong
Clocher Zhong

Reputation: 2456

Yes, there is a way to highlight a bar when click.

When the click event is triggered, you can get the exactly data(single bar) be clicked from the parameter, then you only need to change color(For example, decrease alpha) of this data to achieve the 'highlight' goal.

And don't forget recovery color of other data(not clicked) at same time.

check this demo

let echartsObj = echarts.init(document.querySelector('#canvas'));


option = {


    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [{
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],

    }],
    yAxis: [{
        type: 'value'
    }],
    series: [{
        name: '直接访问',
        type: 'bar',
        barWidth: '60%',
        data: [{
            value: 10,
            itemStyle: {
                color: 'hsl(200,60%,45%)'
            }
        }, {
            value: 52,
            itemStyle: {
                color: 'hsl(200,60%,45%)'
            }
        }, {
            value: 200,
            itemStyle: {
                color: 'hsl(60,60%,45%)'
            }
        }, {
            value: 334,
            itemStyle: {
                color: 'hsl(150,60%,45%)'
            }
        }, {
            value: 390,
            itemStyle: {
                color: 'hsl(220,60%,45%)'
            }
        }, {
            value: 330,
            itemStyle: {
                color: 'hsl(200,60%,45%)'
            }
        }, {
            value: 220,
            itemStyle: {
                color: 'hsl(150,60%,45%)'
            }
        }]
    }]
};

echartsObj.setOption(option)

echartsObj.on('click', function(params) {
    console.log(params)
    option.series[0].data.forEach((data, index) => {
        if (index === params.dataIndex) {
            if (!data.isChecked) {
                data.itemStyle.color = getHighLightColor(data.itemStyle.color);
                data.isChecked = true;
            }
        } else {
            if (data.isChecked) {
                data.itemStyle.color = getOrigColor(data.itemStyle.color);
                data.isChecked = false;
            }

        }
    })
    echartsObj.setOption(option)
});


function getHighLightColor(color) {
    return color.replace(/(\d+)%\)/, (...args) => {
        return 20 + Number(args[1]) + '%)'
    });
}


function getOrigColor(highlightColor) {
    return highlightColor.replace(/(\d+)%\)/, (...args) => {
        return Number(args[1]) - 20 + '%)'
    });
}
    <html>
      <header>
        <script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts-en.min.js"></script>
      </header>
      <body>
      <div id="canvas" style="width: 100%; height: 200px">

</div>
      </body>
    </html>

Upvotes: 7

Related Questions