leaflet 結合 Echarts4 實現統計圖(附源碼下載)

前言

leaflet 入門開發系列環境知識點了解：

• leaflet api文檔介紹，詳細介紹 leaflet 每一個類的函數以及屬性等等
• leaflet 在線例子
• leaflet 插件，leaflet 的插件庫，很是有用

內容概覽

leaflet 結合 Echarts4 實現統計圖
源代碼 demo 下載

本文 leaflet 結合 Echarts4 實現三種形式統計圖:

1. Leaflet Popup
2. Leaflet Control
3. Leaflet Marker

實現效果圖以下：

• Leaflet Popup
  經過彈出窗口實現 Leaflet，在 popup 的 popupopen 事件觸發時重載 echarts

function initControl_Popup(map){
var popChartMarker=L.marker([23.15,113.25]).addTo(map);
//配置彈出框
var content='<div style="width:500px;height:300px" id="mark"></div>';
popChartMarker.bindPopup(content,{maxWidth:2000});
popChartMarker.on('popupopen',function(e){
var myChart=echarts.init(document.getElementById('mark'));
var option = {
title: {
text: ''
},
tooltip : {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data:['郵件營銷','聯盟廣告','視頻廣告','直接訪問','搜索引擎']
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['週一','週二','週三','週四','週五','週六','週日']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'郵件營銷',
type:'line',
stack: '總量',
areaStyle: {},
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name:'聯盟廣告',
type:'line',
stack: '總量',
areaStyle: {},
data:[220, 182, 191, 234, 290, 330, 310]
},
{
name:'視頻廣告',
type:'line',
stack: '總量',
areaStyle: {},
data:[150, 232, 201, 154, 190, 330, 410]
},
{
name:'直接訪問',
type:'line',
stack: '總量',
areaStyle: {normal: {}},
data:[320, 332, 301, 334, 390, 330, 320]
},
{
name:'搜索引擎',
type:'line',
stack: '總量',
label: {
normal: {
show: true,
position: 'top'
}
},
areaStyle: {normal: {}},
data:[820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
myChart.setOption(option);
});
}

• Leaflet Control
  主要就是初始一個 control，並在並給其中的容器 DIV 附上 class 和 id，id 用於建立圖表時能找到該容器，class 用於控制 control 的樣式

完整demo源碼見小專欄文章尾部：GIS之家leaflet小專欄

文章尾部提供源代碼下載，對本專欄感興趣的話，能夠關注一波