一、使用方式

1、百度地图API（需要申请百度地图ak）

2、矢量地图（需要准备矢量地图数据）（实现第二种如下）

二、基本实现

1、准备矢量地图json文件china.json

2、使用ajax获取china.json

$.get('json/map/china.json',function(chinaJson){})

3、在成功回调中往echarts全局对象注册地图json数据

echarts.registerMap('chinaMap',chinaJson)

4、geo设置(geo设置应放在registerMap之后)

geo:{
    type:'map',
    map:'chinaMap'

三、常见效果

1、拖动和缩放

geo:{
    roam:true

2、名称显示

geo:{
    label:{
        show:true

3、初始缩放比例

geo:{
    zoom:2

4、地图中心点

geo:{
    center:[87.617733,43.792818]//*的地理坐标

5、不同城市显示不同颜色

a、显示基本的地图

b、城市的空气质量数据设置给series(注意seriesData中name要和矢量数据中的name一样)

c、将series下的数据和geo关联起来

geo:{

},
series:[{
    type:'map',//关联作用
    geoIndex:0,//将空气质量数据和第一个geo配置关联在一起
    data:airData
    

d、结合visualMap配合使用

geo:{
    visualMap:{
    min:0,
    max:300
    inRange:{
        color:['white','red']//控制颜色渐变的范围
    },
    calculable:true//小三角数据筛选

6、地图和散点图结合

给series下增加散点图系列

let scatterData = [
    {
        value:[117.283042,31.86119]
    }
]
series:[{
        type:'map'
    },
    {
        type:'effectScatter',
        coordinateSystem:'geo',//指明散点使用的坐标系统（geo的坐标系统）
        data:scatterData,//配置散点的坐标数据
        rippleEffect:{
            scale:10//动画效果更加明显
        }
    }