echart.js 之 地图+散点图

老规矩，我们先放我们要达到的目标；

Paste_Image.png

在开始绘制地图的时候，我本以后会和绘制，柱状图差不多，后来发现完全不是，它更难，更复杂，我这里讲一步一步的讲解怎么绘制以后上图的图。

这个图 是 安徽合肥的地图，我们怎么获取这张地图呢？
1.下载地图

Paste_Image.png

我们打开官网根据红色箭头，进行点击 地图构建

Paste_Image.png

按照上图进行创建即可

Paste_Image.png

然后点击生成，在左下角发现“合肥市.js”，代表我们已经下载到了我们需要的js文件了；
老规矩，进入一波

Paste_Image.png

这个代码在 文章里面有。
接下来介绍js:

        //初始化
    var chart = echarts.init(document.getElementById('main'));

     chart.setOption({
                color: ['red'],
                visualMap: {
                    min: 0,
                    max: 2500,
                    left: 'left',
                    top: 'bottom',
                    text: ['高','低'],           // 文本，默认为数值文本
                    calculable: true,
                     inRange: {
                                   color: ['lightskyblue','gray', 'orangered','yellow']
                              }
                },
                geo: {
                        map: 'hefei',
                        roam: true,
                        label: {
                            emphasis: {
                                show: false
                            }
                        },
                        itemStyle: {
                            normal: {
                                areaColor: '#323c48',
                                borderColor: '#111'
                            },
                            emphasis: {
                                areaColor: '#2a333d'
                            }
                        }
                   },
                series: [
                    {
                        type: 'scatter',
                                      coordinateSystem: 'geo',
                        data: [{
                                name: "蜀山区",
                                symbol: 'circle',
                                value: [
                                117.4007434375,31.7372341132813,2000
                                ]
                              }]
                        
                                        
                  }     
                ]
                
                
            });

visualMap主要是控制：

Paste_Image.png

geo：就是引入地图
其他的参数和前面差不多，这里主要介绍下data数据格式的要求，
由于我们采用的是geo,类似把地图当作背景，我们在series中， 设置了coordinateSystem: 'geo',，这个主要表示我们用地理坐标显示数据，因此，我们在data的value中，前面两个数据就是表示地理坐标。
在官网在很多是采用数据转换的方法，不易让人明白，而且数据很多让人看着头晕，我在这里精简了一下，让大家好理解一点。

//通过这个函数转换我们要的数据
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;
};
//我们之定义一个我们要的数据
var geoCoordMap = {
    "蜀山区":[117.4007434375, 31.7372341132813]    
};

Paste_Image.png

然后我们把这里面data修改成

series: [
           {
                type: 'scatter',
                       coordinateSystem: 'geo',
                       data: convertData([name: "蜀山区", value: 2000])                                   
            }  
   ]   

这样子写，与上面的样子是一个效果，如果还是不能理解，可以打印log看下就明白了。
这样子我们的图就完成啦。。。。。。