echarts 提示框 分页

ECharts 提示框默认只显示一个数据项，如果需要分页显示多个数据项，可以使用 `tooltip` 的 `formatter` 属性来自定义提示框内容，并在其中添加分页功能。

具体实现方法如下：

1. 在 `tooltip` 中设置 `trigger: 'axis'`，表示在显示区域内的轴上触发提示框。

2. 在 `tooltip` 的 `formatter` 中编写分页逻辑，例如：

var data = [
  {name: '数据1', value: 100},
  {name: '数据2', value: 200},
  {name: '数据3', value: 300},
  {name: '数据4', value: 400},
  {name: '数据5', value: 500},
];

function formatTooltip(params) {
  var currentIndex = params[0].dataIndex;
  var html = '';
  for (var i = currentIndex; i < data.length && i < currentIndex + 3; i++) {
    html += data[i].name + ': ' + data[i].value + '<br>';
  }
  if (currentIndex + 3 < data.length) {
    html += '<a href="#" onclick="showMore(' + (currentIndex + 3) + ')">查看更多</a>';
  }
  return html;
}

function showMore(startIndex) {
  var chart = echarts.getInstanceByDom(document.getElementById('chart'));
  chart.dispatchAction({
    type: 'showTip',
    seriesIndex: 0,
    dataIndex: startIndex
  });
}

3. 在 `series` 中设置 `axisPointer` 的 `type` 为 `'shadow'`，表示在有阴影的区域内触发提示框。同时，通过 `tooltip` 的 `position` 属性将提示框位置固定在图表的右侧。

完整代码示例：

var data = [
  {name: '数据1', value: 100},
  {name: '数据2', value: 200},
  {name: '数据3', value: 300},
  {name: '数据4', value: 400},
  {name: '数据5', value: 500},
];

function formatTooltip(params) {
  var currentIndex = params[0].dataIndex;
  var html = '';
  for (var i = currentIndex; i < data.length && i < currentIndex + 3; i++) {
    html += data[i].name + ': ' + data[i].value + '<br>';
  }
  if (currentIndex + 3 < data.length) {
    html += '<a href="#" onclick="showMore(' + (currentIndex + 3) + ')">查看更多</a>';
  }
  return html;
}

function showMore(startIndex) {
  var chart = echarts.getInstanceByDom(document.getElementById('chart'));
  chart.dispatchAction({
    type: 'showTip',
    seriesIndex: 0,
    dataIndex: startIndex
  });
}

var option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    position: function (point, params, dom, rect, size) {
      return [point[0] + 10, point[1] - 80];
    },
    formatter: formatTooltip
  },
  grid: {
    left: '5%',
    right: '15%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'category',
    data: data.map(function (item) {
      return item.name;
    })
  },
  series: [{
    type: 'bar',
    data: data
  }]
};

var chart = echarts.init(document.getElementById('chart'));
chart.setOption(option);