echarts柱状图点击色块收缩功能

要实现echarts柱状图点击色块收缩功能，可以使用echarts的事件处理函数。具体步骤如下：

1.在echarts的option中设置series的itemStyle，使其具有点击事件。例如：

series: [{
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20],
    itemStyle: {
        normal: {
            color: function(params) {
                // 设置渐变色
                var colorList = [
                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#FFB64D'
                    }, {
                        offset: 1,
                        color: '#FFCB9F'
                    }]),
                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#FF7C7C'
                    }, {
                        offset: 1,
                        color: '#FFB6B6'
                    }])
                ];
                return colorList[params.dataIndex % colorList.length];
            }
        }
    }
}]

2.在echarts的option中设置series的emphasis，使其具有点击后的效果。例如：

emphasis: {
    itemStyle: {
        color: function(params) {
            // 设置点击后的颜色
            var colorList = [
                '#FFB64D', '#FF7C7C', '#A0D468', '#37BC9B', '#1E9FFF', '#FF6666'
            ];
            return colorList[params.dataIndex % colorList.length];
        }
    }
}

3.在echarts的option中设置series的event，使其具有点击事件的处理函数。例如：

event: {
    'click': function(params) {
        // 获取当前点击的数据
        var data = params.data;
        // 判断当前数据是否已经展开
        if (data.expand) {
            // 如果已经展开，则将其收缩
            data.expand = false;
            // 获取当前数据的索引
            var index = params.dataIndex;
            // 获取当前图表实例
            var chart = params.event.getChart();
            // 获取当前系列的所有数据
            var seriesData = chart.getOption().series[params.seriesIndex].data;
            // 将当前数据的值设置为0
            seriesData[index] = 0;
            // 更新图表
            chart.setOption({
                series: [{
                    data: seriesData
                }]
            });
        } else {
            // 如果未展开，则将其展开
            data.expand = true;
            // 获取当前数据的索引
            var index = params.dataIndex;
            // 获取当前图表实例
            var chart = params.event.getChart();
            // 获取当前系列的所有数据
            var seriesData = chart.getOption().series[params.seriesIndex].data;
            // 将当前数据的值设置为原始值
            seriesData[index] = data.value;
            // 更新图表
            chart.setOption({
                series: [{
                    data: seriesData
                }]
            });
        }
    }
}

以上就是实现echarts柱状图点击色块收缩功能的步骤。需要注意的是，以上代码仅为示例，具体实现需要根据实际情况进行调整。