具有不同工具提示的 EChart 系列答案

【问题标题】：EChart series with different tooltip具有不同工具提示的 EChart 系列
【发布时间】：2020-09-15 12:35:02
【问题描述】：

我的 Angular 应用程序中有以下 EChart：

var option = {
  xAxis: {
    type: 'category',
    data: ["A", "B", "C", "D", "E"]
  },
  yAxis: {
    type: 'value',
  },
  tooltip: {
      trigger: 'axis',
         axisPointer: {
           type: 'shadow',
         },
        formatter: (params) => {
          return (
            "Text One" +
            '<br/>' +
        
            params[0].name
          );
        },
      },
  series: [
    {
      data: [1, 2, 3, 4, 5],
      name: 'value',
      stack: 'one',
      type: 'bar',
      tooltip: {
        formatter: (params) => {
          return (
            "Text One" +
            '<br/>' +
        
            params[0].name
          );
        },
      },
    },
    {
      data: [0, 1, 2, 3, 4],
      name: 'prediction',
      stack: 'one',
      type: 'bar',
      tooltip: {
        formatter: (params) => {
          return (
            "Text Two" +
            '<br/>' +
            params[0].name
          );
        },
      },
    },
  ],
};

我基本上有two series，我的问题是如何专门为每个系列格式化tooltip。

在我的示例中，仅显示第一个系列中的“文本 1”。

【问题讨论】：

标签： javascript echarts ngx-echarts apache-echarts

【解决方案1】：

工具提示触发器有两种类型（“项目”和“轴”）

请使用 tooltip.trigger = 'item', 为不同系列分别显示工具提示。

tooltip.trigger='axis' 用于显示一个通用工具提示，其中包含给定轴级别的所有系列数据。

【讨论】：

【解决方案2】：

如果您使用工具提示触发器“轴”，则格式化程序函数参数中的“参数”将是一个包含系列工具提示信息的数组。

如果要格式化第一个系列，可以访问 params[0]。同样，如果你想格式化第二个系列，你可以访问 params[1]。

请看下面的例子：

var option = {
  xAxis: {
    type: "category",
    data: ["A", "B", "C", "D", "E"],
  },
  yAxis: {
    type: "value",
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
    formatter: (params) => {
      return `
                Tooltip: <br />
                ${params[0].seriesName}: ${params[0].value}<br />
                ${params[1].seriesName}: ${params[1].value}
                `;
    },
  },
  series: [
    {
      data: [1, 2, 3, 4, 5],
      name: "model",
      stack: "one",
      type: "bar",
    },
    {
      data: [0, 1, 2, 3, 4],
      name: "prediction",
      stack: "one",
      type: "bar",
    },
  ],
};

【讨论】：