echarts动态生成图片绘制在地图上，同时实现图片的点击事件

**项目需求：**根据后台数据，生成pie，并绘制在地图上，点击pie时实现点击事件。
一开始在div内生成echarts饼图，再通过经纬度将div放在指定位置，但是div的范围内地图自身的滚轮和双击事件失效，几经周折，找到了另一种解决方案：将div内的echarts饼图以图片的形式输出，隐藏掉当前div，再将图片通过经纬度绘制在地图上。当点击时，通过hitTest（）判断是点击在地图上还是图片上，以此来实现图片的点击事件。
首先是通过echarts生成饼图并输出图片路径：

 				var toolTipId = _self.idName.toolTip + i;//echarts的容器id
                $('#' + toolTipId).removeClass('hide');
                var _chart = echarts.init(document.getElementById(toolTipId));
                var option = {
                    color: infoConfig.color,
                    series: [
                        {
                            hoverAnimation: false,
                            type: 'pie',
                            radius: '55%',
                            data: data,
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            }
                        }
                    ],
                    animation: false//生成图片的话，这个一定要设置为false
                };
                _chart.setOption(option);
				//将生成的pie图输出为图片，echarts提供的方法
                var img = new Image();
                img.src = _chart.getDataURL({
                    pixelRatio: 2,
                });
                //隐藏掉原来的div
                $('#' + toolTipId).addClass('hide');

生成图片后可以拿到图片的src，然后将图片通过PictureMarkerSymbol（）绘制在地图上：

 				//获取图片即将绘制的位置（经纬度）
 				var center = _self.items[i].portalItem.extent.center;
                var wkid = center.spatialReference.wkid;
                var geometry = new Point({
                    longitude: center.x,
                    latitude: center.y,
                    spatialReference: wkid
                });
                //将图片绘制在指定位置
                var symbol = new PictureMarkerSymbol(imgPath, 50, 50);
                var polylineGraphic = new Graphic({
                    type: "picture-marker",
                    geometry: geometry,
                    symbol: symbol
                });
                _self.view.graphics.add(polylineGraphic); 

效果如下：

图片的点击事件：

 _self.view.on("click", function (event) {
     _self.view.hitTest(event)
          .then(function (r) {                          
              var results = r.results;
              if (results.length == 1) {
                  console.log('点在image上'）                
                  }
              } else if (results.length == 0) {
                  console.log('点在地图上')
              }
          });
  })