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) 
    },