heightEcharts 导出图片 (AVG转图片) 显示在Arcgis 地图上

// 根据heightEcharts生成图标
    createPointByHeightEcharts (point, layer, data){
      // 創建div来实现echarts容器
      var div = document.createElement("div");
      var w = 360;
      var h = 360;
      div.id = "est"+Math.random();
      div.style=\'width:\'+w+\'px;height:\'+h+\'px;position:absolute;left:-1000px;top:0;z-index:1000;\'
      document.body.appendChild(div);
      var echarts = HighCharts.chart(div.id, {
        chart: {
          type: \'pie\',
          options3d: {
            enabled: true,
            alpha: 65
          },
          backgroundColor:"#00000000",
          animation: false
        },
        title: {
          text: \'\'
        },
        colors: ["#6699cd","#ae68d2"],
        plotOptions: {
          pie: {
            innerSize: 0,
            depth: 80
          }
        },
        series: [{
          animation: false,
          dataLabels: {
            enabled: false	
          },
          name: \'货物金额\',
          data: [
            [\'磷\', data.tp*1],
            [\'氮\', data.tn*1],
          ]
        }]
      })
      var svgXml = echarts.container.innerHTML;
      var image = new Image();
      image.src = \'data:image/svg+xml;base64,\' + window.btoa(unescape(encodeURIComponent(svgXml))); //给图片对象写入base64编码的svg流
      echarts.destroy();
      echarts = null;
      div.remove();
      div = null;
      setTimeout(()=>{
        var canvas = document.createElement(\'canvas\');  //准备空画布
        canvas.width = w;
        canvas.height = h;
        var context = canvas.getContext(\'2d\');  //取得画布的2d绘图上下文
        context.drawImage(image, 0, 0);
        let base64 = canvas.toDataURL(\'image/png\');  //将画布内的信息导出为png图片数据
        var symbol = new window.esri.symbol.PictureMarkerSymbol(base64,36,36);
        var graphic = new window.esri.Graphic(point,symbol,{ id: "bj" });
        layer.add(graphic);
        canvas = null;
        image.remove();
        image = null;
      },100)
    },

　　

 

// 顺便补充一下 echarts导出成图片的

// 根据echarts图生成点位
    createPointByEcharts (point,layer){
      // 創建div来实现echarts容器
      var div = document.createElement("div");
      div.style=\'width:36px;height:36px;position:absolute;left:100px;z-index:1000;top:50px;\'
      document.body.appendChild(div);
      var option = {
        tooltip: {
            trigger: \'item\'
        },
        series: [
            {
                name: \'访问来源\',
                type: \'pie\',
                radius: [\'0%\', \'100%\'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: \'#fff\',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: \'center\'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: \'40\',
                        fontWeight: \'bold\'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    {value: 1048, name: \'搜索引擎\'},
                    {value: 735, name: \'直接访问\'},
                    {value: 580, name: \'邮件营销\'},
                    {value: 484, name: \'联盟广告\'},
                    {value: 300, name: \'视频广告\'}
                ],
                animation: false,
            }
        ]
      };
      this.echarts = this.$echarts.init(div);
      this.echarts.setOption(option);
      setTimeout(()=>{
        var images = this.echarts.getRenderedCanvas().toDataURL();
        var symbol = new window.esri.symbol.PictureMarkerSymbol(images,36,36);
        var graphic = new window.esri.Graphic(point,symbol,{ id: "bj" });
        layer.add(graphic);
      },1000) 
    },