如何反转Apache Echarts中tooltip的顺序？

Question

我在我的Vue项目中使用Apache Ecahrt，而工具提示的顺序与图表中显示的数据相反，红色显示的数据应该在工具提示的顶部而不是底部：

任何人都可以帮助我吗？

Answer 1

从 echarts v5 开始，您可以将order选项传递给tooltip object 以更改 tooltip 项的顺序。

order接受这些值：seriesAsc、seriesDesc、valueAsc、valueDesc。 在这里阅读更多

在您的情况下，设置order: seriesDesc以反转顺序。

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {            
            type: 'shadow'        
        },
        order:'seriesDesc'
    },
    // rest of the options
 }

Answer 2

如果您使用的是 Apache Echart 5.0 及以上版本，Murli Prajapati 的解决方案可以轻松反转工具提示的顺序。 这是使用低于 5.0 版本的人的补充解决方案。

要自定义工具提示的顺序，可以将formatter选项传递给tooltip object，它支持字符串模板和回调 function。 在这里阅读更多。

在这种情况下，要反转tooltip的顺序，您可以：

   tooltip:{
      formatter: function (params) {
        var res = '';
        for (let i = (params.length-1); i >= 0; i--) {
          var data = '<p>' + params[i].name + '</p>';
          res += '<p class="padding:15px 0;">' + params[i].marker + params[i].seriesName + '<span style="font-weight:900;float:right;padding-left:15px;">' + params[i].value + '</span>' + '</p>';
        }
        return data + res;
      },
    //rest of the options
   }