openlayers3结合echarts3示例
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ol3 popup</title>
<link rel="stylesheet" type="text/css" href="./css/ol.css"/>
<style type="text/css">
body, #map {
border: 0px;
margin: 0px;
padding: 0px;
padding: 0px;
padding: 0px;
width: 100%;
height: 100%;
font-size: 13px;
}
#chart{
height: 200px;
width: 200px;
}
</style>
<script type="text/javascript" src="./js/ol.js"></script>
<script type="text/javascript" src="./js/jquery.js"></script>
<script src="./js/echarts.min.js"></script>
<script src="./js/data.js"></script>
<script type="text/javascript">
function init(){
var format = 'image/png';
var bounds = [73.4510046356223, 18.1632471876417,
134.976797646506, 53.5319431522236];
var vectorSource = new ol.source.TileWMS({
url: 'http://localhost:8080/geoserver/map/wms?service=WMS&version=1.1.0&request=GetMap&layers=map:capital&styles=&bbox=87.57607938302118,19.97015007757606,126.56705607814561,45.69385655384421&width=768&height=506&srs=EPSG:4326&format=application/openlayers',
params:{
'LAYERS':'capital',
'TILED':false
},
serverType:'geoserver'
});
var untiled = new ol.layer.Tile({
source: vectorSource
});
var chart = echarts.init(document.getElementById('chart'));
chart.setOption(option); //echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个
var map = new ol.Map({
controls: ol.control.defaults({
attribution: false
}),
target: 'map',
layers: [new ol.layer.Tile({
source: new ol.source.OSM(),
projection:ol.proj.getTransform("EPSG:3857", "EPSG:4326")
}),
untiled],
view: new ol.View({
center:[117,42],
projection:'EPSG:4326',
zoom:6
})
});
map.on('click', function(evt) {
var pt=evt.coordinate;
var pie = new ol.Overlay({
position: pt,
positioning: 'center-center',
element: document.getElementById('chart')
});
map.addOverlay(pie);
});
}
</script>
</head>
<body onLoad="init()">
<div id="map"></div>
<div id="chart"></div>
</body>
</html>
./js/data.js
var data = [{name:'第一类',value:20},{name:'第二类',value:23},{name:'第三类',value:45},{name:'第四类',value:34},{name:'第五类',value:14}];
var option = {
tooltip: {
trigger: 'item',
formatter: "{b} : {c} ({d}%)"
},
toolbox:{
show:true,
feature : {
mark : {show: true},
magicType : {
show: true,
type: ['pie', 'funnel']
},
}
},
calculable: true,
series: [{
type: 'pie',
radius: '40%',
startAngle:'45',
label: {
normal: {
show: false
},
emphasis: {
show: false,
textStyle:{
color: '#000000',
fontWeight:'bold',
fontSize:16
}
}
},
lableLine: {
normal: {
show: false
},
emphasis: {
show: false
}
},
data:data
}]
};实现效果