echarts 图形可以放到 iframe 嵌套的 svg 中吗？

Question

公司项目的总页面使用的 svg 绘制的，svg 中有一个市级地图区域，所以我的页面通过 iframe 嵌套的 svg 页面，需要通过 js 在地图上打标注。但是好像拿到经纬度后无法标注。此时我准备通过 echarts 绘制市区地图，然后打点标注。
但是我发现将地图放到 svg 标签中，图形不显示。
我也测试使用基本图形放到 svg 标签中，也是不显示，所以我不太清楚，
到底是 echarts 图形只能放到 div 标签中，还是我的代码问题？

1、获取svg dom 代码（此处没有问题，已经修改页面值成功了）

2、此处使用的基本图形

    //  地图开始
    const map = svgIframe.GetID('Map')
    this.chartInstance = echarts.init(map)
    console.log(this.chartInstance);
    const name = '测试'
    // echarts.registerMap(name, mapData)
    const option = {
      title: {
          text: '用电量/kWh',
          textStyle: {
            color: '#fff'
          }
      },
      tooltip: {
          trigger: 'axis',
          axisPointer: {
              type: 'shadow'
          }
      },
      grid: {
          left: '5%',
          right: '5%',
          bottom: '3%',
          containLabel: true
      },
      legend: {
          data: ['去年同期', '今年本期'],
          textStyle: {
            color: '#fff',
            fontSize: 16
          }
      },
      yAxis: {
          type: 'value',
          axisLine: {
            show: true
          }
      },
      xAxis: {
          type: 'category',
          data: ['01', '02', '03', '04', '05', '06','07','08','09','10','11','12']
      }
    };
    this.chartInstance.setOption(option)

以上设置，图形不显示，也看不出个所以然来~望大佬们帮忙解答下，万分感谢！