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

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

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

Источник

1 ответ

Да, есть способ выделить панель при нажатии.

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

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

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

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>

Источник

Выделить можно так:

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

Стиль выделения можно установить с помощью emphasis.itemStyle

Документ можно найти здесь: https://echarts.apache.org/en/api.html

Источник
Другие вопросы по тегам