echarts 柱状图点击

如果您使用的是Echarts的新版本（5.0及以上），您可以使用官方提供的API来实现柱状图的点击选中和高亮效果。您可以通过设置series中的itemStyle属性来定义点击选中后的样式，并通过设置series中的emphasis属性来实现高亮效果。具体代码如下所示：

// 在option中定义series的配置
series: [
    {
        type: 'bar',
        data: [10, 20, 30, 40, 50],
        itemStyle: {
            // 设置点击选中后的样式
            emphasis: {
                barBorderWidth: 1,
                barBorderColor: 'red',
                color: 'blue'
            }
        }
    }
]

// 通过监听chart的点击事件来实现点击选中效果
chart.on('click', function(params) {
    // 根据params中的dataIndex获取被点击的柱状图索引
    var dataIndex = params.dataIndex;
    // 根据索引获取对应的series配置
    var series = chart.getOption().series[dataIndex];
    
    // 通过设置series中的emphasis属性来实现高亮效果
    series.emphasis = {
        itemStyle: {
            color: 'red'
        }
    };
    
    // 更新图表
    chart.setOption({ series: [series });
});

如果您使用的是Echarts的老版本，可以使用官方提供的highlight和unhighlight方法来实现点击选中和高亮效果。具体代码如下所示：

// 通过监听chart的点击事件来实现点击选中和高亮效果
chart.on('click', function(params) {
    // 根据params中的dataIndex获取被点击的柱状图索引
    var dataIndex = params.dataIndex;
    
    // 调用highlight方法来实现点击选中效果，并指定被点击的柱状图索引
    chart.highlight('seriesName', dataIndex);
    
    // 调用setSeries方法来实现高亮效果，并指定被点击的柱状图索引
    chart.setSeries({
        type: 'bar',
        itemStyle: {
            normal: { color: 'red' }
        }
    }, dataIndex);
});

请注意，以上代码中的`chart`代表您创建的Echarts实例对象。根据您的实际情况，您可能需要调整代码中的一些参数和配置。希望这能帮到您！