arcgis js 4集成echarts4的各种图表

没错，就是arcgis js 4.x 集成的echarts4!做这前网上搜了下arcgis js 集成echarts 发现大部分资料还是arcgis js 3.x的api,以及echarts2。有些虽然写的是4但实际却是3，有一个写的是4但没写echarts的版本和具体过程，也无法实现他描述的功能。因为版本不一样，实现的方法原理也不一样，所以中间遇到好些坑。先上效果图。（本人测试的api为arcgis js 4.8 测试数据来自echarts官网）

先简单说下原理。因为不同的图表集成的方式不同，这边主要分2类：第一种是柱状图饼状图折线图这种图表的内容坐标跟地理坐标无关，只是在地图对应位置显示图表。第2种就是迁移图风向图热力图这种图表内容的坐标与地理坐标紧密相关的。

对于第一种，内容坐标跟地理坐标无关的，主要通过设置grid的left和top属性（注意，echarts3以后才支持多个grid,用echarts2可能会失败），将其定位到地图对应的屏幕坐标上。在arcgis的地图view改变时同时更新所有gird的屏幕坐标就行（当然，饼图是直接在series中设置对应的center就行，更新时也是更新每个series中的center的屏幕坐标）。在arcgis js3的实现中主要是用infowindow.去显示，需要继承infowindow扩展自己的类。这边没试过就不再说了。

对于第二种，内容坐标跟地理坐标相关的，主要通过echarts的geo来控制对应的范围。先在echarts自带的地图上显示对应的图表内容如热力图，这边检查否能正确显示主要是防止数据或者设置错误导致没法在地图看到效果，如果内容可以正常显示，则后面（正如前面说的只是为了防止数据出错，其实也可以一开始）就可以将对应的geo隐藏（show:false）。然后在arcgis的地图view改变时将view的范围更新给geo的范围（设置geo的boundingCoords属性）这样使 geo的范围跟arcgis mapview的范围保持一致（注意如果arcgis的坐标不是经纬度要将其转成经纬度），而前面又将geo设置成不可见，所以看上去就是在arcgis的地图上了。这样还可以不需要跟具体的数据打交道，不管echarts里面是怎么渲染这些数据的，只要保证echarts的地图范围跟arcgis的地图范围一致就可以了。而网上看到的其他办法主要是通过重载dataToPoint这个函数，这样做的话就涉及到echarts内部数据的处理，此外有些example还用到一个echartsExtent的js.可能是因为echarts的版本不一样，用的echartExtent,js能实现一些功能比如热力图，但也带来其他问题，比如风向图完全变形了。而且echartExtent.js是经过编译的，可读性不强，也没法自己再去修改。所以这边折腾了好长时间发现也走不通。

最后还有一个很重要的是通过扩展一个echartLayer图层,把echarts的根节点加入到地图的根节点下，同时对echarts的更新设置等操作进行封装，这样就可以像操作其他图层一样操作echartsLayer。当然也可以直接通过操作html节点将其添加到map的根节点下（没试过放在地图根节点外面会是什么效果），这样比较简单但封装性可能没那么好，以后用的话可能没那么方便，具体没试过。

以上就是实现的原理。看起来也挺简单的，都是通过设置echarts的对应属性来完成的。比继承扩展dataToPoint或者扩展infoWindow这种方法简单多了。