echart多y轴 切换标题时 永远只显示一个分割线

在 ECharts 中，如果你想要实现多个 Y 轴，并且在切换标题时始终只显示一条分割线，你可以通过监听标题的切换事件来动态调整 Y 轴的 splitLine 属性。以下是一个简单的示例代码：

var myChart = echarts.init(document.getElementById('main'));
 
var option = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['数据1', '数据2']
    },
    xAxis: {
        type: 'category',
        data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月']
    },
    yAxis: [
        {
            type: 'value',
            name: '数据1',
            splitLine: { show: true }
        },
        {
            type: 'value',
            name: '数据2',
            splitLine: { show: false }
        }
    ],
    series: [
        {
            name: '数据1',
            type: 'line',
            yAxisIndex: 0,
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '数据2',
            type: 'line',
            yAxisIndex: 1,
            data: [220, 182, 191, 234, 290, 330, 310]
        }
    ]
};
 
myChart.setOption(option);
 
// 监听标题的切换事件
myChart.on('click', function (params) {
    if (params.componentType === 'legend') {
        var yAxes = option.yAxis;
        var currentSeries = option.series.find(function (series) {
            return series.name === params.name;
        });
        var currentYAxisIndex = currentSeries.yAxisIndex;
 
        // 切换标题时，只显示当前 Y 轴的分割线
        yAxes.forEach(function (yAxis, index) {
            yAxis.splitLine.show = index === currentYAxisIndex;
        });
 
        // 更新图表配置
        myChart.setOption({ yAxis: yAxes });
    }
});

在这个示例中，我们定义了两个 Y 轴并分别给它们设置了不同的 name。通过监听图表的 click 事件，我们可以判断用户点击的是哪个图例，并动态地更改对应 Y 轴的 splitLine.show 属性。这样，当用户点击图例切换显示不同的系列时，只有该系列对应的 Y 轴分割线会显示，其他 Y 轴的分割线则会隐藏。