先上图：
在网上找了很多资料，其实这个功能项目之前已经有人实现了，但我不想复制粘贴，只好自己研究，同时也能增加charts熟练度。看的程序多了，尤其是注释很少的代码，要去弄懂其实现的过程细节非得有把头看大的觉悟。在这里，顺便提一下我看这种程序的做法：
1 截图其从后端等调用的数据，每种类型一个就ok
2 把图片粘贴到一个类似windows画图板的工具上，方便查看
3 同样的做法，将用到的变量截图到工具上
4 以上准备工作做好后， 再依据函数调用的先后顺序一步一步分析即可；尽量分析清一个函数，就cut掉，以免产生视觉干扰
下面来先说说如何在地图上实现饼图：
首先： 在echarts中的饼图实例中，你可以这样在一个容器中实现多个饼图：
没错，只要在series中增加多个type为pie的饼图即可实现， 每个饼图的定位有center属性决定，数据互不干扰，这样就可以利用循环来达成无限在同一容器中添加饼图；在用事件触发改变center值，即可实现饼图随鼠标移动而移动等等功能。如果这里你有疑惑，建议看看官方有关于pie的说明：echarts饼图说明
其次：说一下实现地图背景的方法，实现地图是用不到series的，所以怎么做想必各位心中已经有思路了吧！
这里贴上简洁的地图背景实现：
至于地图json或者引入地图文件之类的，我就不多说，和引入外部js差不多；以上就可以实现一个简单的地图背景了。
最后：我要要用到一个非常重要的函数，convertToPixel 用这个函数，可以把地理坐标转换成web显示需要的px像素坐标，使用这个函数的时候， 注意一定要先把地图给setOption出来，然后再使用，也就是说，要实现在地图上添加饼图，得有2次setOption，如下：
其中，pieDate函数就是实现pie图形的series添加，这里我们使用的是用一个数组，然后把series的json数据push进去，要多少个饼图就push多少次即可。接下来就是使用转换函数的时候：
以上图中，seriesIndex表示只使用该系列的首个坐标系，即我们刚才建立的地图坐标系（其实就是第一个setOption的坐标系）;data[i].value中的数据是一个包含经纬度的数组，类似[123.11,30.22]；经过这个函数的转换，饼图就可以显示在地图对应的位置了。这里不得不吐槽下，scatter的coordinateSystem属性是真的方便，当然了，我认为我们这样做也不差，哈哈。
ok，至此， 饼图已经可以显示在地图上了，接下来就是鼠标移动触发地图移动，进而执行pie图位置重置即可；重置方法只要更新下center属性。
谢谢阅读！^-^
