echarts中tooltip提示框位置控制
阿新 • • 發佈:2018-11-09
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