Echarts 柱状图实现点击事件，要求：鼠标悬浮有加宽背景色区别，点击后背景保持选中，再次点击后取消选中。如果柱图中某一项xAxis数据为0也能实现同样效果，鼠标悬浮后有背景色标记，也能点击。不使用markArea实现

ECharts 的柱状图实现点击事件并包含鼠标悬停特效，可以利用其内置的`event`和`style`属性结合使用。首先，你需要设置每个柱子的数据系列，并添加点击事件监听器，比如：

var option = {
    // ... 其他图表配置项
    series: [{
        name: '数据',
        type: 'bar', // 或者 'column'
        data: [value1, value2, ...],
        itemStyle: {
            normal: { // 鼠标非悬停样式
                color: '#ccc'
            },
            emphasis: { // 点击后的选中样式
                color: '#ff0000',
                backgroundColor: '#eee'
            }
        },
        // 鼠标悬停时的样式，包含加宽背景色
        hoverAnimation: true,
        // 这里不需要 markArea，直接处理 hover
        onHover: function (params) {
            if (params.value[0] === 0) {
                this.data[params.seriesIndex].itemStyle.normal.width = '5px'; // 某一项为0的柱子加粗
            } else {
                this.data[params.seriesIndex].itemStyle.normal.width = '';
            }
            // 更新样式
            this.update();
        },
        onClick: function (params) {
            var currentColor = this.data[params.seriesIndex].itemStyle.normal.color;
            // 如果当前颜色和选中颜色一样，则取消选中
            if (currentColor === '#ff0000') {
                this.data[params.seriesIndex].itemStyle.normal.color = '#ccc';
            } else {
                // 否则，选中当前柱子
                this.data[params.seriesIndex].itemStyle.normal.color = '#ff0000';
            }
            // 更新样式
            this.update();
        }
    }]
};

// 使用ECharts实例渲染图表
yourChart.setOption(option);

在这个例子中，当鼠标悬停在柱子上，柱子会加宽显示背景色。点击柱子后，背景颜色会改变，并保持选中状态；再次点击则会取消选中。对于x轴值为0的柱子，会有额外的加粗处理。