geo地理坐标系完全指南

📋 概述

**geo（地理坐标系）**是ECharts用于展示地图数据的组件，支持世界地图、中国地图、省市地图等多种地理层级。它是制作数据地图、区域分析、地理分布可视化的核心组件。

核心价值

• 地理可视化：在真实地图上展示数据
• 区域对比：直观对比不同地区的数值
• 交互探索：缩放、拖拽、点击下钻
• 多层级支持：世界/国家/省/市/区县

---

🎯 核心概念

1. 基础地图

// 需要先注册地图JSON
$.get('china.json', function(chinaJson) {
  echarts.registerMap('china', chinaJson);
  
  option = {
    geo: {
      map: 'china',
      roam: true, // 启用缩放和平移
      label: {
        show: true
      }
    },
    
    series: [{
      type: 'map',
      geoIndex: 0,
      data: [
        {name: '北京', value: 1000},
        {name: '上海', value: 800}
      ]
    }]
  };
});

2. 地图数据来源

// 方式1：官方地图数据
// https://github.com/apache/echarts/tree/master/test/data/map

// 方式2：GeoJSON文件
fetch('map.json')
  .then(res => res.json())
  .then(geoJson => {
    echarts.registerMap('mymap', geoJson);
  });

// 方式3：SVG路径
echarts.registerMap('svg-map', {
  svg: svgString
});

---

🔧 详细配置项

完整geo配置

option = {
  title: {
    text: '全国销售分布图',
    left: 'center'
  },
  
  tooltip: {
    trigger: 'item',
    formatter: '{b}<br/>{c}'
  },
  
  // === 地理坐标系 ===
  geo: {
    map: 'china',
    roam: true, // 开启鼠标缩放和平移
    
    // === 位置和尺寸 ===
    left: 'center',
    top: 'middle',
    width: 'auto',
    height: 'auto',
    
    // === 缩放限制 ===
    scaleLimit: {
      min: 1,   // 最小缩放
      max: 10   // 最大缩放
    },
    
    // === 初始缩放 ===
    zoom: 1.2,
    center: [104.114129, 37.550339], // 经纬度中心点
    
    // === 标签样式 ===
    label: {
      show: true,
      color: '#333',
      fontSize: 10
    },
    
    // === 高亮样式 ===
    emphasis: {
      label: {
        show: true,
        color: '#fff'
      },
      itemStyle: {
        areaColor: '#f09199',
        shadowBlur: 10,
        shadowColor: 'rgba(0, 0, 0, 0.3)'
      }
    },
    
    // === 默认样式 ===
    itemStyle: {
      areaColor: '#eee',
      borderColor: '#999',
      borderWidth: 1
    },
    
    // === 选中模式 ===
    selectedMode: false, // 'single' | 'multiple' | false
    
    // === 选择状态 ===
    select: {
      itemStyle: {
        areaColor: '#bae7ff'
      }
    },
    
    // === 禁用状态 ===
    silent: false, // 是否不响应鼠标事件
    
    // ===  Regions 配置 ===
    regions: [
      {
        name: '北京',
        itemStyle: {
          areaColor: '#5470c6',
          color: '#fff'
        },
        label: {
          show: true,
          fontWeight: 'bold'
        }
      }
    ]
  },
  
  series: [{
    type: 'map',
    geoIndex: 0,
    data: provinceData
  }]
};

---

💡 实战案例

案例1：全国疫情地图

// 注册中国地图
fetch('https://raw.githubusercontent.com/apache/echarts/master/test/data/map/json/china.json')
  .then(res => res.json())
  .then(chinaJson => {
    echarts.registerMap('china', chinaJson);
    
    const covidData = [
      {name: '北京', value: 1234},
      {name: '上海', value: 890},
      {name: '广东', value: 2345},
      {name: '浙江', value: 1567},
      {name: '江苏', value: 1234}
    ];
    
    option = {
      title: {
        text: '全国疫情分布图',
        subtext: '数据更新时间：2023-12-01',
        left: 'center'
      },
      
      tooltip: {
        trigger: 'item',
        formatter: '{b}<br/>确诊: {c}人'
      },
      
      visualMap: {
        min: 0,
        max: 5000,
        left: 'right',
        bottom: 'bottom',
        text: ['多', '少'],
        calculable: true,
        inRange: {
          color: ['#f2f2f2', '#ffb6b6', '#ff7f7f', '#ff4d4d', '#cc0000']
        }
      },
      
      geo: {
        map: 'china',
        roam: true,
        scaleLimit: {
          min: 1,
          max: 5
        },
        label: {
          show: true,
          color: '#333',
          fontSize: 10
        },
        emphasis: {
          label: { show: true },
          itemStyle: {
            areaColor: '#ffe6e6'
          }
        },
        itemStyle: {
          areaColor: '#f5f5f5',
          borderColor: '#ddd'
        }
      },
      
      series: [{
        name: '确诊病例',
        type: 'map',
        geoIndex: 0,
        data: covidData
      }]
    };
    
    chart.setOption(option);
  });

案例2：散点在地图上

option = {
  title: {
    text: '全国门店分布',
    left: 'center'
  },
  
  tooltip: {
    trigger: 'item',
    formatter: function(params) {
      return `${params.name}<br/>门店数: ${params.value[2]}`;
    }
  },
  
  geo: {
    map: 'china',
    roam: true,
    label: {
      show: false // 隐藏省份标签
    },
    itemStyle: {
      areaColor: '#e0e0e0',
      borderColor: '#999'
    }
  },
  
  series: [{
    type: 'effectScatter', // 带有涟漪特效的散点
    coordinateSystem: 'geo',
    data: [
      {name: '北京', value: [116.4074, 39.9042, 150]},
      {name: '上海', value: [121.4737, 31.2304, 120]},
      {name: '广州', value: [113.2644, 23.1291, 100]},
      {name: '深圳', value: [114.0579, 22.5431, 95]},
      {name: '成都', value: [104.0665, 30.5723, 80]}
    ],
    symbolSize: function(val) {
      return val[2] / 10; // 根据门店数计算大小
    },
    rippleEffect: {
      brushType: 'stroke',
      scale: 3
    },
    itemStyle: {
      color: '#5470c6'
    },
    emphasis: {
      itemStyle: {
        shadowBlur: 10,
        shadowColor: '#333'
      }
    }
  }]
};

---

⚠️ 常见问题

问题1：地图不显示

解决：

// ❌ 错误：未注册地图
option = {
  geo: { map: 'china' } // 报错
}

// ✅ 正确：先注册再使用
fetch('china.json')
  .then(res => res.json())
  .then(geoJson => {
    echarts.registerMap('china', geoJson);
    chart.setOption(option);
  });

问题2：地名不匹配

解决：

// 确保data中的name与GeoJSON中的properties.name完全一致
data: [
  {name: '内蒙古自治区', value: 100} // 不能用"内蒙古"
]

---

🎯 最佳实践

1. 性能优化

geo: {
  roam: true,
  scaleLimit: { min: 1, max: 5 }, // 限制缩放范围
  silent: false
}

series: [{
  type: 'scatter',
  progressive: 5000, // 大数据量优化
  large: true
}]

2. 响应式配置

const isMobile = window.innerWidth < 768;

geo: {
  zoom: isMobile ? 0.8 : 1.2,
  label: {
    show: !isMobile, // 移动端隐藏标签
    fontSize: isMobile ? 8 : 10
  }
}

---

📊 性能指标

配置	渲染时间	建议
省级地图	50ms	无限制
市级地图	100ms	正常
区县级地图	200ms	启用progressive
带大量散点	300ms	large模式

---

🔗 相关链接

• 地图数据下载
• visualMap视觉映射
• 散点图高级.md)

---

💎 总结

geo核心价值：

• ✅ 真实地图展示数据
• ✅ 支持多级地理层级
• ✅ 交互缩放和下钻
• ✅ 散点/热力/路径等多种可视化

适用场景：

• 销售区域分布
• 物流路径追踪
• 疫情/灾害监控
• 门店/设施分布

掌握geo，让数据在地图上说话！🗺️

地图数据可视化

{
  "title": {
    "text": "区域销售分布",
    "left": "center"
  },
  "tooltip": {
    "trigger": "item"
  },
  "geo": {
    "map": "china",
    "roam": true,
    "zoom": 1.2,
    "itemStyle": {
      "areaColor": "#323c48",
      "borderColor": "#111"
    }
  },
  "series": [
    {
      "type": "map",
      "geoIndex": 0,
      "data": [
        {
          "name": "北京",
          "value": 850
        },
        {
          "name": "上海",
          "value": 920
        },
        {
          "name": "广东",
          "value": 780
        },
        {
          "name": "浙江",
          "value": 650
        }
      ]
    }
  ]
}