企业官网建设流程全解析

从行政区划代码到地图可视化：用Echarts快速绘制中国省市区分布热力图

在数据驱动的时代，如何将枯燥的数字转化为直观的视觉呈现，是每个数据分析师和前端开发者面临的挑战。行政区划代码作为我国各级行政区域的唯一标识，蕴含着丰富的地理信息价值。本文将带你深入探索如何利用Echarts这一强大的可视化工具，将冰冷的代码转化为生动的热力图，实现数据与地理空间的完美融合。

1. 行政区划代码解析与数据准备

行政区划代码采用6位数字编码体系，前两位代表省级，中间两位代表地级，最后两位代表县级。例如"110101"中：

• "11"表示北京市
• "01"表示市辖区
• "01"表示东城区

典型数据处理流程：

import pandas as pd # 示例：解析行政区划代码 def parse_division_code(code): province = code[:2] city = code[2:4] district = code[4:] return { 'province_code': province, 'city_code': city, 'district_code': district, 'full_code': code } # 构建地理数据框架 geo_data = pd.DataFrame([parse_division_code(line.split()[0]) for line in raw_data.split('\n') if line.strip()])

提示：实际应用中建议使用国家统计局发布的官方行政区划对照表，确保数据准确性。

2. Echarts地图基础配置

Echarts通过geo组件实现地图可视化，核心配置包括：

基础地图初始化代码：

option = { geo: { map: 'china', roam: true, label: { emphasis: { show: true } }, itemStyle: { normal: { areaColor: '#323c48', borderColor: '#404a59' }, emphasis: { areaColor: '#2a333d' } } } };

3. 热力图数据映射技术

将统计值映射到颜色梯度是热力图的精髓所在。Echarts提供visualMap组件实现这一功能：

视觉映射配置要点：

• 确定数据范围（min/max）
• 设置颜色渐变（color）
• 定义映射类型（type: 'continuous'）
• 添加图例说明（text）

visualMap: { min: 0, max: 100, text: ['高', '低'], realtime: false, calculable: true, inRange: { color: ['#50a3ba', '#eac736', '#d94e5d'] } }

数据格式示例：

{ "name": "北京市", "value": 89 }

注意：当数据跨度较大时，建议使用对数缩放（type: 'log'）以获得更好的视觉效果。

4. 高级交互与性能优化

提升地图体验的关键技术：

4.1 异步加载与分级渲染

// 省级地图初始加载 $.get('geo/china.json', function(geoJson) { echarts.registerMap('china', geoJson); chart.setOption(provinceOption); }); // 点击下钻到市级 chart.on('click', function(params) { loadCityMap(params.name); });

4.2 大数据量优化策略

• 使用简化版GeoJSON数据
• 启用渐进渲染（progressive: 1000）
• 应用WebWorker处理数据
• 实现视窗裁剪（renderMode: 'cliped'）

4.3 动态效果增强

series: [{ type: 'effectScatter', coordinateSystem: 'geo', symbolSize: function(val) { return val[2] / 10; }, showEffectOn: 'render', rippleEffect: { brushType: 'stroke' }, data: convertToScatterData(rawData) }]

5. 实战案例：新冠疫情分布热力图

结合真实场景演示完整实现流程：

5.1 数据预处理

# 合并行政区划代码与疫情数据 def merge_data(geo_df, covid_df): return pd.merge( geo_df, covid_df, left_on='full_code', right_on='area_code', how='left' ).fillna(0)

5.2 分级配色方案

visualMap: { pieces: [ {min: 1000, label: '>1000例', color: '#8b0000'}, {min: 500, max: 999, label: '500-999例', color: '#cd5c5c'}, {min: 100, max: 499, label: '100-499例', color: '#f08080'}, {min: 10, max: 99, label: '10-99例', color: '#fa8072'}, {min: 1, max: 9, label: '1-9例', color: '#ffa07a'}, {min: 0, max: 0, label: '无病例', color: '#f5f5f5'} ] }

5.3 信息窗口配置

tooltip: { trigger: 'item', formatter: function(params) { return `${params.name}<br/> 确诊: ${params.data.value}例<br/> 治愈率: ${(params.data.cured/params.data.value*100).toFixed(1)}%`; } }

在实际项目中，这种可视化方案帮助疾控部门快速识别高风险区域。通过添加时间轴控件，还可以实现疫情发展的动态追踪，为决策提供直观依据。