在Folium地图中嵌入交互式图表，核心思路是通过Folium的弹窗组件承载图表渲染结果，结合支持生成HTML格式输出的图表库完成实现，常用的组合是Folium搭配Plotly或者ECharts。
环境准备
首先需要安装必要的依赖库，确保Folium和图表库都能正常工作，执行以下命令安装依赖：
pip install folium plotly
核心实现步骤
1. 生成交互式图表并转换为HTML片段
以Plotly为例，先创建一个简单的折线图，然后将图表转换为独立的HTML片段，方便后续嵌入到Folium的弹窗中。
import plotly.graph_objects as go
import folium
# 生成示例折线图
fig = go.Figure()
fig.add_trace(go.Scatter(
x=[1, 2, 3, 4, 5],
y=[10, 15, 13, 17, 20],
mode='lines+markers',
name='示例数据'
))
# 设置图表布局
fig.update_layout(
title='月度数据趋势',
xaxis_title='月份',
yaxis_title='数值',
width=400,
height=300
)
# 将图表转换为HTML字符串，不包含完整的HTML结构
chart_html = fig.to_html(include_plotlyjs='inline', full_html=False)
2. 创建Folium地图并嵌入图表
创建Folium地图对象，添加标记点，将上一步生成的图表HTML片段放入弹窗中，实现点击标记点展示交互式图表的效果。
# 创建Folium地图，设置初始中心点和缩放级别
m = folium.Map(location=[39.9042, 116.4074], zoom_start=10)
# 添加标记点
marker = folium.Marker(
location=[39.9042, 116.4074],
popup=folium.Popup(html=chart_html, max_width=450),
tooltip='点击查看交互式图表'
)
# 将标记点添加到地图
marker.add_to(m)
# 保存地图为HTML文件
m.save('folium_with_chart.html')
注意事项
- 如果使用的是ECharts库，需要先将ECharts的图表配置和渲染代码拼接成完整的HTML片段，再嵌入到Folium弹窗中，注意转义HTML特殊字符。
- 弹窗的
max_width参数需要根据图表的宽度调整，避免图表显示不全。 - 如果图表需要加载外部JS资源，要确保生成的地图HTML文件能正常访问对应的资源地址，本地测试时可以使用内联JS的方式避免资源加载问题。
常见问题处理
如果嵌入后图表无法正常显示，可以先检查生成的地图HTML文件中，弹窗内的图表HTML片段是否完整，是否存在未转义的<、>、&等特殊字符。另外如果图表交互功能失效，可以排查是否是因为Folium弹窗的默认样式影响了图表的事件监听，适当调整弹窗的CSS样式即可解决。