一.现在我有JSP页面,页面里面有个div中有一个panel面板,面板种面嵌入的map地图。
<div class="panel panel-default">
<div class="panel-heading"><h3 class="panel-title"><i
class="fa fa-bar-chart-o fa-fw"></i>中国地图 </h3></div>
<div class="panel-body">
<div style="mini-width:400px;height:350px" data-toggle="echarts"
data-type="map" data-url="pop/echarts-mapData.html"></div>
</div>
</div>
</div>
二。其中,data-url="pop/echarts-mapData.html",引入的是一个外部html页面,但是里面是死数据,并且是JSON格式的数据。代码如下:
{
"tooltip": {
"trigger": "item"
},
"setTheme": {
"theme": "macarons"
},
"legend": {
"orient": "vertical",
"x": "left",
"data": [
"党员人数"
]
},
"dataRange": {
"min": 0,
"max": 300,
"x": "left",
"y": "bottom",
"text": [
"高",
"低"
],
"calculable": true
},
"toolbox": {
"show": true,
"orient": "vertical",
"x": "right",
"y": "center",
"feature": {
"mark": {
"show": true
},
"dataView": {
"show": true,
"readOnly": false
},
"restore": {
"show": true
},
"saveAsImage": {
"show": true
}
}
},
"series": [
{
"name": "党员人数",
"type": "map",
"mapType": "重庆|江北区",
"roam": false,
"itemStyle": {
"normal": {
"label": {
"show": true
}
},
"emphasis": {
"label": {
"show": true
}
}
},
"data": [
{
"name": "江北区",
"value": 299
}
]
}
]
}
三。很明显,↑↑↑↑↑↑上面的代码直接就是地图里面的各种参数(虽然数据是死的)。
图片效果如下:
问题:
echarts的官网我也逛过多次了,但是例子都是新建的一个html网页,在里面加入的js代码,并配合ajax请求获取的后台数据。但是这样的话,加载出来的地图却是一个单独的html网页效果而已,并不能达到我嵌入JSP页面的div中这样的效果。
所以,请教各位能伸出援手,帮帮忙。---我的目的就是想,不要单独的一个html页面,而是就像上面的死数据一样,嵌入在JSP页面中,只是数据变为从后台获取而已。