Leaflet Control Layer对接echarts饼图时报getAttribute为null错误

报错类型：Uncaught TypeError: Cannot read property 'getAttribute' of null

错误来源于执行echarts.init(document.getElementById("marker" + val.id))时，你通过L.divIcon定义的<div id="markerxxx">元素还没有被插入到页面DOM树中，document.getElementById返回null，ECharts初始化时读取null的getAttribute属性就触发了对应报错。
Leaflet的marker元素只会在所属图层被添加到地图、且对应视图范围渲染时才会实际创建DOM节点，提前调用获取DOM的逻辑自然拿不到对应元素。

你可以监听marker的add事件，等marker被实际挂载到地图上之后再执行ECharts初始化逻辑，调整后的代码如下：

var pieChartGroup = L.featureGroup();

vals.forEach((val) => {
  var markerId = "marker" + val.id;
  var pictures = L.marker(val.location, {
    icon: L.divIcon({
      className: "leaflet-echart-icon",
      iconSize: [160, 160],
      html: `<div id="${markerId}" style="width: 160px; height: 160px; position: relative; background-color: transparent;"></div>`,
    }),
  }).addTo(pieChartGroup);
  // 监听marker挂载到地图的事件，再初始化echarts
  pictures.on('add', function() {
    // 此时DOM已经存在，可以正常获取
    var myChart = echarts.init(document.getElementById(markerId));
    //  指定图表的配置项和数据
    const option = {
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b}: {c} ({d}%)",
      },
      series: [
        {
          name: val.nama,
          type: "pie",
          radius: ["10", "25"],
          avoidLabelOverlap: false,
          label: {
            normal: {
              show: false,
              position: "center",
            },
            emphasis: {
              show: true,
              textStyle: {
                fontSize: "18",
                fontWeight: "bold",
              },
            },
          },
          labelLine: {
            normal: {
              show: false,
            },
          },
          data: [
            {
              value: val.MB,
              name: "Masih Bersekolah",
            },
            {
              value: val.TBL,
              name: "Tidak Bersekolah Lagi",
            },
            {
              value: val.TBPS,
              name: "Tidak/Belum Pernah Bersekolah",
            },
          ],
        },
      ],
    };
    //  使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  })
});

var baseLayers = {
  OpenStreetMap: LayerKita,
  OpenCycleMap: L.tileLayer(
    "http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png"
  ),
  Outdoors: L.tileLayer(
    "http://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png"
  ),
};

var overlays = {
  Bersekolah: pieChartGroup,
};

L.control.layers(baseLayers, overlays).addTo(map);

• 如果切换图层后饼图消失，可同时监听图层的overlayadd事件，重新触发对应图层内所有marker的ECharts初始化即可
• 建议给每个ECharts实例添加实例缓存，页面销毁前调用myChart.dispose()释放内存，避免内存泄漏

内容的提问来源于stack exchange，提问作者ilaria gemini