学习如何利用echarts绘制地图。
分析echarts官网提供的全国主要城市空气质量地图的笔记。
原图地址
图如下：
代码：
var data = [{name: '海门', value: 9},{name: '鄂尔多斯', value: 12},{name: '舟山', value: 12},{name: '齐齐哈尔', value: 14},…… …… ……];var geoCoordMap = {'海门':[121.15,31.89],'鄂尔多斯':[109.781327,39.608266],'招远':[120.38,37.35],'舟山':[122.207216,29.985295],…… …… ……};var convertData = function (data) {var res = [];for (var i = 0; i < data.length; i++) {var geoCoord = geoCoordMap[data[i].name];if (geoCoord) {res.push({name: data[i].name,value: geoCoord.concat(data[i].value)});}}return res;};option = {title: {text: '全国主要城市空气质量 - 百度地图',subtext: 'data from PM25.in',sublink: 'http://www.pm25.in',left: 'center'},tooltip : {trigger: 'item'},bmap: {center: [104.114129, 37.550339],zoom: 5,roam: true,mapStyle: {styleJson: [{'featureType': 'water','elementType': 'all','stylers': {'color': '#d1d1d1'}}, {'featureType': 'land','elementType': 'all','stylers': {'color': '#f3f3f3'}}, {'featureType': 'railway','elementType': 'all','stylers': {'visibility': 'off'}}, {'featureType': 'highway','elementType': 'all','stylers': {'color': '#fdfdfd'}}, {'featureType': 'highway','elementType': 'labels','stylers': {'visibility': 'off'}}, {'featureType': 'arterial','elementType': 'geometry','stylers': {'color': '#fefefe'}}, {'featureType': 'arterial','elementType': 'geometry.fill','stylers': {'color': '#fefefe'}}, {'featureType': 'poi','elementType': 'all','stylers': {'visibility': 'off'}}, {'featureType': 'green','elementType': 'all','stylers': {'visibility': 'off'}}, {'featureType': 'subway','elementType': 'all','stylers': {'visibility': 'off'}}, {'featureType': 'manmade','elementType': 'all','stylers': {'color': '#d1d1d1'}}, {'featureType': 'local','elementType': 'all','stylers': {'color': '#d1d1d1'}}, {'featureType': 'arterial','elementType': 'labels','stylers': {'visibility': 'off'}}, {'featureType': 'boundary','elementType': 'all','stylers': {'color': '#fefefe'}}, {'featureType': 'building','elementType': 'all','stylers': {'color': '#d1d1d1'}}, {'featureType': 'label','elementType': 'labels.text.fill','stylers': {'color': '#999999'}}]}},series : [{name: 'pm2.5',type: 'scatter',coordinateSystem: 'bmap',data: convertData(data),symbolSize: function (val) {return val[2] / 10;},encode: {value: 2},label: {formatter: '{b}',position: 'right',show: false},emphasis: {label: {show: true}}},{name: 'Top 5',type: 'effectScatter',coordinateSystem: 'bmap',data: convertData(data.sort(function (a, b) {return b.value - a.value;}).slice(0, 6)),symbolSize: function (val) {return val[2] / 10;},encode: {value: 2},showEffectOn: 'render',rippleEffect: {brushType: 'stroke'},hoverAnimation: true,label: {formatter: '{b}',position: 'right',show: true},itemStyle: {shadowBlur: 10,shadowColor: '#333'},zlevel: 1}]};
分析：
1.data部分
存放数据：各个城市的空气质量。采用【 {name: 'XX', value:X} 】的格式。
2.geoCoordMap部分
存放在data里面出现过的城市的经纬度坐标。采用【' NAME':[XX,XX] 】。
3.convertData部分
功能是：把地点名称转化成为经纬度。对于每一个数据，可以得到“经纬度（新的name）+数据value”的新的data格式。
concat() 方法用于连接两个或多个数组。格式：string.concat(string1, string2, ..., stringX)。
4.option-bmap部分
看英文基本能理解在干什么。感觉就在配置需要的格式。（而且这个在官网没有找到？）
5.option-series数据部分
这里有2部分①每一个城市的信息，使用 data: convertData(data) 数据。②Top5的城市有加了一层，删除这部分以后效果如图：
6.series-scatter. encode
定义 data 的哪个维度被编码成什么。
/zh/option.html#series-scatter.encode
// 在任何坐标系和系列中，都支持：encode: {// 使用 “名为 product 的维度” 和 “名为 score 的维度” 的值在 tooltip 中显示tooltip: ['product', 'score']// 使用第一个维度和第三个维度的维度名连起来作为系列名。（有时候名字比较长，这可以避免在 series.name 重复输入这些名字）seriesName: [1, 3],// 表示使用第二个维度中的值作为 id。这在使用 setOption 动态更新数据时有用处，可以使新老数据用 id 对应起来，从而能够产生合适的数据更新动画。itemId: 2,// 指定数据项的名称使用第三个维度在饼图等图表中有用，可以使这个名字显示在图例（legend）中。itemName: 3}// 直角坐标系（grid/cartesian）特有的属性：encode: {// 把 “维度1”、“维度5”、“名为 score 的维度” 映射到 X 轴：x: [1, 5, 'score'],// 把“维度0”映射到 Y 轴。y: 0}// 单轴（singleAxis）特有的属性：encode: {single: 3}// 极坐标系（polar）特有的属性：encode: {radius: 3,angle: 2}// 地理坐标系（geo）特有的属性：encode: {lng: 3,lat: 2}// 对于一些没有坐标系的图表，例如饼图、漏斗图等，可以是：encode: {value: 3}
总结框架：
补充：
补充1：
想要找的很好的示例，除了官网在【示例】部分提供了一些地图的样式以外，在【资源-gallery】部分也有很多大神上传的成品。
补充2：
看到了一些资料：【百度在原本的经纬度上做了两次加密，这就导致了百度地图的坐标和其他地图的坐标稍微不同。百度api的官网上有解决方案。地址如下/index.php?title=webapi/guide/changeposition&qq-pf-to=pcqq.c2c】
