openlayers4 入門開發系列結合 echarts4 實現統計圖(附原始碼下載)

阿新 • • 發佈：2020-08-21

前言

openlayers4 官網的 api 文件介紹地址openlayers4 api，裡面詳細的介紹 openlayers4 各個類的介紹，還有就是線上例子：openlayers4 官網線上例子，這個也是學習 openlayers4 的好素材。

openlayers4 入門開發系列的地圖服務基於 Geoserver 釋出的，關於 Geoserver 方面操作的部落格，可以參考以下幾篇文章：

geoserver 安裝部署步驟

geoserver 釋出地圖服務 WMS

geoserver 釋出地圖服務 WMTS

geoserver 整合以及部署 arcgis server 瓦片資料

內容概覽

1.基於 openlayers4 結合 echarts4 實現統計圖
2.原始碼 demo 下載

效果圖如下：

地圖載入程式碼如下：

/**
* 地圖建立初始化
*/
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnline' +
'StreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
})
})
],
view:  
new ol.View({
center: [113.53450137499999, 34.44104525],
projection: 'EPSG:4326',
zoom: 6
})
});

echarts資料來源設定：

//餅狀圖資料來源
var option = {
title : {
text: '',
subtext: '',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: [ 
'直接訪問','郵件營銷','聯盟廣告','視訊廣告','搜尋引擎'],
textStyle:{
color: ['#FFFFFF']
}
},
series : [
{
name: '訪問來源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'直接訪問'},
{value:310, name:'郵件營銷'},
{value:234, name:'聯盟廣告'},
{value:135, name:'視訊廣告'},
{value:1548, name:'搜尋引擎'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
//柱狀圖資料來源
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: 'rgba(0, 0, 0, 0.5)'
},
label: {
backgroundColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
toolbox: {
feature: {
dataView: {show: false, readOnly: false},
magicType: {show: false, type: ['line', 'bar']},
restore: {show: false},
saveAsImage: {show: false}
}
},
legend: {
data:['蒸發量','降水量','平均溫度'],
textStyle:{
color: ['#FFFFFF']
}
},
xAxis: [
{
type: 'category',
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
axisPointer: {
type: 'shadow'
},
nameTextStyle: {
color: ['#FFFFFF']
},
axisLine:{
lineStyle:{
color:'#FFFFFF',
width:1,//這裡是為了突出顯示加上的
}
}
}
],
yAxis: [
{
type: 'value',
name: '水量',
min: 0,
max: 250,
interval: 50,
axisLabel: {
formatter: '{value} ml'
},
nameTextStyle: {
color: ['#FFFFFF']
},
axisLine:{
lineStyle:{
color:'#FFFFFF',
width:1,//這裡是為了突出顯示加上的
}
}
},
{
type: 'value',
name: '溫度',
min: 0,
max: 25,
interval: 5,
axisLabel: {
formatter: '{value} °C'
},
nameTextStyle: {
color: ['#FFFFFF']
},
axisLine:{
lineStyle:{
color:'#FFFFFF',
width:1,//這裡是為了突出顯示加上的
}
}
}
],
series: [
{
name:'蒸發量',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name:'降水量',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
},
{
name:'平均溫度',
type:'line',
yAxisIndex: 1,
data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]
};

統計圖初始化載入：

//餅狀圖載入
var dom = document.getElementById("popupPie");
var pos = ol.proj.fromLonLat([113.53450137499999, 34.44104525],'EPSG:4326');
var popupPie = new ol.Overlay({
position: pos,
element: dom
});
map.addOverlay(popupPie);
var myChart = echarts.init(dom);
myChart.setOption(option);
 
//柱狀圖載入
var dom = document.getElementById("popupBar");
var pos = ol.proj.fromLonLat([112.5245, 28.4211],'EPSG:4326');
var popupBar = new ol.Overlay({
position: pos,
element: dom
});
map.addOverlay(popupBar);
var myChart = echarts.init(dom);
myChart.setOption(option);