echarts柱状图y轴文字添加点击事件

ECharts是一个强大的数据可视化库，要为柱状图的Y轴文字添加点击事件，你需要结合其内置的事件系统和DOM操作。以下是一个简单的示例：

首先，在配置图表时，设置yAxis的textStyle，使其具有鼠标移过时的样式，并保存一个引用：

var option = {
    xAxis: {},
    yAxis: {
        type: 'category',
        splitLine: {
            lineStyle: {
                color: ['#ccc']
            }
        },
        textStyle: {
            normal: {
                color: '#000',
                cursor: 'pointer' // 添加鼠标指针
            },
            emphasis: {
                fontSize: '16px'
            }
        },
        data: ['A', 'B', 'C', 'D', 'E'] // Y轴标签列表
    },
    series: [{
        type: 'bar',
        data: [10, 20, 30, 40, 50]
    }]
};

var myChart = echarts.init(document.getElementById('main'), 'bar'); // 获取图表实例
myChart.setOption(option);

然后，你可以监听`mouseover`事件，当用户鼠标移到某根柱子对应的Y轴文字上时，触发事件：

myChart.on('mouseover', function(params) {
    var yTitle = params.value[0].name; // 获取当前被覆盖的Y轴文字
    console.log('Y轴文字 "' + yTitle + '" 被点击');
    // 这里可以添加具体的DOM操作，如显示详细信息模态框等
});

同时，也需要处理`mouseout`事件，以防止事件残留：

myChart.on('mouseout', function() {
    // 当鼠标离开柱状图区域时，清除之前的操作
});