ECHARTS: Tooltip on Line Chart with no Symbols

user_1012525 0
Viewed 338

I'm trying to do something which I would imagine should be very simple. With a standard simple line chart, it draws the line and symbols, and setting the tooltip option will mean whenever you hover over a symbol it will display a box with the name of the line and the symbol value. I want to display the same tooltip box, with just the name of the line, with symbols disabled. I disable the symbols with symbolSize: 0, or in latest version showSymbol : false, but with these settings, there seems no way to get a tooltip to work on hovering over the line itself. Obviously some event is thrown as the 'emphasis' setting work for line hover, e.g. can increase the line width.

echarts
1 Answers

To make hovering over the line itself work, you'll have to set triggerLineEvent to true:

series: [
  {
    ... // your line serie config
    triggerLineEvent: true,
  },

Then you can use Echart's mouse event to manage mouse hovering the line :

var tooltipDisplay = ""

// Called when your mouse hover an object (params : the object you hover)
myChart.on('mouseover', function(params) {
  // Check if it's hovering a line
  if(params.componentSubType == "line"){
    // get hovered line series name
    tooltipDisplay = params.seriesName
  }
});

//Called when your mouse leaves an object (params : the object you leave)
myChart.on('mouseout', function(params) {
  tooltipDisplay = ''
});

Then, to display that in the tooltip :

tooltip: [
  {
    ... // your tooltip config
    formatter : (params) => {
      return tooltipDisplay;
    }
  },

Full example :

var myChart = echarts.init(document.getElementById('main'));

var tooltipDisplay = ""

option = {
  grid: {
     top: '10px',
     bottom: '40px',
     left: '100px',
     right: '100px',
  },
  tooltip: {
    trigger: 'axis',
    formatter : (params) => {
      return tooltipDisplay;
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Email',
      type: 'line',
      data: [120, 132, 101, 134, 90, 230, 210],
      showSymbol: false,
      triggerLineEvent: true,
    },
    {
      name: 'Search Engine',
      type: 'line',
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      showSymbol: false,
      triggerLineEvent: true
    }
  ]
};

myChart.on('mouseover', function(params) {
  if(params.componentSubType == "line"){
    tooltipDisplay = params.seriesName
  }
});

myChart.on('mouseout', function(params) {
  tooltipDisplay = ''
});

myChart .setOption(option)
<html>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
    <div id="main" style="width: 450px; height:170px;"></div>
  </body>
</html>

user_142593670
Related