如何反轉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
   }