[英]How to reverse the order of tooltip in Apache Echarts?
I'm using Apache Ecahrt in my Vue project, while the order of tooltip is reverse to the data shown in the chart, the data displayed in red supposed to be at the top rather than the bottom in the tooltip:我在我的Vue项目中使用Apache Ecahrt,而工具提示的顺序与图表中显示的数据相反,红色显示的数据应该在工具提示的顶部而不是底部:
Anyone can help me with this?任何人都可以帮助我吗?
Starting v5 of echarts, you can pass order
option to tooltip
object to change the ordering of tooltip items.从 echarts v5 开始,您可以将
order
选项传递给tooltip
object 以更改 tooltip 项的顺序。
order
accepts these values: seriesAsc, seriesDesc, valueAsc, valueDesc. order
接受这些值:seriesAsc、seriesDesc、valueAsc、valueDesc。 Read more here在这里阅读更多
In your case set order: seriesDesc
to reverse the order.在您的情况下,设置
order: seriesDesc
以反转顺序。
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
order:'seriesDesc'
},
// rest of the options
}
Murli Prajapati's solution can easily reverse the order of tooltip if you are using Apache Echart version 5.0 and above.如果您使用的是 Apache Echart 5.0 及以上版本,Murli Prajapati 的解决方案可以轻松反转工具提示的顺序。 Here's the complementary solution for people using a version lower than 5.0.
这是使用低于 5.0 版本的人的补充解决方案。
To custom the order of the tooltip, you can pass the formatter
option to tooltip
object, which supports string template and callback function.要自定义工具提示的顺序,可以将
formatter
选项传递给tooltip
object,它支持字符串模板和回调 function。 Read more here . 在这里阅读更多。
In this case, to reverse the order of tooltip
you can:在这种情况下,要反转
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
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.