<!DOCTYPE html>
<html>
<head>
<title>o4折线图</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.4.2/css/ol.css" type="text/css">
<script type="text/javascript" src="./highcharts.js"></script>
<script src="./jquery-1.9.1.js"></script>
<script type="text/javascript" src="./ol-debug.js"></script>
<!-- <script src="https://api.mapbox.com/mapbox.js/plugins/arc.js/v0.1.0/arc.js"></script> -->
<style type="text/css">
.map {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<div id='canvasDiv' style="min-width:400px;height:400px"></div>
<div id="popup" title="Welcome to ol3"></div>
<script type="text/javascript">
var mapUrl = "http://t6.tianditu.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}";
var source = new ol.source.Stamen({ layer: 'toner' });
// var source=new ol.source.XYZ({url: mapUrl});
// 构造地图
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: source //替换source，显示自定义地图
})
],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
// 添加折线图表div到地图
var pie = new ol.Overlay({
position: [112.8, 30.5],
positioning: ol.OverlayPositioning.CENTER_CENTER,
element: document.getElementById('canvasDiv')
});
map.addOverlay(pie);
// 构造图表
var chart = Highcharts.chart('canvasDiv', {
title: {
text: '2010 ~ 2016 年太阳能行业就业人员发展情况'
},
subtitle: {
text: '数据来源：thesolarfoundation.com'
},
yAxis: {
title: {
text: '就业人数'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
series: [{
name: '安装，实施人员',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: '工人',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: '销售',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: '项目开发',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: '其他',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
</script>
</body>
</html>
