1.popup中添加图表信息
//定义marker
var marker = L.marker(val.location).addTo(map);
var content = '<div style="width: 220px; height: 220px;" id="marker' + val.id + '"></div>';
marker.bindPopup(content, {});
marker.on('popupopen', function(e) {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('marker' + val.id));
// 指定图表的配置项和数据
option = {
tooltip: {
trigger: 'axis'
},
xAxis: [{
type: 'category',
data: ['1月', '2月', '3月', '4月']
}],
yAxis: [{
type: 'value',
name: '水量',
min: 0,
max: 50,
interval: 50,
axisLabel: {
formatter: '{value} ml'
}
}, {
type: 'value',
name: '温度',
min: 0,
max: 10,
interval: 5,
axisLabel: {
formatter: '{value} °C'
}
}],
series: [{
name: '蒸发量',
type: 'bar',
data: [2.0, 4.9, 7.0, 23.2]
}, {
name: '降水量',
type: 'bar',
data: [2.6, 5.9, 9.0, 26.4]
}, {
name: '平均温度',
type: 'line',
yAxisIndex: 1,
data: [2.0, 2.2, 3.3, 4.5]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
});
2.echat以控件形式添加在map中
.chart {
width: 500px;
height: 300px;
background-color: white;
}
var chart = L.control({position: 'bottomright'});
chart.onAdd = function (map) {
var div = L.DomUtil.create('div', 'info chart');
div.id="chatrdemo";
return div;
};
chart.addTo(map);
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chatrdemo'));
// 指定图表的配置项和数据
option = {
tooltip: {
trigger: 'axis'
},
xAxis: [{
type: 'category',
data: ['1月', '2月', '3月', '4月']
}],
yAxis: [{
type: 'value',
name: '水量',
min: 0,
max: 50,
interval: 50,
axisLabel: {
formatter: '{value} ml'
}
}, {
type: 'value',
name: '温度',
min: 0,
max: 10,
interval: 5,
axisLabel: {
formatter: '{value} °C'
}
}],
series: [{
name: '蒸发量',
type: 'bar',
data: [2.0, 4.9, 7.0, 23.2]
}, {
name: '降水量',
type: 'bar',
data: [2.6, 5.9, 9.0, 26.4]
}, {
name: '平均温度',
type: 'line',
yAxisIndex: 1,
data: [2.0, 2.2, 3.3, 4.5]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
3.以marker形式添加在map
var pictures = L.marker(val.location, {
icon: L.divIcon({
className: 'leaflet-echart-icon',
iconSize: [160, 160],
html: '<div id="marker' + val.id + '" style="width: 160px; height: 160px; position: relative; background-color: transparent;">asd</div>'
})
}).addTo(map);
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('marker' + val.id));
// 指定图表的配置项和数据
option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
series: [{
name: '访问来源',
type: 'pie',
radius: ['20', '50'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '18',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data: [{
value: val.value1,
name: '直接访问'
}, {
value: val.value2,
name: '邮件营销'
}, {
value: val.value3,
name: '联盟广告'
}, {
value: val.value4,
name: '视频广告'
}, {
value: 20,
name: '搜索引擎'
}]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
demo源码地址：https://github.com/shitao1988/leaflet-echartmarker