Echarts实战案例代码(50):tooltip组件提示框被div折叠的解决方案

简介: Echarts实战案例代码(50):tooltip组件提示框被div折叠的解决方案
  1. 设置跟随鼠标位置参数
        tooltip: {
            trigger: 'axis',
               //设置其显示位置 其中p为当前鼠标的位置
            position: function (p) {
                return [p[0] - 40, p[1] - 300];
            }
        },


2.confine属性

        tooltip: {
            trigger: 'axis',
            confine:true,//是否将 tooltip 框限制在图表的区域内,当图表外层的 dom 被设置为 'overflow: hidden',或者移动端窄屏,导致 tooltip 超出外界被截断时,此配置比较有用。
            }
        },


3.设置所在容器的显示层级

.rim2 {
    position: relative;
    background: url("../images/boder_bg2.png");
    background-size: 100% 100%;
    padding: 10px;
    margin-bottom: 15px;
    z-index: 99;//提高层级
}


4.tooltips换行显示

在这里插入代码片


Done !

相关文章
|
3月前
|
前端开发 JavaScript BI
Django教程第5章 | Web开发实战-数据统计图表(echarts、highchart)
使用echarts和highcharts图表库实现折线图、柱状图、饼图和数据集图
64 2
|
6月前
ECharts 提示框组件Tooltip属性大全(包含文本注释)
ECharts 提示框组件Tooltip属性大全(包含文本注释)
195 0
|
2月前
|
前端开发 JavaScript Apache
web前端-Echarts-5.3安装配置和案例
web前端-Echarts-5.3安装配置和案例
|
4月前
|
数据可视化
Echarts5.3.2可视化案例-时间轴动态柱形图
Echarts5.3.2可视化案例-时间轴动态柱形图
|
5月前
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
|
5月前
|
前端开发 JavaScript
React中封装echarts图表组件以及自适应窗口变化
React中封装echarts图表组件以及自适应窗口变化
70 1
|
5月前
Echarts tooltip配置项的属性 图表悬浮框
Echarts tooltip配置项的属性 图表悬浮框
|
6月前
|
JSON 小程序 前端开发
小程序Echarts图表组件使用
小程序Echarts图表组件使用
54 0
|
6月前
Echarts自定义tooltip显示内容(隐藏小圆点)
Echarts自定义tooltip显示内容(隐藏小圆点)
103 0
|
6月前
ECharts分段型视觉映射组件的属性修改
ECharts分段型视觉映射组件的属性修改
32 0