当前位置: 首页 > Web前端 > HTML5

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

时间:2023-04-05 22:34:02 HTML5

最近在做echarts图表的时候,由于数据太多,导致tooptip被覆盖,显示不全。各种问题,记录下踩过的坑*设置tooltip的appendToBody:true,结果如图:更多的还是不完整;设置extraCssText没有起到很大的作用;最后使用formatter回调函数的方式拼写字符串,写内联样式。最重要的是设置一个最大高度,然后设置滚动以外的内容,包括设置backgroundColor和textStyle,最后解决问题,如图:设置最大高度,当高度设置为自动的,数据不多的时候滚动条上不会有焦点,附上代码tooltip:{trigger:'axis',axisPointer:{//坐标轴指示器,坐标轴触发validtype:'shadow'//的默认为直线,可选:'line'|'shadow'},enterable:true,//鼠标是否可以进入提示框浮层hideDelay:200,//浮层隐藏延迟confine:true,backgroundColor:'rgba(255,255,255,1)',formatter:function(params){varhtmlStr='

'+params[0].axisValue+'

';for(vari=0;i'+params[i].marker+params[i].seriesName+':'+参数[i].value+'

';}htmlStr+='
'returnhtmlStr},extraCssText:'box-shadow:003pxrgba(150,150,150,0.7);',textStyle:{fontSize:12,color:'#fff'}},图例:{type:'scroll',orient:'horizo??ntal',left:15,right:15,bottom:10,data:legendData,pageButtonPosition数据::'结束'},`就这样~~~