Tooltip

Code

const chart = echarts.init(document.getElementById('chart'));
chart.setOption({
  tooltip: {
    trigger: 'axis',
    show: true,
    backgroundColor: 'rgba(50, 50, 50, 0.9)',
    borderColor: '#777',
    borderWidth: 1,
    padding: [8, 12],
    textStyle: { color: '#fff', fontSize: 12 },
    axisPointer: {
      type: 'cross',
      label: { backgroundColor: '#6a7985' }
    },
    formatter: function(params) {
      const items = Array.isArray(params) ? params : [params];
      let html = '<b>' + items[0].name + '</b><br/>';
      items.forEach(function(item) {
        html += item.marker + ' ' + item.seriesName +
                ': <b>' + item.value + '</b><br/>';
      });
      return html;
    }
  },
  xAxis: { type: 'category', data: ['A', 'B', 'C'] },
  yAxis: { type: 'value' },
  series: [
    { name: 'S1', type: 'line', data: [10, 20, 30] },
    { name: 'S2', type: 'line', data: [15, 25, 35] }
  ]
});

Explanation

The tooltip formatter receives a params array (when trigger is 'axis') containing one entry per series at the hovered x. Each entry exposes marker (colored dot HTML), seriesName, name, and value for building custom HTML. axisPointer:'cross' draws a crosshair across both axes with a labeled handle.

More ECharts Snippets