echarts在地图上画饼状图 |
您所在的位置：网站首页 › 我的世界如何打开饼状图 › echarts在地图上画饼状图 |
echarts在地图上画饼状图
|
说实话，echarts 有很多的功能真的很难去实现，而且实现了也不完美；就拿今天这个主题来说，我们有时候可能会有这样的需求： 一个大企业，在全球范围内都有项目，于是要求我们做一张表报能展示全球范围内各个城市的项目以及在该项目产能占比（饼状图）。 这样的结果就是要求我们把饼状图定位到经纬度中。 先把我写的例子拿出来，然后在说一下我的思路和对这个问题的看法： ECharts // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); var myChart2 = echarts.init(document.getElementById('main2')); var option = { title: { text: '例子', left: 'center', itemGap: 0, textStyle: { color: '#eee' }, }, geo: { map: 'world', silent: false, geoIndex: 0, roam: true }, series: [] } myChart2.setOption(option);//这里只是画了一个世界地图 //detail为饼状图数据 var detail = [ { name: 'pie1', coord: [112, -23], data: [ { name: 'data1', value: 12 }, { name: 'data2', value: 22 }, { name: 'data3', value: 32 }, { name: 'data4', value: 42 } ] }, { name: 'pie2', coord: [12, 15], data: [ { name: 'data1', value: 12 }, { name: 'data2', value: 22 }, { name: 'data3', value: 32 }, { name: 'data4', value: 42 } ] }, { name: 'pie3', coord: [112, 0], data: [ { name: 'data1', value: 12 }, { name: 'data2', value: 22 }, { name: 'data3', value: 32 }, { name: 'data4', value: 42 } ] } ] //getDe()为饼状图数据处理函数 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; } var option = { title: { text: '例子', left: 'center', itemGap: 0, textStyle: { color: '#eee' }, }, geo: { map: 'world', silent: false, geoIndex: 0, roam: true }, series: getDe() } myChart.setOption(option);因为只为实现效果，所以代码写得尽可能的简单，去掉了多余的效果，效果图如下：
可以看出来定位的效果就已经出来了，下面说一下思路。 1、想要将饼状图定位到世界地图上，得先要有世界地图；于是，要先画 geo 背景，这样才能得到经纬去定位。 2、查看饼状图的配置项，其中涉及到定位的就是这个 center 了，得尝试把经纬度转化为像素值。
3、查看 echarts API 发现有这样的 API convertToPixel
OK！所有的东西都备齐了，下面是填坑的时候了。 坑我就不说了，直接说解决方法！ 从上面的整体代码中可以看出： 1、绘制了两张图， 2、一张有数据，一张没有数据并被隐藏； 我将 main2 隐藏了，但是却在它上面布了 canvas，而且 main、main2 上所绘 canvas 的区别在于一个有数据一个没有数据，这是因为我需要用 main2 中的 geo 给 main 中的数据一个将经纬度转化为像素值的方法，也就是下面中的 myChart2.convertToPixel({ geoIndex: 0 }, detail[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; } 之所以这样做是因为 convertToPixel 只有在 canvas 绘制完成之后才能生效，也就是说 myChart2.convertToPixel({ geoIndex: 0 }, detail[i].coord) 只有在 myChart2.setOption(option) 之后才能接收到返回值！最后，还是有问题的，这样定位并不支持放大缩小，希望以后 echarts 在 type:pie 中也能加上 coordinateSystem 这一项。 如果你有更好的方法，希望能给我留个地址！谢谢！
|
【本文地址】
今日新闻 |
推荐新闻 |