<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Resizable - Default functionality</title> <link rel="stylesheet" href="jquery-ui.css"> <script src='mapbox-gl.js'></script> <link href='mapbox-gl.css' rel='stylesheet' /> <style> #dd { width: 50px; height: 50px; padding: 0.5em; left:0px;top:70px;position:absolute; border: 1px solid #000000; background: #ffffff; color: #333333; } .my_style { width: 50px; height: 50px; padding: 0.5em; left:0px;top:70px;position:absolute; border: 1px solid #000000; background: #ffffff; color: #333333; } .my_style1 { width: 50px; height: 50px; padding: 0.5em; left:0px;top:0px;position:absolute; border: 1px solid #000000; background: #ffffff; color: #333333; } .map_ditu { position:absolute; top:0; bottom:0; width:100%;z-index:-1; } .inner_bb { height:100%;width:100%; } #dd h3 { text-align: center; margin: 0; } </style> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script> <script> var chart_obj = {} $( function() { $( "#ditu" ).draggable(); $("#ditu").mousedown(function(){ if ($("#map").length>0){ }else{ $('body').append("<div id='map' class='map_ditu'></div>") mapboxgl.accessToken = 'pk.eyJ1Ijoia3JvbmljayIsImEiOiJjaWxyZGZwcHQwOHRidWxrbnd0OTB0cDBzIn0.u2R3NY5PnevWH3cHRk6TWQ'; var map = new mapboxgl.Map({ container: 'map', style: 'https://raw.githubusercontent.com/osm2vectortiles/mapbox-gl-styles/master/styles/bright-v9-cdn.json', center: [-122.4340, 37.7353], zoom: 5.55, pitch: 60, heading: 41, hash: true }); } }) $("#ditu").mouseup(function(){ $(this).animate({left:'0px',top:'0px'}) }) var div_id_num = 1; function create_div(){ var tmp_id = 'id_'+ div_id_num; var inner_bb = 'bb_'+ div_id_num; div_id_num = div_id_num + 1; $('body').append("<div id='"+tmp_id+"' class='my_style'><div id='"+inner_bb+"' class='inner_bb'>报表</div></div>"); var new_div = $("#"+tmp_id); new_div.draggable(); new_div.resizable(); new_div.mousedown(function(){ var top = $(this).position().top; var left = $(this).position().left; if (top== 70 && left == 0){ $(this).animate({ '300px',height:'250px'},function(){ var dom = document.getElementById($("#"+inner_bb).attr('id')); var myChart = echarts.init(dom); var app = {}; option = null; option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line' }] }; if (option && typeof option === "object") { myChart.setOption(option, true); chart_obj[inner_bb] = myChart } }) create_div(div_id_num) } }) $("#"+tmp_id).mouseup(function(){ chart_obj[inner_bb].resize(); }) } var id_num = 2; var flag_first = true; $( "#dd" ).draggable(); $( "#dd" ).resizable(); $("#dd").mousedown(function(){ var top = $(this).position().top; var left = $(this).position().left; if (top== 70 && left == 0){ $(this).animate({ '300px',height:'250px'},function(){ var dom = document.getElementById("dd_bb"); var myChart = echarts.init(dom); var app = {}; option = null; option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line' }] }; ; if (option && typeof option === "object") { myChart.setOption(option, true); chart_obj["dd"] = myChart } }) create_div(); } }) $("#dd").mouseup(function(){ chart_obj["dd"].resize(); }) } ); </script> </head> <body> <div id="ditu" class="my_style1"> 底图 </div> <div id="dd" class="ui-widget-content"> <div id='dd_bb' class="inner_bb">报表</div> </div> </body> </html>