Echarts——中国地图绘制

最新推荐文章于 2025-09-19 00:10:44 发布

原创最新推荐文章于 2025-09-19 00:10:44 发布 · 1.8w 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

本文介绍了如何利用Echarts库来绘制中国地图。首先，提供了获取中国城市分布Geo数据的来源，强调数据处理的重要性。接着，说明了注册地图并进行绘制的步骤，包括registerMap方法的参数解释。最后，提到了在Echarts选项中配置地图显示样式，并指出地图名称需与registerMap方法匹配。

1.首先准备中国城市分布Geo数据 china.jsonhttps://download.youkuaiyun.com/download/heal_l/75671467https://download.youkuaiyun.com/download/heal_l/75671467

注：此数据集为三维地球中国的城市分布数据，经纬度与二维平面数据有所偏差。可通过处理应用于二维平面中国地图

（奉上处理文件链接https://download.youkuaiyun.com/download/heal_l/75672138 ）

2.引入 echarts 插件，并绘制地图

import * as echarts from 'echarts'
// 注册绘制中国地图
echarts.registerMap('china', q(chinaJson))

registerMap(mapName,opt):

mapName: 地图名称，在 geo 组件或者 map 图表类型中设置的 map 对应的就是该值。
opt :

geoJSON : 可选。GeoJson 格式的数据，可以是 JSON 字符串，也可以是解析得到的对象
svg : 可选。SVG 格式的数据。可以是字符串，也可以是解析得到的 SVG DOM 对象
specialAreas :可选。将地图中的部分区域缩放到合适的位置。(只在 geoJSON 中生效，svg 中不生效)

3.option中配置geo地图显示样式

// 地图配置
  geo: {
    nameMap: {
      China: '中国',
    },
    map: 'china',
    label: {
      emphasis: {
        show: false,
      },
    },
    // 当前视角的缩放比例
    zoom: 2.15, // 2.3
    left: -300,
    top: 250,
    // scale 地图的长宽比
    aspectScale: 1,
    itemStyle: {
      normal: {
        borderColor: '#21EAFD', // 区域边框颜色
        areaColor: 'rgba(255,255,255,0)', // 区域颜色
        borderWidth: 1, // 区域边框宽度
        shadowBlur: 5,
        shadowColor: 'rgba(107,91,237,.7)',
      },
      emphasis: {
        borderColor: '#FFD1A3',
        areaColor: 'rgba(102,105,240,.3)',
        borderWidth: 1,
        shadowBlur: 5,
        shadowColor: 'rgba(135,138,255,.5)',
      },
    },
  },

配置项可根据官网给定选项配置