Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – View the labels of highlighted bars in Echarts even when the visibility of labels is set to false

I want to set the visibility of labels to false within Echarts, and I can achieve this with the following:

label: {
  show: false
}

However, I have another setting:

emphasis: {
  focus: "series"
}

With this, the bars in the other series also become highlighted. The issue is that I cannot see their labels.

In summary, when the visibility of labels is set to false, I want to be able to see the labels of the highlighted bars in the other series when emphasized.

I tried this:

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

2

Answers


  1. 0

    You can listen to chart events and change your chart option accordingly. Here is a small example where the label visability is changed when the mouse hovers over a series item and when it stops hovering over (mouseover / mouseout):

    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}}]});
});
    Login or Signup to reply.
  2. 0

    Visit https://echarts.apache.org/zh/option.html#series-line.selectedMode

    And try the setting with selectedMode and select like below,and make sure the selectMode must be "series"

    {
    data: [11, 444, 22, 999, 777, 666, 1321],
    type: "line",
    selectedMode:'series',
    select: {
      label: {
        show: true
      }
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search