需求描述：

客戶爸爸在看某個(gè)echarts圖表時(shí)，圖標(biāo)的數(shù)據(jù)很多，字看著很小，客戶爸爸希望能雙擊放大某個(gè)圖表。如下面這個(gè)圖表字太小，太密。

image.png

解決方式：

網(wǎng)上有不少方式是用Echarts的tool工具先上自定義工具箱來實(shí)現(xiàn)，其實(shí)本質(zhì)上差不多。本文采用構(gòu)建兩個(gè)div，一個(gè)用來做遮罩層，一個(gè)用來放Echarts內(nèi)容。

步驟一：

在頁面上放置div

中間的省略，這里每人都不一樣，我的項(xiàng)目里有一個(gè)放大按鈕

放大

步驟二：

給這連個(gè)的div設(shè)置屬性,主要display默認(rèn)設(shè)置為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()函數(shù),函數(shù)很簡(jiǎn)單，先獲取原來的options參數(shù)，然后判斷fullScreenMask的狀態(tài)，做互斥操作。

myfullscreen = function dofull()

{

var options = rootchart.getOption();

setFullScreenToolBox(options);

}

//全屏顯示 toolbox回調(diào)

//@param option echarts的配置項(xiàng)

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;

}

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。