欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

echarts tooltip自適應寬高讓提示框適應不同屏幕尺寸demo

 更新時間:2023年10月10日 10:39:38   作者:huyouooo  
這篇文章主要為大家介紹了echarts tooltip自適應寬高讓提示框適應不同屏幕尺寸,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

導讀

  • "定制化提示框樣式,讓你的數據更醒目"
  • "優(yōu)化提示框位置,讓信息一目了然"
  • "滾動條功能,輕松查看大量數據"
  • "個性化文字顏色,讓你的數據更加突出"
  • "自適應寬高,讓提示框適應不同屏幕尺寸"

demo 

tooltip: {
                trigger: "axis",
                backgroundColor: "#54AEEC", //設置背景圖片 rgba格式
                color: "#fff",
                height: "50px",
                padding: [15, 15],
                enterable: true,//滾動條
                extraCssText: "max-width:60%;max-height:83%; overflow: auto; ",//滾動條
                textStyle: {
                    color: "white", //設置文字顏色
                    padding: 10,
                    fontSize: 14
                },
                //改變提示框的位置 不超出屏幕顯示 
                position: function(point, params, dom, rect, size) {
                //其中point為當前鼠標的位置,
                //size中有兩個屬性:viewSize和contentSize,分別為外層div和tooltip提示框的大小
                // 鼠標坐標和提示框位置的參考坐標系是:以外層div的左上角那一點為原點,x軸向右,y軸向下
                    // 提示框位置
                    var x = 0; // x坐標位置
                    var y = 0; // y坐標位置
                    // 當前鼠標位置
                    var pointX = point[0];
                    var pointY = point[1];
                    // 提示框大小
                    var boxWidth = size.contentSize[0];
                    var boxHeight = size.contentSize[1];
                    // boxWidth > pointX 說明鼠標左邊放不下提示框
                    if (boxWidth > pointX) {
                        x = 5;
                    } else {
                        // 左邊放的下
                        x = pointX - boxWidth;
                    }
                    // boxHeight > pointY 說明鼠標上邊放不下提示框
                    if (boxHeight > pointY) {
                        y = 5;
                    } else {
                        // 上邊放得下
                        y = pointY - boxHeight;
                    }
                    return [x, y];
                }
            },

以上就是echarts tooltip自適應寬高讓提示框適應不同屏幕尺寸demo的詳細內容,更多關于echarts tooltip自適應寬高的資料請關注腳本之家其它相關文章!

相關文章

最新評論