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，您可以传递给它函数回调，在此向附加数据存储区发出请求以获取并在工具提示上显示必要的信息。

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

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>

图表在工具提示中显示其他信息

1 个答案: