需求描述：

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

image.png

解決方式：

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

步驟一：
在頁(yè)面上放置div

        <div id="fullScreenMask">
              中間的省略，這里每人都不一樣，我的項(xiàng)目里有一個(gè)放大按鈕
            <a href="javascript:void(0)" onclick="myfullscreen()">放大</a>
            <div class="echarts" id="fullScreen"></div>
        </div>

步驟二：
給這連個(gè)的div設(shè)置屬性,主要display默認(rèn)設(shè)置為none，z-index為9999，最上層。

<style>
    #fullScreenMask {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: none;
        z-index:9999999;
        background-color: #ffffff;
    }

    #fullScreen {
        width: 80%;
        height: 80%;
    }
</style>

步驟三：
增加myfullscreen()函數(shù),函數(shù)很簡(jiǎn)單，先獲取原來(lái)的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;
    }