即使标签的可见性设置为 false，也可以查看 Echarts 中突出显示条形的标签

Question

我想在 Echarts 中将标签的可见性设置为 false，可以通过以下方式实现：

label: {
  show: false
} 

但是，我还有另一个设置：

emphasis: {
  focus: "series"
}

这样，其他系列中的条形也将突出显示。问题是我看不到他们的标签。

总之，当标签的可见性设置为 false 时，我希望在强调时能够看到其他系列中突出显示的条形的标签。

我试过这个：

label: {
  show: false,
  emphasis: {
    show: true,
    focus: "series",
  }
}

Answer 1

您可以收听图表事件并相应地更改您的图表选项。 这里是一个小示例，当鼠标悬停在系列项目上以及停止悬停（鼠标悬停/鼠标移出）时，标签可见性会发生变化：

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      id: '1',
      type: 'bar',
      data: [150, 230, 224, 218, 135, 147, 260],
      label: {position: 'top'},
      emphasis: {
        focus: 'series',
      }
    },
    {
      id: '2',
      type: 'bar',
      data: [230, 224, 218, 150, 147, 110, 90],
      label: {position: 'top'},
      emphasis: {
        focus: 'series',
      }
    }
  ]
};

myChart.on('mouseover', function(params) {
  const seriesId = params.seriesId;
  myChart.setOption({series: [{id: seriesId, label: {show: true}}]});
});

myChart.on('mouseout', function(params) {
  const seriesId = params.seriesId;
  myChart.setOption({series: [{id: seriesId, label: {show: false}}]});
});