javascript - 如何在 echart 中格式化工具提示值（角度）

Question

如何格式化echart中的工具提示？

这是代码：https ://stackblitz.com/edit/angular-ngx-echarts-ty4mlq?file=src/app/app.component.ts

const xAxisData = [];
const data1 = [];
const data2 = [];
const data3 = [];
const data4 = [];

for (let i = 0; i < 5; i++) {
  xAxisData.push('category' + i);
  data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
  data2.push((Math.cos(i / 5) * (i / 5 - 1) + i / 6) * 5);
  data3.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5);
  data4.push((Math.sin(i / 5) * (i / 5 - 1) + i / 6) * 5);
}

this.options = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    }
  },
  legend: {
    data: ['Category 1', 'Category 2']
  },
  xAxis: {
    data: xAxisData
  },
  yAxis: {},
  series: [
    {
      name: 'Category 1',
      type: 'line',
      barCategoryGap: '0%',
      data: data1
    },
    {
      name: 'Category 1',
      type: 'line',
      barCategoryGap: '0%',
      data: data2
    },
    {
      name: 'Category 2',
      type: 'line',
      barCategoryGap: '0%',
      data: data3
    },
    {
      name: 'Category 2',
      type: 'line',
      barCategoryGap: '0%',
      data: data4
    }
  ]
};

输出：在此处输入图像描述

预期的输出应该是这样的。

类别0

类别 1：0 平

类别 1：10 Mbit/s

类别 2：10 平

类别 2：20 Mbit/s

标签： javascriptangular

Answer 1

要格式化您的工具提示，请使用以下代码。我已经根据你给出的输出做到了。

tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
    formatter: (params) => {
        return params[0].name + "<br>" +
            params[0].seriesName + ": " + params[0].data.toFixed(2) + " ping <br>" + 
            params[1].seriesName + ": " + params[1].data.toFixed(2) + " Mbit/s <br>" + 
            params[2].seriesName + ": " + params[2].data.toFixed(2) + " ping <br>" + 
            params[3].seriesName + ": " + params[3].data.toFixed(2) + " Mbit/s <br>" 
  }

堆栈闪电战： https ://stackblitz.com/edit/angular-ngx-echarts-6t4ghz