在 ECharts 中，你可以通过配置 axisLabel 的 formatter 属性以及使用 ECharts 提供的事件机制来实现 yAxis 标签的鼠标事件触发。以下是一个示例，演示如何在 yAxis 标签上触发鼠标事件：
option = {
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: function (value, index) {
                // 使用 span 标签包裹刻度值，并添加自定义的 class 和 data-index 属性
                return `<span class="y-axis-label" data-index="${index}">${value}</span>`;
            }
        }
    },
    xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E'],
    },
    series: [
        {
            type: 'bar',
            data: [10, 20, 15, 25, 30]
        }
    ]
};

// ECharts 实例化后，添加事件监听器
var myChart = echarts.init(document.getElementById('yourChartId'));
myChart.on('mousemove', function (params) {
    // 判断是否鼠标在 yAxis 标签上
    if (params.event.target.classList.contains('y-axis-label')) {
        var dataIndex = params.event.target.dataset.index;
        console.log('Mouse over yAxis label with index:', dataIndex);
        // 在这里执行你的鼠标事件处理逻辑
    }
});

在上述示例中，通过 axisLabel 的 formatter 返回了一个包含刻度值的 span 标签，并添加了自定义的 class 和 data-index 属性。然后，通过 ECharts 实例的 on 方法监听 'mousemove' 事件，判断是否鼠标在 yAxis 标签上，从而触发相应的鼠标事件处理逻辑。

请确保在实际项目中替换 'yourChartId' 为你实际的图表容器的 ID。




转载请注明出处：http://www.zyzy.cn/article/detail/5203/ECharts