echarts 多组数据在同一坐标轴显示 toolTips 自定义

在使用echarts的时候会遇到多组数据,或是柱状图,或是折线图一起显示在一个坐标系中,这时候你会发现鼠标hover的时候只会显示一组数据,这时候就需要自定义,取出鼠标hover中的param。然后打印出来看看,发现里面包含了所有的数据,哎,那就好办了。特此记录下。不懂可以问,或者在线解答,博客太难写了:
tooltip: {
  trigger: 'axis',
  formatter:function (param) {
    let str = "";
    let dada = 0;
    for (let i=param.length-1; i>=0; i--){
      if (param[i].seriesName === '实测人数'){
        dada = param[i].data;
        param[i].marker = "<span style=\"display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:rgba(0,255,255,1);\"></span>";
      }
      if (param[i].seriesName === '完成率'){
        param[i].data = param[i].data+"%";
        param[i].marker = "<span style=\"display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#ffffff; border: 1px solid rgba(0,255,255,1);\"></span>";
      }
      if (param[i].seriesName === '未测人数'){
        param[i].data = param[i].data - dada
      }
      str = str + param[i].marker+param[i].seriesName+":"+param[i].data+'<br>';
    }
    return str
     },
  axisPointer: {
    type: 'cross',
    crossStyle: {
      color: '#999'
    }
  }
}
发布了41 篇原创文章 · 获赞 17 · 访问量 5万+

猜你喜欢

转载自blog.csdn.net/Mr_carry/article/details/103011356
今日推荐