柱状图 可点击 修改某个x轴样式echarts 柱状配置项内容和展示

配置项如下
      option = {
    color: ['#3398DB'],
    tooltip: {
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器,坐标轴触发有效
            type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        triggerEvent: true,
        data: ['Mon', {
            value: '2',
            textStyle: {
                color: 'red',
                borderWidth: '2',
                borderColor: 'blue',
                padding: 3
            }
        }, 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisTick: {
            alignWithLabel: true
        }
    },
    yAxis: [{
        type: 'value'
    }],
    series: [{
        name: '直接访问',
        type: 'bar',
        barWidth: '60%',
        data: [10, 52, 200, 334, 390, 330, 220],

    }]
};
myChart.on('click', function(params) {
    //为三个柱子设置点击事件
    var name = params.name;
    if (params.componentType == "xAxis") {

        alert("单击了" + params.value + "x轴标签");

    } else {

        alert("单击了" + params.name + "柱状图");

    }

});
    
截图如下