【问题标题】:How to format the tooltip value in echart (angular)如何在 echart 中格式化工具提示值(角度)
【发布时间】:2020-01-27 01:36:28
【问题描述】:

如何在echart中格式化tooltip?

这里是代码: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 ping

类别 2:20 Mbit/s

【问题讨论】:

    标签: javascript angular


    【解决方案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

    【讨论】:

    • 如何使其动态化?例如它应该使用循环
    • 尝试以上一个。不需要循环。根据您的悬停项目,参数将是动态的。
    猜你喜欢
    • 2019-09-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-06-17
    相关资源
    最近更新 更多