echarts 柱状图设置点击事件

以下是使用Echarts设置柱状图点击事件的方法：

1. 首先需要在HTML文件中引入Echarts的JS文件。

2. 在JS文件中定义一个Echarts实例，并设置好基本的柱状图参数。

3. 使用Echarts的on()方法来监听柱状图的点击事件，获取点击的柱子的对应参数。

4. 通过获取到的参数，重构柱状图，并根据选中的名字改变柱子的颜色样式。

下面是一个示例代码：

// 引入Echarts的JS文件
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/echarts.min.js"></script>

// 定义Echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 设置基本的柱状图参数
var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'bar'
    }]
};

// 监听柱状图的点击事件
myChart.on('click', function(params) {
    // 获取点击的柱子的对应参数
    var checkName = params.name;
    // 重构柱状图
    myChart.setOption(option);
    // 根据选中的名字改变柱子的颜色样式
    option.series[0].itemStyle.normal.color = function(params) {
        if (checkName === params.name) {
            return '#2f4554';
        } else {
            return '#c23531';
        }
    };
});

// 渲染柱状图
myChart.setOption(option);