<!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({width: '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({width: '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>
