如何反转 Apache Echarts 中工具提示的顺序？

Question

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

谁能帮我解决这个问题？

Answer 1

从echarts v5开始，你可以将order选项传递给tooltip对象来改变tooltip项的排序。

order 接受这些值：seriesAsc、seriesDesc、valueAsc、valueDesc。阅读 more here

在您的情况下，设置 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对象，它支持字符串模板和回调函数。阅读 more here.

在这种情况下，要颠倒 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
   }

如何反转 Apache Echarts 中工具提示的顺序？

How to reverse the order of tooltip in Apache Echarts?

javascript

echarts