如何在点击ECharts柱状图时高亮对应柱子？

嘿，这问题我熟！在ECharts里给点击的柱状图加高亮或者自定义边框其实挺简单的，给你两种实用的实现思路，附带代码示例：

一、用ECharts自带的高亮API（快速实现） #

ECharts本身提供了highlight和downplay这两个内置方法，能快速实现点击高亮的效果，步骤如下：

1. 监听柱子的点击事件：通过chart.on('click')捕获用户点击的柱子信息
2. 先取消所有高亮：避免多个柱子同时高亮
3. 高亮当前点击的柱子：用dispatchAction触发高亮动作

代码示例：

// 假设你的ECharts实例已经初始化完成，变量名为chart
chart.on('click', function(params) {
    // 取消所有系列的高亮状态
    chart.dispatchAction({
        type: 'downplay',
        seriesIndex: 'all'
    });
    // 高亮当前点击的柱子
    chart.dispatchAction({
        type: 'highlight',
        seriesIndex: params.seriesIndex,
        dataIndex: params.dataIndex
    });
});

如果你想自定义高亮的样式（比如颜色、阴影），可以在series的emphasis配置里调整：

series: [
    {
        type: 'bar',
        data: [10, 20, 30, 40],
        emphasis: {
            itemStyle: {
                color: '#ff6347', // 高亮时的柱子颜色
                shadowBlur: 15,
                shadowColor: 'rgba(0, 0, 0, 0.4)'
            }
        }
    }
]

二、自定义添加边框（更灵活的个性化需求） #

如果需要给点击的柱子加边框这种更定制化的样式，可以通过修改对应数据的itemStyle来实现，步骤如下：

1. 初始化时给柱子设置默认样式：比如默认无边框
2. 记录上一次点击的柱子索引：用于恢复之前的样式
3. 点击时修改当前柱子的边框样式，同时重置上一个柱子的样式，最后更新图表

代码示例：

// 初始化数据，给每个柱子默认样式
let chartData = [
    { value: 12, name: '产品A' },
    { value: 25, name: '产品B' },
    { value: 18, name: '产品C' }
];

// 初始化ECharts实例
const chart = echarts.init(document.getElementById('your-chart-dom'));
let lastClickedIndex = -1; // 记录上一次点击的索引

// 初始配置
const option = {
    xAxis: {
        type: 'category',
        data: chartData.map(item => item.name)
    },
    yAxis: { type: 'value' },
    series: [
        {
            type: 'bar',
            data: chartData.map(item => ({
                value: item.value,
                itemStyle: {
                    borderWidth: 0, // 默认无边框
                    borderColor: '#000',
                    borderRadius: 4 // 可选：给柱子加圆角
                }
            }))
        }
    ]
};
chart.setOption(option);

// 监听点击事件
chart.on('click', function(params) {
    const seriesData = chart.getOption().series[0].data;
    
    // 恢复上一次点击的柱子样式
    if (lastClickedIndex !== -1) {
        seriesData[lastClickedIndex].itemStyle.borderWidth = 0;
    }
    
    // 给当前点击的柱子设置边框
    seriesData[params.dataIndex].itemStyle.borderWidth = 3;
    lastClickedIndex = params.dataIndex;
    
    // 更新图表
    chart.setOption({ series: [{ data: seriesData }] });
});

额外小技巧：点击空白区域取消高亮 #

如果你希望用户点击图表空白区域时取消高亮/边框，可以监听globalout事件：

chart.on('globalout', function() {
    // 方法一：取消内置高亮
    chart.dispatchAction({ type: 'downplay', seriesIndex: 'all' });
    
    // 方法二：重置所有边框样式（如果用的是自定义边框方法）
    const seriesData = chart.getOption().series[0].data;
    seriesData.forEach(item => item.itemStyle.borderWidth = 0);
    chart.setOption({ series: [{ data: seriesData }] });
    lastClickedIndex = -1;
});

内容的提问来源于stack exchange，提问作者R Rajan