echarts绘制数据过多的图表,tooltip提示框样式自定义

时间:2020-7-29 作者:admin
  • 最近在做echarts图表的时候,由于数据过多,导致tooptip被遮盖,显示不全各种问题,记录一下踩过的坑*
  1. 设置tooltipappendToBody: true,结果如图:

echarts绘制数据过多的图表,tooltip提示框样式自定义


更多的还是显示不全;

  1. 设置extraCssText也没起多大作用;
  2. 最后采用了formatter回调函数的方式,自己拼写字符串,写行内样式,最主要的是设置一个最大高度,再设置内容超出滚动,包括设置backgroundColortextStyle,最终解决了问题,如图:

echarts绘制数据过多的图表,tooltip提示框样式自定义


echarts绘制数据过多的图表,tooltip提示框样式自定义

设置最大高度,而高度设置为自动时,数据不多的情况下就没有滚动条

重点来了,附上代码

tooltip: {
  trigger: 'axis',
  axisPointer: { // 坐标轴指示器,坐标轴触发有效
    type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
  },
  enterable: true, // 鼠标是否可进入提示框浮层中
  hideDelay: 200, // 浮层隐藏的延迟
  confine: true,
  backgroundColor: 'rgba(255,255,255, 1)',
  formatter: function (params) {
    var htmlStr = '<div style="height: auto;max-height: 240px;overflow-y: auto;"><p>' + params[0].axisValue + '</p>';
    for (var i = 0; i < params.length; i++) {
      htmlStr += '<p style="color: #666;">' + params[i].marker + params[i].seriesName + ':' + params[i].value + '</p>';
    }
    htmlStr += '</div>'
    return htmlStr
  },
  extraCssText: 'box-shadow: 0 0 3px rgba(150,150,150, 0.7);',
  textStyle: {
   fontSize: 12,
   color: '#fff'
  }
 },
 legend: {
   type: 'scroll',
   orient: 'horizontal',
   left: 15,
   right: 15,
   bottom: 10,
   data: legendData,
   pageButtonPosition: 'end'
},

`
就这样吧~~~

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。