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('點在地圖上')
              }
          });
  })