网站建设实施方案ppt,网站打开速度与服务器,南宁网站制作费用,wordpress简约HTML5最近接手一个同事之前做的网页#xff0c;发现里面使用echarts来绘制各类图表#xff1b;有2个问题一个是提示框显示不全#xff0c;另一个就是绘制总是有部分数据显示不全。后者就是div宽度问题。。。无语#xff0c;说下前面一个问题吧#xff0c;记录一下。
tooltip组…最近接手一个同事之前做的网页发现里面使用echarts来绘制各类图表有2个问题一个是提示框显示不全另一个就是绘制总是有部分数据显示不全。后者就是div宽度问题。。。无语说下前面一个问题吧记录一下。
tooltip组件介绍
一般都是直接用echarts的tooltip组件
tooltip: { show: true,//是否显示提示框 showContent: true, enterable: true,//鼠标是否可进入提示框浮层中默认为false如需详情内交互如添加链接按钮可设置为 true。 trigger: ‘item’,//可选饼图、散点图用item柱状图、折线图用axisnone什么都不触发 confine: true,//是否将 tooltip 框限制在图表的区域内。当图表外层的 dom 被设置为 ‘overflow: hidden’或者移动端窄屏导致 tooltip 超出外界被截断时此配置比较有用。 formatter: ‘{a}{b}:{c} {d}%’,//提示框浮层内容格式器支持字符串模板和回调函数两种形式。 textStyle: {//提示框内文字样式的设置 color:‘red’, //颜色 fontSize:‘18’ //字体大小 } },
问题现象 大概如上图提示框在边缘只显示了一半。
解决方案
开始想着去算什么位置之类的后来看文档发现其实挺简单的 设置tooltip的confine属性即可官网的介绍confine:是否将 tooltip 框限制在图表的区域内。 增加后大概这样 这下边缘的数据点的提示框显示就始终在canvas内了
