需求描述：
客户爸爸在看某个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;
}
