首页 > 其他 > 详细

Echarts - tooltip属性自定义设置

时间:2021-04-20 09:03:15      阅读:38      评论:0      收藏:0      [点我收藏+]

最近在使用echarts插件绘制动态折线图时,发现当折线图的一个数值较高点紧挨着一个数值为零的点,图形会被拉扯,如图 

技术分享图片

网上查阅资料([https://blog.csdn.net/JsongNeu/article/details/89204002])可通过对data数组的值加0.01,然后在tooltip的显示值中减0.01 来进行处理。资料中没说怎么修改tooltip,因此到官网上找了个案例,尝试修改案例的tooltip。 原来的tooltip 

tooltip: { trigger: ‘axis‘ }

原来的显示框:

技术分享图片

修改后的tooltip:

tooltip: { 
  trigger: ‘axis‘,
  formatter: function (params, ticket, callback) {
    var showHtm="";
    showHtm = params[0].axisValue + ‘;
    for(i=0;i<params.length;i++){
      if(i % 2 == 0){
        if(params[i].value > 100){
         showHtm += params[i].marker + params[i].seriesName + ‘:‘ + params[i].value + ‘&nbsp‘ ;
        }else{
          showHtm += params[i].marker + params[i].seriesName + ‘:‘ + params[i].value + ‘&nbsp&nbsp ‘ ;
        }
      }else{ showHtm += params[i].marker + params[i].seriesName + ‘:‘ + params[i].value+ ‘‘;
      }
    }
    return showHtm;
  }
}

参数params[0].axisValue:获取对应x轴的值;

参数params[i].marker:在每个显示值前添加不同颜色的圆圈,区分每条折线;

参数params[i].seriesName:获取每条折线的名称;

参数params[i].value:获取每条折线的值;

修改后的显示框:

技术分享图片

Echarts - tooltip属性自定义设置

原文:https://www.cnblogs.com/rongzhen/p/14679321.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!