echarts在地图上画饼状图 _效果

说实话，有很多的功能真的很难去实现，而且实现了也不完美；就拿今天这个主题来说，我们有时候可能会有这样的需求：
一个大企业，在全球范围内都有项目，于是要求我们做一张表报能展示全球范围内各个城市的项目以及在该项目产能占比（饼状图）。
这样的结果就是要求我们把饼状图定位到经纬度中。
先把我写的例子拿出来，然后在说一下我的思路和对这个问题的看法：
ECharts
因为只为实现效果，所以代码写得尽可能的简单，去掉了多余的效果，效果图如下：

文章插图
可以看出来定位的效果就已经出来了，下面说一下思路。

文章插图
1、想要将饼状图定位到世界地图上，得先要有世界地图；于是，要先画 geo 背景，这样才能得到经纬去定位。
2、查看饼状图的配置项，其中涉及到定位的就是这个了，得尝试把经纬度转化为像素值。

文章插图
3、查看API 发现有这样的 API

文章插图
OK！所有的东西都备齐了，下面是填坑的时候了。
坑我就不说了，直接说解决方法！
从上面的整体代码中可以看出：
1、绘制了两张图，
2、一张有数据，一张没有数据并被隐藏；

我将 main2 隐藏了，但是却在它上面布了，而且 main、main2 上所绘的区别在于一个有数据一个没有数据，这是因为我需要用 main2 中的 geo 给 main 中的数据一个将经纬度转化为像素值的方法，也就是下面中的 .({ : 0 }, [i].coord)

function getDe() {var ser = [];for (var i = 0; i < detail.length; i++) {ser.push({name: detail[i].name,type: 'pie',radius: '5%',center: myChart2.convertToPixel({ geoIndex: 0 }, detail[i].coord),data: detail[i].data,});}return ser;}

之所以这样做是因为只有在绘制完成之后才能生效，也就是说 .({ : 0 }, [i].coord)只有在 .()之后才能接收到返回值！
最后，还是有问题的，这样定位并不支持放大缩小，希望以后在 type:pie 中也能加上这一项。
【echarts在地图上画饼状图】如果你有更好的方法，希望能给我留个地址！谢谢！