需求描述：

客戶爸爸在看某個echarts圖表時，圖標的數據很多，字看著很小，客戶爸爸希望能雙擊放大某個圖表。如下面這個圖表字太小，太密。

image.png

解決方式：

網上有不少方式是用Echarts的tool工具先上自定義工具箱來實現，其實本質上差不多。本文采用構建兩個div，一個用來做遮罩層，一個用來放Echarts內容。

步驟一：

在頁面上放置div

中間的省略，這里每人都不一樣，我的項目里有一個放大按鈕

放大

步驟二：

給這連個的div設置屬性,主要display默認設置為none，z-index為9999，最上層。

#fullScreenMask {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

display: none;

z-index:9999999;

background-color: #ffffff;

}

#fullScreen {

width: 80%;

height: 80%;

}

步驟三：

增加myfullscreen()函數,函數很簡單，先獲取原來的options參數，然后判斷fullScreenMask的狀態，做互斥操作。

myfullscreen = function dofull()

{

var options = rootchart.getOption();

setFullScreenToolBox(options);

}

//全屏顯示 toolbox回調

//@param option echarts的配置項

function setFullScreenToolBox(option) {

if ($('#fullScreenMask').css('display') === 'block') {

$('#fullScreenMask').hide();

ChartScreen = null;

return false;

}

$('#fullScreenMask').show();

chartScreen = echarts.init(document.getElementById('fullScreen'));

chartScreen.setOption(option);

return true;

}

總結

以上是生活随笔為你收集整理的echarts 弹出放大_Echarts图标增加全屏/放大功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。