如何在Pyecharts Grid图表中实现双图同步滚轮缩放？

要实现Grid内两个同X轴图表的同步滚轮缩放，可通过自定义JavaScript代码调用ECharts原生的echarts.connect方法实现，Pyecharts支持通过add_js_funcs注入自定义JS逻辑，具体修改如下：

修改后的完整代码 #

from pyecharts import options as opts
from pyecharts.charts import Bar, Grid
from pyecharts.globals import CurrentConfig, NotebookType
from random import randrange

# Jupyter Lab 环境配置
CurrentConfig.NOTEBOOK_TYPE = NotebookType.JUPYTER_LAB

x = list(range(0, 100))

# 给两个图表设置唯一chart_id，用于JS中获取实例
a = Bar(init_opts=opts.InitOpts(chart_id="bar_a"))
a.add_xaxis(x)
a.add_yaxis("ax", [randrange(100) for _ in range(100)])
a.set_global_opts(
    title_opts=opts.TitleOpts(title="Bar-a"),
    datazoom_opts=[opts.DataZoomOpts(type_="inside")],
)

b = Bar(init_opts=opts.InitOpts(chart_id="bar_b"))
b.add_xaxis(x)
b.add_yaxis("bx", [randrange(100) for _ in range(100)])
b.set_global_opts(
    title_opts=opts.TitleOpts(title="Bar-b"),
    datazoom_opts=[opts.DataZoomOpts(type_="inside")],
)

gr = Grid()
gr.add(a, grid_opts=opts.GridOpts(height="30%"))
gr.add(b, grid_opts=opts.GridOpts(pos_top="50%", height="30%"))

# 注入自定义JS，关联两个图表实例实现同步缩放
gr.add_js_funcs("echarts.connect(['bar_a', 'bar_b']);")

gr.render_notebook()

关键修改说明 #

• 为每个Bar图表指定chart_id：通过InitOpts设置唯一标识，让JS能精准定位到对应的ECharts实例。
• 调用add_js_funcs注入联动逻辑：echarts.connect会将指定ID的图表实例关联，实现包括datazoom滚轮缩放在内的所有交互同步。

内容的提问来源于stack exchange，提问作者GDN