Expand是ArcGIS JavaScript API 4.3推出的一个widget（控件），用于承载一个HTML DOM元素，可以把一个自己编写的div或者是一个其他的Esri widget控件放到Expand里面。Expand在地图上显示为一个小方块按钮，点击可以展开或关闭它所承载的内容。关于Expand控件的详细内容，请查看：https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Expand.html。
下面将一个表单div和一个echarts图表放到Expand中。
一、代码框架
框架中包括HTML的基本语句、在线API的引入、切片图层的创建并添加到Map对象中等，详细内容请查看：[ArcGIS API for JavaScript 4.8] Sample Code-Get Started-MapView,SceneView简介、ArcGIS JavaScript API4.8 底图选择的几种方案。
<html>
<head>
<meta charset="utf-8">
<!-- 移动端优化 -->
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>将展示内容（div、iframe）放在Expand控件中</title> <!-- JS API 引入 -->
<link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
<script src="https://js.arcgis.com/4.8/"></script> <!-- 设置样式 -->
<style>
html,body,#viewDiv{
margin:0;
padding:0;
height:100%;
width:100%;
}
</style> <!-- JS API 调用代码 -->
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/TileLayer", "dojo/domReady!"],function(Map,MapView,TileLayer){
var mapTileLayer=new TileLayer({
url:"https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer"
});
var map=new Map({
layers:[mapTileLayer]
}); var view=new MapView({
container:"viewDiv",
map:map,
center:[118.79647, 32.05838], //南京城区
zoom:10
});
});
</script>
</head> <body>
<div id="viewDiv"></div>
</body>
</html>
二、创建一个表单div并放到Expand中
为了更好看的样式，引入Bootstrap框架，要注意Bootstrap的引入要放在JS API引入之前，否则会出现multipleDefine的错误。这里使用Bootstrap在线CDN，也可以下载到本地引用。这里有个小提示，在编写HTML代码时，复制href=".."或src=".."中的网址并在浏览器中打开（如果可以，或在编辑器中双击直接打开），如果浏览器出现所引用文件的代码，则说明网址没有错误，否则要检查网址是不是有错误。
<!-- 在JS API引入之前 引入 Bootstrap -->
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
在<body>标签内进行表单div的编写。将这个div放在承载地图的viewDiv的后面（后面会有解释）。关于使用Bootstrap框架编写表单的详细内容，请查看：使用Bootstrap框架写一个注册\登录界面。
<!-- 表单div -->
<div id="div1">
<h3>这是一个表单</h3>
<form>
<div class="form-group">
<label for="name">景点名称：</label>
<input type="text" class="form-control" id="name" autocomplete="off">
</div>
<div class="form-group">
<label for="date">游玩日期：</label>
<input type="text" class="form-control" id="date" autocomplete="off">
</div>
<div class="form-group">
<label for="money">花费：</label>
<input type="text" class="form-control" id="money" autocomplete="off">
</div>
<div class="form-group">
<label for="company">同行：</label>
<input type="text" class="form-control" id="company" autocomplete="off">
</div>
<div class="form-group">
<label for="feeling">感受：</label>
<textarea class="form-control" rows="5" id="feeling"></textarea>
<input type="button" class="btn btn-info" value="一个button" id="btnLight">
</div>
</form>
</div>
保存后打开网页，发现右侧多了一个竖直滚动条。下拉看到刚才编写的表单放在了承载地图的viewDiv的下面。如果编写表单的代码放在了<div id="viewDiv"></div>的前面，那页面上方是表单，下方是地图。虽然这个表单div是要放在Expand控件中的，但是页面在加载地图时会有等待时间，往往HTML DOM元素先于Expand控件加载出来。所以将表单div放到地图下方，当Expand控件还没有加载出来时，页面不会突兀地出现一个表单。
下面编写Expand控件，并将这个表单放到Expand中。Expand的构造函数中，view表示Expand所贴附的那个视图；content是承载的HTML DOM元素或API提供的widget（控件），其值是DOM元素的ID值或控件的变量名；expandIconClass是Expand按钮的符号，其值是一个表示符号的字符串，可以在这里选择自己喜欢的符号：https://developers.arcgis.com/javascript/latest/guide/esri-icon-font/index.html；expandTooltip设置鼠标在Expand控件上悬停时显示的提示信息；expanded设置Expand在加载完成后是打开状态还是折叠状态，缺省为折叠状态。
<!-- JS API 调用代码 -->
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/TileLayer", "esri/widgets/Expand", "dojo/domReady!"],function(Map,MapView,TileLayer,Expand){
var mapTileLayer=new TileLayer({
url:"https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer"
});
var map=new Map({
layers:[mapTileLayer]
}); var view=new MapView({
container:"viewDiv",
map:map,
center:[118.79647, 32.05838], //南京城区
zoom:10
}); //Expand承载表单div
var div1Expand=new Expand({
view:view,
content:div1,
expandIconClass:"esri-icon-edit", //Expand按钮符号
expandTooltipe:"一个表单", //鼠标悬停时显示的提示
expanded:false, //默认折叠（缺省）
});
view.ui.add(div1Expand,"top-left");
});
</script>
为表单div设置宽度，使其更好看些。可以在<div>标签中添加style属性，也可以在<head>头标签中设置<style></style>css样式。
<!-- 表单div -->
<div id="div1" style="width:200px;">
<h3>这是一个表单</h3>
<form>
<div class="form-group">
<label for="name">景点名称：</label>
<input type="text" class="form-control" id="name" autocomplete="off">
</div>
<div class="form-group">
<label for="date">游玩日期：</label>
<input type="text" class="form-control" id="date" autocomplete="off">
</div>
<div class="form-group">
<label for="money">花费：</label>
<input type="text" class="form-control" id="money" autocomplete="off">
</div>
<div class="form-group">
<label for="company">同行：</label>
<input type="text" class="form-control" id="company" autocomplete="off">
</div>
<div class="form-group">
<label for="feeling">感受：</label>
<textarea class="form-control" rows="5" id="feeling"></textarea>
<input type="button" class="btn btn-info" value="一个button" id="btnLight">
</div>
</form>
</div>
三、创建一个echarts图表并放到Expand中
echarts是百度公司开发的JavaScript开源可视化库，提供丰富的图表制作功能，具体请查看：http://echarts.baidu.com/。echarts没有在线的CDN，我们在官网下载后将echarts.js文件拷贝在当前目录下。在<head>中引用echarts.js。与引入Bootstrap情况相同，在引入echarts.js时，要先于JS API引入，否则会出现multipleDefine的错误。
<!-- 在JS API引入之前 引入 echarts -->
<script src="echarts.js"></script>
在表单div后编写一个echarts图表div，这里不对echarts代码进行解释了。
<!-- echarts图表div -->
<div id="div2" style="width:600px;height:370px;">
<script>
var myChart = echarts.init(document.getElementById('div2'));
option = {
title: {
text: '06-16 ~ 07-16 9:30am 各景区月平均人数',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
x: 'center',
y: 'bottom',
data: ['夫子庙', '中山陵', '雨花台', '总统府', '玄武湖', '红山森林动物园', '侵华日军南京大*遇难同胞纪念馆']
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: {
show: false,
type: ['pie', 'funnel']
},
restore: { show: false },
saveAsImage: { show: false }
}
},
calculable: true,
series: [
{
// name:'面积模式',
type: 'pie',
radius: [40, 150],
center: ['50%', '50%'],
roseType: 'area',
data: [
{ value: 10062, name: '夫子庙' },
{ value: 4076, name: '中山陵' },
{ value: 2362, name: '雨花台' },
{ value: 230, name: '总统府' },
{ value: 837, name: '玄武湖' },
{ value: 396, name: '红山森林动物园' },
{ value: 82, name: '侵华日军南京大*遇难同胞纪念馆' },
]
}
]
};
myChart.setOption(option);
</script>
</div>
编写Expand代码，将echarts图表放到Expand控件中。
为了更好的表现效果，更换echarts图表div的背景颜色，设置成0.8不透明度的白色。
<!-- echarts图表div -->
<div id="div2" style="width:600px;height:370px;background-color:rgba(255,255,255,0.8);">
<script>
var myChart = echarts.init(document.getElementById('div2'));
option = {
title: {
text: '06-16 ~ 07-16 9:30am 各景区月平均人数',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
x: 'center',
y: 'bottom',
data: ['夫子庙', '中山陵', '雨花台', '总统府', '玄武湖', '红山森林动物园', '侵华日军南京大*遇难同胞纪念馆']
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: {
show: false,
type: ['pie', 'funnel']
},
restore: { show: false },
saveAsImage: { show: false }
}
},
calculable: true,
series: [
{
// name:'面积模式',
type: 'pie',
radius: [40, 150],
center: ['50%', '50%'],
roseType: 'area',
data: [
{ value: 10062, name: '夫子庙' },
{ value: 4076, name: '中山陵' },
{ value: 2362, name: '雨花台' },
{ value: 230, name: '总统府' },
{ value: 837, name: '玄武湖' },
{ value: 396, name: '红山森林动物园' },
{ value: 82, name: '侵华日军南京大*遇难同胞纪念馆' },
]
}
]
};
myChart.setOption(option);
</script>
</div>
修改div背景颜色
这里也可以修改div的宽高，在Expand中会有相应改变。
<!-- echarts图表div -->
<div id="div2" style="width:1000px;height:600px;background-color:rgba(255,255,255,0.8);">
<script>
var myChart = echarts.init(document.getElementById('div2'));
option = {
title: {
text: '06-16 ~ 07-16 9:30am 各景区月平均人数',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
x: 'center',
y: 'bottom',
data: ['夫子庙', '中山陵', '雨花台', '总统府', '玄武湖', '红山森林动物园', '侵华日军南京大*遇难同胞纪念馆']
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: {
show: false,
type: ['pie', 'funnel']
},
restore: { show: false },
saveAsImage: { show: false }
}
},
calculable: true,
series: [
{
// name:'面积模式',
type: 'pie',
radius: [40, 150],
center: ['50%', '50%'],
roseType: 'area',
data: [
{ value: 10062, name: '夫子庙' },
{ value: 4076, name: '中山陵' },
{ value: 2362, name: '雨花台' },
{ value: 230, name: '总统府' },
{ value: 837, name: '玄武湖' },
{ value: 396, name: '红山森林动物园' },
{ value: 82, name: '侵华日军南京大*遇难同胞纪念馆' },
]
}
]
};
myChart.setOption(option);
</script>
</div>
修改div宽高
四、将表单div和echarts图表div放到一个新的HTML页面中，并通过Iframe引用并放到Expand控件中
通过以上步骤，我们已经实现了将一个表单div和一个echarts图表div放到Expand控件中，但这么做，在当前HTML页面（我们称之为主页面）的<head>标签内引入了很多外部的css和js文件，<body>标签内也写了很多内容，显得有些冗余了。
我们可以将div放到一个新的HTML页面，并通过<iframe>标签引用这个HTML页面并放到Expand控件中。这样，很多内容就从主页面迁移到了新的HTML页面。下面编写一个新的HTML页面iframe_div1.html，盛放表单div。这是一个新的HTML页面，所以不需要的引用文件就可以不引入了，比如JS API。同时，主页面中用不到的css或js外部文件引用也可以删掉了。（如果在主页面的<body>标签内添加了一个<iframe>，而<iframe>引入的HTML页面中要用到某些css或js文件，应该在那个新的HTML页面中引入文件，而不是在主页面中）。下面是iframe_div2.html的代码：
<html>
<head>
<meta charset="utf-8">
<title></title> <!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head> <body>
<!-- 表单div -->
<div id="div1" style="width:200px;background-color:rgba(255,255,255,0.8);">
<h3>这是一个表单</h3>
<form>
<div class="form-group">
<label for="name">景点名称：</label>
<input type="text" class="form-control" id="name" autocomplete="off">
</div>
<div class="form-group">
<label for="date">游玩日期：</label>
<input type="text" class="form-control" id="date" autocomplete="off">
</div>
<div class="form-group">
<label for="money">花费：</label>
<input type="text" class="form-control" id="money" autocomplete="off">
</div>
<div class="form-group">
<label for="company">同行：</label>
<input type="text" class="form-control" id="company" autocomplete="off">
</div>
<div class="form-group">
<label for="feeling">感受：</label>
<textarea class="form-control" rows="5" id="feeling"></textarea>
<input type="button" class="btn btn-info" value="一个button" id="btnLight">
</div>
</form>
</div>
</body>
</html>
更新主页面中代码，删除关于表单div的代码（因为已经移到了iframe_div1.html这里），并添加<iframe>标签以引用iframe_div1.html，同时更改Expand控件的构造函数，将content的值更换为iframe的ID值。
//Expand承载表单div
var div1Expand=new Expand({
view:view,
content:iframe_div1,
expandIconClass:"esri-icon-edit", //Expand按钮符号
expandTooltipe:"一个表单", //鼠标悬停时显示的提示
expanded:false, //默认折叠（缺省）
});
view.ui.add(div1Expand,"top-left");
<!-- 表单div -->
<iframe src="iframe_div1.html" id="iframe_div1"></iframe>
虽然之前为表单div1设置过了样式，但这里因为div1放到了iframe_div1.html中，主页面中通过<iframe>标签引用了iframe_div1.html，所以在Expand控件中显示的是iframe_div1.html而不是div1！（虽然div1放到了iframe_div1.html中..）这么说想表达的是，为div1设置样式与为iframe_div1设置样式是不同的。为div1设置样式是iframe_div1中具体内容的样式（因为iframe_div1的内容就是div1），而为iframe_div1设置样式是为了其在Expand控件中的表现形式。（iframe_div1是<iframe>元素的ID值，这个元素引用了iframe_div1.html）
为iframe_div1设置宽高，反复调试，设置最合适的宽高值。frameborder设置iframe是否显示边框，值为"0"不显示，值为"1"显示。
<!-- 表单div -->
<iframe src="iframe_div1.html" id="iframe_div1" frameborder="0" style="width:210px;height:610px;"></iframe>
虽然之前设置了div1的背景颜色，但那是对于div来说的，在iframe_div1.html这个页面中，div1的背景颜色是不透明度0.8的白色。但这并不意味着iframe_div1放到控件中，它的背景色也是这样。需要设置iframe_div1的属性。
<!-- 表单div -->
<iframe src="iframe_div1.html" id="iframe_div1" frameborder="0" style="width:210px;height:610px;background-color:rgba(255,255,255,0.8);"></iframe>
可是运行结果显示，Expand控件中iframe的背景颜色并没有变..（没有解决，不知道是什么问题。希望如果读者看到这里，可以自己尝试解决问题，并告诉我问题出在哪里）
同样地，新建HTML页面iframe_div2.html，将echarts图表div的内容放到iframe_div2.html中。下面是iframe_div2.html的代码：
<html>
<head>
<meta charset="utf-8">
<title></title> <!-- 在JS API引入之前 引入 echarts -->
<script src="echarts.js"></script>
</head> <body>
<!-- echarts图表div -->
<div id="div2" style="width:600px;height:370px;background-color:rgba(255,255,255,0.8);">
<script>
var myChart = echarts.init(document.getElementById('div2'));
option = {
title: {
text: '06-16 ~ 07-16 9:30am 各景区月平均人数',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
x: 'center',
y: 'bottom',
data: ['夫子庙', '中山陵', '雨花台', '总统府', '玄武湖', '红山森林动物园', '侵华日军南京大*遇难同胞纪念馆']
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: {
show: false,
type: ['pie', 'funnel']
},
restore: { show: false },
saveAsImage: { show: false }
}
},
calculable: true,
series: [
{
// name:'面积模式',
type: 'pie',
radius: [40, 150],
center: ['50%', '50%'],
roseType: 'area',
data: [
{ value: 10062, name: '夫子庙' },
{ value: 4076, name: '中山陵' },
{ value: 2362, name: '雨花台' },
{ value: 230, name: '总统府' },
{ value: 837, name: '玄武湖' },
{ value: 396, name: '红山森林动物园' },
{ value: 82, name: '侵华日军南京大*遇难同胞纪念馆' },
]
}
]
};
myChart.setOption(option);
</script>
</div>
</body>
</html>
修改主页面代码。更改Expand构造函数中content属性值，为iframe设置宽高及背景颜色（背景颜色依然未更改）。
虽然背景颜色不是想象中的0.8不透明度的白色，但我发现了一些“猫腻”。
将iframe_div2的宽高都增大100px，看得更清楚。
<!-- echarts图表div -->
<iframe src="iframe_div2.html" id="iframe_div2" frameborder="0" style="width:750px;height:500px;background-color:rgba(255,255,255,0.8);"></iframe>
图中iframe_div2的背景颜色确实更改了，只是div2本身也带有背景颜色，两者叠加就变得不那么透明了。在iframe_div2.html中，将div2的背景颜色去掉。iframe_div2变成了我们想要的背景颜色。
但是这种解决方法对iframe_div1不管用..
五、使用div放到Expand中和使用iframe放到Expand中的区别与联系
两种方法都可以实现将想要展示的内容放到API Expand控件中。但div是写在主页面中的，这意味着主页面要引入很多外部的css和js文件，<body>标签内也要写很多内容；而iframe方案是把div放到了一个新的HTML页面里，在主页面中只是创建了一个<iframe>标签，这个标签内包含新页面的引用。从下面的控制台信息中可以看到，<iframe>标签引用的两个HTML文件，其实是作为Sources（资源）引入到主页面的。所以，如果Expand控件中要展示的内容很少，用div写在主页面中就好了；如果展示的内容挺多，那就放到新的HTML页面中，再用<iframe>标签引用这个页面，这样结构更清晰些。
同时，这两种方法都存在一个共同的问题，就是地图和div同时加载的问题。注意下图右侧的滚动条，上方是还未加载出来的地图div（其实是我把网络关上了，正常情况下，滚动条是一闪而过的，地图可以很快加载出来并将两个div放到Expand控件中），而下方的表单div和echarts图表div已经加载出来了（或两个iframe），这样就很尴尬..。可以设置div的display属性为none以暂时解决这个问题。可是当div放到Expand控件后，display值依然是none，怎么改变display的值又是一个问题。（未解决这个问题）
六、总结
全部代码：
<html>
<head>
<meta charset="utf-8">
<!-- 移动端优化 -->
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>将展示内容（div、iframe）放在Expand控件中</title> <!-- JS API 引入 -->
<link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
<script src="https://js.arcgis.com/4.8/"></script> <!-- 设置样式 -->
<style>
html,body,#viewDiv{
margin:0;
padding:0;
height:100%;
width:100%;
}
</style> <!-- JS API 调用代码 -->
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/TileLayer", "esri/widgets/Expand", "dojo/domReady!"],function(Map,MapView,TileLayer,Expand){
var mapTileLayer=new TileLayer({
url:"https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer"
});
var map=new Map({
layers:[mapTileLayer]
}); var view=new MapView({
container:"viewDiv",
map:map,
center:[118.79647, 32.05838], //南京城区
zoom:10
}); //Expand承载表单div
var div1Expand=new Expand({
view:view,
content:iframe_div1,
expandIconClass:"esri-icon-edit", //Expand按钮符号
expandTooltipe:"一个表单", //鼠标悬停时显示的提示
expanded:false, //默认折叠（缺省）
});
view.ui.add(div1Expand,"top-left"); //Expand承载echarts图表div
var div2Expand=new Expand({
view:view,
content:iframe_div2,
expandIconClass:"esri-icon-pie-chart", //Expand按钮符号
expandTooltipe:"一个echarts图表", //鼠标悬停时显示的提示
expanded:false, //默认折叠（缺省）
});
view.ui.add(div2Expand,"top-left");
});
</script>
</head> <body>
<div id="viewDiv"></div> <!-- 表单div -->
<iframe src="iframe_div1.html" id="iframe_div1" frameborder="0" style="width:210px;height:610px;background-color:rgba(255,255,255,0.8);"></iframe> <!-- echarts图表div -->
<iframe src="iframe_div2.html" id="iframe_div2" frameborder="0" style="width:650px;height:400px;background-color:rgba(255,255,255,0.8);"></iframe>
</body>
</html>
主页面
<html>
<head>
<meta charset="utf-8">
<title></title> <!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head> <body>
<!-- 表单div -->
<div id="div1" style="width:200px;">
<h3>这是一个表单</h3>
<form>
<div class="form-group">
<label for="name">景点名称：</label>
<input type="text" class="form-control" id="name" autocomplete="off">
</div>
<div class="form-group">
<label for="date">游玩日期：</label>
<input type="text" class="form-control" id="date" autocomplete="off">
</div>
<div class="form-group">
<label for="money">花费：</label>
<input type="text" class="form-control" id="money" autocomplete="off">
</div>
<div class="form-group">
<label for="company">同行：</label>
<input type="text" class="form-control" id="company" autocomplete="off">
</div>
<div class="form-group">
<label for="feeling">感受：</label>
<textarea class="form-control" rows="5" id="feeling"></textarea>
<input type="button" class="btn btn-info" value="一个button" id="btnLight">
</div>
</form>
</div>
</body>
</html>
iframe_div1.html
<html>
<head>
<meta charset="utf-8">
<title></title> <!-- 在JS API引入之前 引入 echarts -->
<script src="echarts.js"></script>
</head> <body>
<!-- echarts图表div -->
<div id="div2" style="width:600px;height:370px;">
<script>
var myChart = echarts.init(document.getElementById('div2'));
option = {
title: {
text: '06-16 ~ 07-16 9:30am 各景区月平均人数',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
x: 'center',
y: 'bottom',
data: ['夫子庙', '中山陵', '雨花台', '总统府', '玄武湖', '红山森林动物园', '侵华日军南京大*遇难同胞纪念馆']
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: {
show: false,
type: ['pie', 'funnel']
},
restore: { show: false },
saveAsImage: { show: false }
}
},
calculable: true,
series: [
{
// name:'面积模式',
type: 'pie',
radius: [40, 150],
center: ['50%', '50%'],
roseType: 'area',
data: [
{ value: 10062, name: '夫子庙' },
{ value: 4076, name: '中山陵' },
{ value: 2362, name: '雨花台' },
{ value: 230, name: '总统府' },
{ value: 837, name: '玄武湖' },
{ value: 396, name: '红山森林动物园' },
{ value: 82, name: '侵华日军南京大*遇难同胞纪念馆' },
]
}
]
};
myChart.setOption(option);
</script>
</div>
</body>
</html>
iframe_div2.html
将展示内容（div、iframe）放在Expand控件中的更多相关文章
-
在RichTextBox控件中显示RTF格式文件
实现效果: 知识运用: RichTextBox控件的LoadFile方法 //将文件内容加载到RichTextBox控件中 public void LoadFile(string path,Ri ...
-
关于WEB开发下面DIV层被OCX控件拦住问题
控件分为有窗口控件与无窗口控件,无窗口控件很好办,如flash控件,可以通过添加wmode属性来解决挡住DIV层这个问题,添加的代码如下: 解决无窗口控件挡住DIV: 1 <param nam ...
-
.net获取select控件中的文本内容
.net获取select控件中的文本内容 2009-11-28 21:19小V古 | 分类:C#/.NET | 浏览1374次 <select id="SecType" st ...
-
delphi Components[i]清除所有edit控件中的内容
(* 一般的清空combobox方法 combobox1.clear; ... combobox9.clear; *) procedure TForm1.Button1Click(Sender: ...
-
实现TableLayout布局下循环取出TableRow控件中的文字内容到list集合
布局方式为TableLayout,利于实现表单样式展现. <!-- 详情内容区域 --> <ScrollView android:layout_above="@id/id_ ...
-
【VC版】如何获取其他进程中ListView控件中的内容
如果需要C#版的,可以看下我之前写的:C#如何获取其他程序ListView控件中的内容 获取其他进程的数据需要使用到以下几个函数: VirtualAllocEx() VirtualFreeEx() W ...
-
02、获取 WebView 控件中，加载的 HTML 网页内容
在开发 app 的时候,WebView 是经常使用的控件.而且有时需要向 WebView 中的 html 内容 注入额外的 js 进行操作.这里记录一下在当前 WebView 控件中,获取 html ...
-
Flex 列表控件中的操作
主要操作包括:显示提示,使用图标,编辑列表条目中数据. 1.使用数据提示: 当鼠标停留在条目上时,可以显示该条目的相关数据提示. 当利用滚动条时,可以显示滚动条的相关提示. 在列表控件中使用showD ...
-
OpenCV 2.2版本号以上显示图片到 MFC 的 Picture Control 控件中
OpenCV 2.2 以及后面的版本号取消掉了 CvvImage.h 和CvvImage.cpp 两个文件,直接导致了苦逼的程序猿无法调用里面的显示函数来将图片显示到 MFC 的 Picture Co ...
随机推荐
-
#研发解决方案介绍#Tracing（鹰眼）
郑昀 最后更新于2014/11/12 关键词:GoogleDapper.分布式跟踪.鹰眼.Tracing.HBase.HDFS. 本文档适用人员:研发 分布式系统为什么需要 Tracing? ...
-
周末娱乐一下--------恶搞windows小脚本
下面这是个循环DOS命令,使用了C中的goto语句 echo命令式输出命令 set命令是设置命令 var是变量,初始为0 :continue是一个用于goto的标示. %var%输出变量名,%var% ...
-
MVVM架构~knockoutjs系列之包括区域级联列表的增删改
返回目录 这个例子我做了几次,之前总是有BUG,目前测试后,确定没有BUG才发上来的,主要功能是实现“我的银行”模块的增删改的功能,这个里面包括了级联列表的区域选择,这部分是难点,在开发过程中,我们应 ...
-
poj 1087 C - A Plug for UNIX 网络流最大流
C - A Plug for UNIXTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contes ...
-
win7 64位 python3.4&;opencv3.0配置安装
参考:http://blog.csdn.net/sun7_she/article/details/50051249 一.安装Python 下载Python3.4.2 网址:https://www.py ...
-
SVN简介与安装
SVN 简介: Subversion(SVN) 是一个开源的版本控制系統, 也就是说 Subversion 管理着随时间改变的数据. 这些数据放置在一个*资料档案库(repository) 中. 这 ...
-
【.NET】 HTTP协议之webrequest
零——简介 一.GET 二.POST emmm在post这里在了很多跟头,记忆很深刻. 2.1 传json的Post:简单粗暴的两个参数 一个是网址(接口),一个是json数据 分为了六个步骤 : ...
-
自定义 Cordova插件（基础篇）
cordova自定义插件 注意:存放自定义cordova插件目录不能有空格可能会报错 cordova的安装 下载node.js,安装完成后你可以在命令行中使用node和npm. 安装cordova使用 ...
-
POJ 2553 The Bottom of Graph 强连通图题解
Description We will use the following (standard) definitions from graph theory. Let V be a nonempty ...
-
Mac安装wget
Mac安装wget wget版本: wget-1.17 参考来源: Mac OS 安装Wget 給Mac添加wget功能 The Wget package for Mac http://brew.sh ...