echarts的工具箱並沒有提供放大/全屏的功能,

查找文檔發現可自定義工具https://www.echartsjs.com/option.html#toolbox.feature
show代碼
toolbox: { feature: { myFull: { show: true, title: '全屏查看', icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891', onclick: function (e){ var opts = e.getOption() opts.toolbox[0].feature.myFull.show=false //window.top表示最頂層iframe 如果在當頁面全屏打開 刪去window.top即可 window.top.layer.open({ title:false, type:1, content:'<div class="fullChart" style="height:100%;width:100%;padding:30px 0px"></div>", success:function(){ var fullchart = echarts.init(window.top.document.getElementById('fullChart')) fullchart.setOption(opts) } }) } } } }
思路:
1、在點擊自定義全屏后,插入一個dom外框,將已存在的echarts圖表dom復制並插入到外框,發現復制dom可能無法獲取echart實例對象,需要放大resize()無法進行,便放棄
2、插入一個dom全屏外框,獲取當前echart圖的option,在全屏內用option重新生成echart圖表,關閉時刪除dom結構即可
3、發現項目中有layer,於是獲取echart的option后,用layer打開一個彈窗,重新生成echart,由於iframe嵌套,所以將彈窗在最外層打開。


