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

问题描述

我的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,4],name: 'prediction',tooltip: {
        formatter: (params) => {
          return (
            "Text Two" +
            '<br/>' +
            params[0].name
          );
        },],};

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

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

解决方法

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

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

tooltip.trigger ='axis'用于显示给定轴级别上所有系列数据的通用工具提示。

,

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

如果要格式化第一个序列，则可以访问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,4],name: "prediction",],};