需求描述：

客户爸爸在看某个echarts图表时，图标的数据很多，字看着很小，客户爸爸希望能双击放大某个图表。如下面这个图表字太小，太密。

image.png

解决方式：

网上有不少方式是用Echarts的tool工具先上自定义工具箱来实现，其实本质上差不多。本文采用构建两个div，一个用来做遮罩层，一个用来放Echarts内容。

步骤一：
在页面上放置div

        <div id="fullScreenMask">
              中间的省略，这里每人都不一样，我的项目里有一个放大按钮
            <a href="javascript:void(0)" onclick="myfullscreen()">放大</a>
            <div class="echarts" id="fullScreen"></div>
        </div>

步骤二：
给这连个的div设置属性,主要display默认设置为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()函数,函数很简单，先获取原来的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;
    }