Echarts 在工具提示中显示附加信息

Question

我正在使用 echarts 绘制散点图。将鼠标悬停在某个点上后，我想在工具提示中显示更多数据，例如日期和唯一 ID - 此数据不是图中的轴。到目前为止，我有以下内容，但是我不知道如何显示额外的信息


option = {
            xAxis: {
            type: 'value',
            name: 'X axis title',
            nameLocation: 'middle',
            nameGap: 50,
            nameTextStyle: {
                fontSize: 12
            }
            },
            yAxis: {
                type: 'value',
                name: 'Y axis title',
                nameLocation: 'middle',
                nameGap: 70,
                nameTextStyle: {
                    fontSize: 12
                }
            },
            dataZoom: [{
                type: 'inside'
            }],
            legend: {
                orient: 'vertical',
                left: 10
            },
            grid: {
                    top: 80,
                    containLabel: true,
                },
            tooltip: {
                trigger: "item"
            },
            series: [{
                name: 'Outliers (Forensic Cases)',
                type: 'scatter',
                data: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6]
        ]],
                
            }, {
                name: 'Inliers (Regular Transaction)',
                type: 'scatter',
                data: [[172.7, 105.2], [153.4, 42]]
            }]
        };
        ;

Answer 1

感谢您的配置，节省了时间。

工具提示组件具有方法 formatter，您可以将其传递给它 function-callback 向附加数据存储发出请求以获取并在工具提示上显示必要信息的地方。

假设您有一个对象存储了需要在工具提示中显示的附加信息：

var store = {
  outliers: ['A', 'B', 'C', 'D', 'E', 'F'],
  inliers:  ['A', 'B', 'C', 'D', 'E', 'F']
}

让我们将 id 添加到每个数据系列，这将简化数据获取。

{
  id: 'outliers', // <--- this
  name: 'Outliers (Forensic Cases)',
  ...
},
{
  id: 'inliers', // <--- this
  name: 'Inliers (Regular Transaction)',
  ...
}

在回调中你将有这个默认参数：

{
  $vars: ["seriesName", "name", "value"],
  borderColor: undefined,
  color: "#c23531",
  componentIndex: 0,
  componentSubType: "scatter",
  componentType: "series",
  data: [159.5, 49.2],
  dataIndex: 2,
  dataType: undefined,
  dimensionNames: ["x", "y"],
  encode: {
    x: [0],
    y: [1]
  },
  marker: "&lt;span style=\&quot;display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#c23531;\&quot;&gt;&lt;/span&gt;",
  name: "",
  seriesId: "outliers",
  seriesIndex: 0,
  seriesName: "Outliers (Forensic Cases)",
  seriesType: "scatter",
  value: [circular object Array]
}

让我们为流程系列数据创建回调处理程序并将其显示在工具提示上：

var callback = (args) => {
  var data = store[args.seriesId][args.dataIndex]
  return args.marker + ' ' + args.value[1] + '<br />' + args.seriesId + ': ' + data
}

现在您可以将回调传递给 formatter。就这样了。请参阅下面的示例：

  var myChart = echarts.init(document.getElementById('main'));

  var store = {
    outliers: ['A', 'B', 'C', 'D', 'E', 'F'],
    inliers:  ['A', 'B', 'C', 'D', 'E', 'F']
  }

  var callback = (args) => {
    var data = store[args.seriesId][args.dataIndex]
    return args.marker + ' ' + args.value[1] + '<br />' + args.seriesId + ': ' + data
  }

  var option = {
    xAxis: {
      type: 'value',
      name: 'X axis title',
      nameLocation: 'middle',
      nameGap: 50,
      nameTextStyle: {
        fontSize: 12
      }
    },
    yAxis: {
      type: 'value',
      name: 'Y axis title',
      nameLocation: 'middle',
      nameGap: 70,
      nameTextStyle: {
        fontSize: 12
      }
    },
    dataZoom: [{
      type: 'inside'
    }],
    legend: {
      orient: 'vertical',
      left: 10
    },
    grid: {
      top: 80,
      containLabel: true,
    },
    tooltip: {
      trigger: "item",
      formatter: callback,
    },
    series: [{
        id: 'outliers',
        name: 'Outliers (Forensic Cases)',
        type: 'scatter',
        data: [
          [161.2, 51.6],
          [167.5, 59.0],
          [159.5, 49.2],
          [157.0, 63.0],
          [155.8, 53.6]
        ],
      },
      {
        id: 'inliers',
        name: 'Inliers (Regular Transaction)',
        type: 'scatter',
        data: [
          [172.7, 105.2],
          [153.4, 42]
        ]
      }
    ]
  }

  myChart.setOption(option);

<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

Echarts 在工具提示中显示附加信息

Echarts show additional info in tooltip

echarts