pyecharts的grid和page仅为布局容器，不支持图表间事件联动；grid用于同页多图对齐与坐标共享，page用于垂直分页展示，真联动需原生js或streamlit等框架。
Pyecharts 的 Grid 和 Page 都不能真正实现“联动”（比如点击柱状图某柱子，折线图高亮对应时间点），它们只是布局容器——把多个独立图表拼在一起或分页展示。真要联动，得上 echarts 原生 JS 或用 Streamlit/Plotly 等支持交互事件的框架。
Grid 适合同页面内多图对齐排布，但各图完全独立
Grid 的作用是让多个图表共享横/纵坐标轴、对齐位置、节省空白，常用于需要视觉对比的场景（比如同一时间轴下并排展示销量和利润率）。但它不传递任何事件，点击、悬停、缩放都互不影响。
-
Grid必须配合grid_opts设置宽高比例，否则图表可能被压缩变形；常用写法：grid_opts=opts.GridOpts(pos_left="10%", pos_right="8%", height="60%") - 每个图表添加进
Grid时要用.add()，且必须传入grid_index（从 0 开始）来指定插入哪个网格区域；没设或冲突会导致渲染失败或覆盖 - 若图表类型差异大（如一个
Bar一个Map），Grid容易错位——因为Map默认带地理坐标系，而Bar是直角坐标系，此时建议改用Page或直接用 HTML 模板手动拼接
Page 适合打包多个图表到单个 HTML，但仍是静态分页
Page 本质是把多个图表依次追加进一个 HTML 文件，每图占一屏，顶部生成导航栏。它不合并数据、不共享事件、也不自动响应窗口大小变化——用户滚动或点击导航跳转，仅此而已。
- 调用顺序很重要：
Page().add(chart1, chart2, ...)中，图表渲染顺序即 HTML 中 DOM 顺序，影响加载优先级和首屏内容 - 如果某个图表数据量大（如万级点的
Line），放在Page靠前位置可能导致首屏白屏时间长；可考虑用set_global_opts(renderer="svg")降低初始渲染压力 -
Page导出的 HTML 默认无样式定制入口，想统一字体/主题需手动修改生成后的 HTML，或提前在每个图表中用init_opts=opts.InitOpts(theme="light")统一设置
为什么你看到的“联动效果”大概率是假象？
网上不少教程说“用 Grid + on_click 实现联动”，其实那是混淆了概念：pyecharts 的 on_click 是 Python 层模拟的回调钩子，只在 Jupyter 或服务端调试时生效，导出为 HTML 后完全失效——浏览器里运行的是纯前端 echarts 实例，Python 进程早已退出。
- 真正能跨图通信的方式只有：① 手动写 JS 注入 HTML，在
chart.on("click", ...)里调用另一个 chart 的dispatchAction；② 改用Flask+Ajax做前后端联动，代价是部署复杂度飙升 - 如果你只是想“视觉上有关联”，比如所有图共用同一时间筛选器，更现实的做法是：用
Timeline做时间轴动画，或导出后用 JS 插件（如echarts-gl或自定义dataZoom）做同步缩放 - 注意 Pyecharts v2.x 已弃用旧版
OverLap，别在代码里混用 v1 的写法，否则render_notebook()能跑，render()直接报AttributeError: 'NoneType' object has no attribute 'js_host'
真正需要联动的场景，别硬套 Grid 或 Page。它们的价值在于快速交付多图报告，而不是构建交互式仪表盘。动手前先问自己：用户是否必须实时响应点击？数据更新频率是否高于秒级？答案若是肯定，就该换技术栈了。
Python免费学习笔记（深入）：立即使用
在学习笔记中，你将探索 Python 的核心概念和高级技巧！
