leaflet 点击图标显示echarts图表弹框

leaflet散点图片根据官方文档我们应该都可以加载出来，点击如果想弹出简单的文本内容，title属性加载一个自定义html就可以了，但有时项目需求需要配合别的图表组件使用，简单记录下开发demo过程，下面是和Echarts折线图效果图。

 创建地图容器和要显示的弹框容器

  map为地图容器id，t1为弹框容器id

<div id="map"></div>
	<div id="t1">
		<p id="KK">测试</p>
		<div id="tt">
			
		</div>
	</div>

　创建地图和echart图表

 const map = L.map("map", {
        center: [32.050678, 118.792199], // 地图中心
        zoom: 5.6, //缩放比列
        zoomControl: true, //禁用 + - 按钮
        doubleClickZoom: true, // 禁用双击放大
        attributionControl: true // 移除右下角leaflet标识
    });
    let name = L.tileLayer(
        "http://wprd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7",
    ).addTo(map);

　　

var chartDom = document.getElementById('tt');
	var myChart = echarts.init(chartDom);
	var option;
	
	option = {
	  xAxis: {
	    type: 'category',
	    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
	  },
	  yAxis: {
	    type: 'value'
	  },
	  series: [
	    {
	      data: [150, 230, 224, 218, 135, 147, 260],
	      type: 'line'
	    }
	  ]
	};
	
	option && myChart.setOption(option);

　　加载散点层，点击图标绑定弹框组,核心代码如下：

 var tt = document.getElementById("t1");
    var myGroupIcon = [];
    for (let i = 0; i < data.length; i++) {
        var a = data[i];
        var title = a.title;
        let myIcon1 = createIcon(a.type, a.value)
        var marker = L.marker(L.latLng(a.lat, a.lng), {
             title1: title,
             icon: myIcon1,
        });
		
         marker.bindPopup(tt);
			 marker.on(`click`, (item) => {
				 $("#KK").text(item.target.options.title1);
			         });
           myGroupIcon.push(marker)
      
    }

　tips:弹框组初始化是渲染在页面上显示的，可以设置overflow: hidden，如果加载前设置样式让弹框组隐藏，Echarts图表初始化隐藏再渲染尺寸会有问题（网上也有解决方法）。