echarts 堆叠面积图 tooltip自定义内容

对于 Echarts 堆叠面积图，通过设置 tooltip 的 formatter 属性可以自定义 tooltip 的内容。具体操作步骤如下：

1.在 Echarts 的 option 中设置 tooltip 的 formatter 属性，如下所示：

tooltip: {
    trigger: 'axis',
    formatter: function (params) {
        var result = params[0].name + '<br>';
        result += params[0].seriesName + ': ' + params[0].value + '<br>';
        result += params[1].seriesName + ': ' + params[1].value + '<br>';
        return result;
    }
}

2.在 formatter 中编写自定义的 tooltip 内容，需要使用 params 参数获取数据并进行处理，比如获取系列名称、数值等信息。上述示例中，自定义的 tooltip 内容包括堆叠面积图的横轴数据、第一条线的名称和数值、第二条线的名称和数值。

通过上述操作，就可以实现堆叠面积图 tooltip 的自定义内容。

相关问题

echarts 堆叠面积图 tooltip自定义内容并且加上跟随颜色的小圆点

您可以通过 Echarts 中的 formatter 函数来自定义 tooltip 内容，具体实现方式如下：

option = {
  // 省略其他配置项
  tooltip: {
    trigger: 'axis',
    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
      type: 'line'            // 默认为直线，可选为：'line' | 'shadow'
    },
    formatter: function(params, ticket, callback) {
      var content = '';
      for (var i = 0; i < params.length; i++) {
        var dot = '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:' + params[i].color + '"></span>'; // 实心小圆点
        var seriesName = params[i].seriesName;
        var value = params[i].value;
        content += dot + seriesName + ': ' + value + '<br>';
      }
      return content;
    }
  },
  // 省略其他配置项
};

上面代码中，formatter 函数会接收到一个数组表示被触发的数据集合。我们可以从中获取到对应的数据，并将自定义的内容以字符串的形式返回，这里我添加了一个实心的小圆点来跟随颜色，该小圆点的 CSS 样式通过内联方式添加。

希望这能够帮到您！