1. 程式人生 > >echarts中tooltip提示框位置控制

echarts中tooltip提示框位置控制

option = {
    title: {
        text: '折線圖堆疊'
    },
    tooltip: {
        trigger: 'axis',
        position: function(point, params, dom, rect, size){
        //其中point為當前滑鼠的位置,size中有兩個屬性:viewSize和contentSize,分別為外層div和tooltip提示框的大小
        var x = point[0];//
        var y = point[1];
        
var viewWidth = size.viewSize[0]; var viewHeight = size.viewSize[1]; var boxWidth = size.contentSize[0]; var boxHeight = size.contentSize[1]; var posX = 0;//x座標位置 var posY = 0;//y座標位置 if(x<boxWidth){//左邊放不開 posX = 5; }
else{//左邊放的下 posX = x-boxWidth; } if(y<boxHeight){//上邊放不開 posY = 5; }else{//上邊放得下 posY = y-boxHeight; } return [posX,posY]; } }, legend: { data:['郵件營銷','聯盟廣告','視訊廣告','直接訪問','搜尋引擎'] }, grid: { left:
'3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: ['週一','週二','週三','週四','週五','週六','週日'] }, yAxis: { type: 'value' }, series: [ { name:'郵件營銷', type:'line', stack: '總量', data:[120, 132, 101, 134, 90, 230, 210] }, { name:'聯盟廣告', type:'line', stack: '總量', data:[220, 182, 191, 234, 290, 330, 310] }, { name:'視訊廣告', type:'line', stack: '總量', data:[150, 232, 201, 154, 190, 330, 410] }, { name:'直接訪問', type:'line', stack: '總量', data:[320, 332, 301, 334, 390, 330, 320] }, { name:'搜尋引擎', type:'line', stack: '總量', data:[820, 932, 901, 934, 1290, 1330, 1320] } ] };

 

 

如果這篇文章對您有幫助,您可以打賞我

 

技術交流QQ群:15129679