说实话,有很多的功能真的很难去实现,而且实现了也不完美;就拿今天这个主题来说,我们有时候可能会有这样的需求:
一个大企业,在全球范围内都有项目,于是要求我们做一张表报能展示全球范围内各个城市的项目以及在该项目产能占比(饼状图) 。
这样的结果就是要求我们把饼状图定位到经纬度中 。
先把我写的例子拿出来,然后在说一下我的思路和对这个问题的看法:
ECharts
因为只为实现效果,所以代码写得尽可能的简单,去掉了多余的效果,效果图如下:
![echarts在地图上画饼状图](http://img.gansulong.com/231116/0Z6034a1-0.png)
文章插图
可以看出来定位的效果就已经出来了,下面说一下思路 。
![echarts在地图上画饼状图](http://img.gansulong.com/231116/0Z60330T-1.png)
文章插图
1、想要将饼状图定位到世界地图上,得先要有世界地图;于是,要先画 geo 背景,这样才能得到经纬去定位 。
2、查看饼状图的配置项,其中涉及到定位的就是这个了,得尝试把经纬度转化为像素值 。
![echarts在地图上画饼状图](http://img.gansulong.com/231116/0Z6036410-2.png)
文章插图
3、查看API 发现有这样的 API
![echarts在地图上画饼状图](http://img.gansulong.com/231116/0Z6033W6-3.png)
文章插图
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在地图上画饼状图】如果你有更好的方法,希望能给我留个地址!谢谢!
- vue书写一个uni-app小程序
- 一般买化妆品都会在意哪些问题
- uniapp黑马项目总结
- 小猪佩奇第四季在哪儿看
- 基于B2C的西安回民街小吃在线订购系统
- 计算机关机时安装更新失败,电脑关机的时候一直在安装更新失败怎么处理
- C#在汽车行业中的应用
- 数峰科技荣获智在人为2017年度浙商人工智能最具创新性企业称号
- Brandmark:基于人工智能的在线AI设计LOGO平台
- JS获取元素的九种方法、节点,以及在JS中动态增删改元素