Echarts-如何编辑折线图的tooltip？

Question

我当时在做一个 eCharts 项目。在那里，我根据对象数组中的数据制作了一个折线图：

  data = [
    {
      des: 'pikachu',
      score: 75,
    },
    {
      des: 'jigglypuff',
      score: 80,
    },
    {
      des: 'balbasaur',
      score: 40,
    },
    {
      des: 'charizard',
      score: 70,
    },
    {
      des: 'snorlax',
      score: 60,
    },
    {
      des: 'meowto',
      score: 90,
    },
  ];

我得到了。在这里，我面临着一些我一直坚持的问题：

1. 如何编辑工具提示，即，当我将轴带到一个点时，标签显示索引（在本例中为 1）和值（为 23）。我想删除索引并只保留值并更改它旁边的项目符号的颜色。
2. 我如何控制号码。 yAxis 中的轴，即在 yAxis 上显示的值来自 0 to 70，我希望它类似于 0,50,100。 有人可以帮我吗？这是stackblitz representation

   我试过这个

        this.data.map((x) => {
         this.chartOptions = {
           xAxis: {
             type: 'category',
             show: false,
             axisPointer: {
               show: true,
               type: 'line',
             },
           },
           yAxis: {
             type: 'value',
             show: true,
           },
           tooltip: {
             show: true,
             axisPointer: {
               type: 'cross',
               label: {
                 formatter: function (x) {
                   return `<div>some data {x.des}</div>`;
                 },
               },
             },
           },
           series: [
             {
               data: lineData,
               type: 'line',
               lineStyle: {
                 color: '#1bc9b7',
               },
             },
           ],
         };
       });
   

   希望我能得到一些自定义输出，但它没有用。我考虑过使用 map() 并将 chartOptions 放入循环中，以便我可以将 des 附加到它的特定值。但这也没有成功。

Answer 1

要编辑工具提示，您可以使用工具提示标签选项的格式化程序属性。例如，您可以将其设置为返回具有所需格式的字符串的函数，例如：

tooltip: {
    formatter: function(params) {
        return `Score: ${params.value}`;
    }
}

要更改项目符号点的颜色，可以使用工具提示的标签选项的 itemStyle 属性，例如：

tooltip: {
    label: {
        itemStyle: {
            color: 'red'
        }
    }
}

要控制 yAxis 中的轴数，可以使用 yAxis 选项的 interval 属性，例如：

yAxis: {
    type: 'value',
    show: true,
    interval: 50
}

这将以 50（0、50、100 等）为增量显示轴值。

您设置图表选项的方式似乎存在一些问题。

而不是使用 this.data.map((x) => { 你应该使用数据数组来创建系列数据，而不是选项。

此外，您不需要在此处使用 map 方法，也不必将 chartOptions 放入循环中，因为您不想为每个数据点创建多个选项。

尝试这个 ：

this.chartOptions = {
    xAxis: {
        type: 'category',
        data: data.map(d => d.des)
    },
    yAxis: {
        type: 'value',
        show: true,
        interval: 50
    },
    tooltip: {
        formatter: function(params) {
            return `Score: ${params.value}`;
        },
        label: {
            itemStyle: {
                color: 'red'
            }
        }
    },
    series: [
        {
            data: data.map(d => d.score),
            type: 'line',
            lineStyle: {
                color: '#1bc9b7',
            },
        },
    ],
};