Как выделить полосу при нажатии на гистограмму echart? - PullRequest
Новая
       13

Как выделить полосу при нажатии на гистограмму echart?

0 голосов
/ 01 июня 2018

Я создал гистограмму с помощью библиотеки echarts.Как можно выделить гистограмму, когда пользователь нажимает на панель, или применить границу полосы при нажатии на панель?

Есть ли способ подсветить панель, когда для нее запускается событие щелчка

1 Ответ

0 голосов
/ 31 июля 2018

Да, есть способ выделить полосу при щелчке.

Когда вызывается событие щелчка, вы можете получить точные данные (одиночную полосу) из параметра, тогда вам нужно толькоизмените цвет (например, уменьшите альфа) этих данных для достижения цели «выделения».

И не забудьте одновременно восстановить цвет других данных (не нажал).

проверить это демо 

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