当前位置：首页 > news >正文

pyecharts可视化图表组合组件_Grid：打造专业数据仪表盘

news 2025/8/18 7:00:15

pyecharts可视化图表组合组件_Grid：打造专业数据仪表盘

pyecharts可视化图表组合组件_Grid：打造专业数据仪表盘
- 引言
- 图表1：Grid-Overlap-多X/Y轴示例
- 代码解析
- - 1. 图表创建
  - 2. 多轴配置
  - 3. 图表重叠
  - 4. Grid布局
- 效果与应用
- 图表2：Grid-水平布局示例
- 代码解析
- - 1. 独立图表创建
  - 2. 水平布局配置
  - 3. 标题与图例位置
  - 4. 简洁的代码结构
- 效果与应用
- 效果与应用
- 图表3：Grid-多Y轴示例
- 代码解析
- - 1. 数据复用
  - 2. 多Y轴配置
  - 3. 简化的图表结构
  - 4. 更紧凑的布局
- 效果与应用
- 图表4：Grid-垂直布局示例
- 代码解析
- - 1. 独立图表创建
  - 2. 垂直布局配置
  - 3. 标题与图例位置
  - 4. 简洁的代码结构
- 效果与应用
- 图表5：Grid-地理坐标与柱状图组合示例
- 代码解析
- - 1. 多类型图表组合
  - 2. 复杂布局配置
  - 3. 数据处理技巧
  - 4. 图例与视觉配置
- 效果与应用
- Grid组件使用总结

引言

在数据可视化领域，如何将多个图表有机地组合在一起，形成一个直观、专业的数据仪表盘，是一个常见的挑战。pyecharts库中的Grid组件为我们提供了一个强大的解决方案。通过Grid组件，我们可以灵活地排列多个图表，实现复杂的布局设计，打造出专业级的数据可视化仪表盘。

本文将通过五个实用示例，详细介绍Grid组件的各种用法，从基础的多轴配置到复杂的图表组合，再到灵活的布局设计。每个示例都包含完整的Python代码、详细的代码解析和实际应用场景说明，帮助你全面掌握Grid组件的使用技巧，提升数据可视化水平。

让我们从第一个实战案例开始，学习如何创建包含多X/Y轴的Grid图表。

图表1：Grid-Overlap-多X/Y轴示例

这个示例展示了如何在Grid组件中组合柱状图和折线图，并配置多个X/Y轴来展示多维度数据。这种图表特别适合展示相关性数据，比如气候变化中的温度、降水量和蒸发量之间的关系。

from pyecharts import options as opts 
from pyecharts.charts import Bar, Grid, Line # 创建第一个柱状图
bar = ( Bar() .add_xaxis(["{}月".format(i) for i in range(1, 13)]) .add_yaxis( "蒸发量", [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3], yaxis_index=0, color="#d14a61", ) .add_yaxis( "降水量", [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3], yaxis_index=1, color="#5793f3", ) .extend_axis( yaxis=opts.AxisOpts( name="蒸发量", type_="value", min_=0, max_=250, position="right", axisline_opts=opts.AxisLineOpts( linestyle_opts=opts.LineStyleOpts(color="#d14a61") ), axislabel_opts=opts.LabelOpts(formatter="{value} ml"), ) ) .extend_axis( yaxis=opts.AxisOpts( type_="value", name="温度", min_=0, max_=25, position="left", axisline_opts=opts.AxisLineOpts( linestyle_opts=opts.LineStyleOpts(color="#675bba") ), axislabel_opts=opts.LabelOpts(formatter="{value} °C"), splitline_opts=opts.SplitLineOpts( is_show=True, linestyle_opts=opts.LineStyleOpts(opacity=1) ), ) ) .set_global_opts( yaxis_opts=opts.AxisOpts( name="降水量", min_=0, max_=250, position="right", offset=80, axisline_opts=opts.AxisLineOpts( linestyle_opts=opts.LineStyleOpts(color="#5793f3") ), axislabel_opts=opts.LabelOpts(formatter="{value} ml"), ), title_opts=opts.TitleOpts(title="Grid-Overlap-多 X/Y 轴示例"), tooltip_opts=opts.TooltipOpts(trigger="axis", axis_pointer_type="cross"), legend_opts=opts.LegendOpts(pos_left="25%"), ) 
) # 创建第一个折线图
line = ( Line() .add_xaxis(["{}月".format(i) for i in range(1, 13)]) .add_yaxis( "平均温度", [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2], yaxis_index=2, color="#675bba", label_opts=opts.LabelOpts(is_show=False), ) 
) # 创建第二个柱状图
bar1 = ( Bar() .add_xaxis(["{}月".format(i) for i in range(1, 13)]) .add_yaxis( "蒸发量 1", [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3], color="#d14a61", xaxis_index=1, yaxis_index=3, ) .add_yaxis( "降水量 2", [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3], color="#5793f3", xaxis_index=1, yaxis_index=4, ) .extend_axis( yaxis=opts.AxisOpts( name="蒸发量", type_="value", min_=0, max_=250, position="right", axisline_opts=opts.AxisLineOpts( linestyle_opts=opts.LineStyleOpts(color="#d14a61") ), axislabel_opts=opts.LabelOpts(formatter="{value} ml"), ) ) .extend_axis( yaxis=opts.AxisOpts( type_="value", name="温度", min_=0, max_=25, position="left", axisline_opts=opts.AxisLineOpts( linestyle_opts=opts.LineStyleOpts(color="#675bba") ), axislabel_opts=opts.LabelOpts(formatter="{value} °C"), splitline_opts=opts.SplitLineOpts( is_show=True, linestyle_opts=opts.LineStyleOpts(opacity=1) ), ) ) .set_global_opts( xaxis_opts=opts.AxisOpts(grid_index=1), yaxis_opts=opts.AxisOpts( name="降水量", min_=0, max_=250, position="right", offset=80, axisline_opts=opts.AxisLineOpts( linestyle_opts=opts.LineStyleOpts(color="#5793f3") ), axislabel_opts=opts.LabelOpts(formatter="{value} ml"), ), tooltip_opts=opts.TooltipOpts(trigger="axis", axis_pointer_type="cross"), legend_opts=opts.LegendOpts(pos_left="65%"), ) 
) # 创建第二个折线图
line1 = ( Line() .add_xaxis(["{}月".format(i) for i in range(1, 13)]) .add_yaxis( "平均温度 1", [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2], color="#675bba", label_opts=opts.LabelOpts(is_show=False), xaxis_index=1, yaxis_index=5, ) 
) # 重叠图表
overlap_1 = bar.overlap(line) 
overlap_2 = bar1.overlap(line1) # 创建Grid布局
grid = ( Grid(init_opts=opts.InitOpts(width="1200px", height="800px")) .add( overlap_1, grid_opts=opts.GridOpts(pos_right="58%"), is_control_axis_index=True ) .add(overlap_2, grid_opts=opts.GridOpts(pos_left="58%"), is_control_axis_index=True) #.render("grid_overlap_multi_xy_axis.html") 
) 
grid.render_notebook()

代码解析

这个示例展示了Grid组件的高级用法，让我们逐步分析其核心部分：

1. 图表创建

代码中创建了四个主要图表对象：

bar: 左侧的柱状图，展示蒸发量和降水量
line: 左侧的折线图，展示平均温度
bar1: 右侧的柱状图，展示另一组蒸发量和降水量数据
line1: 右侧的折线图，展示另一组平均温度数据

2. 多轴配置

这个示例的关键点是使用了多个X/Y轴来展示不同维度的数据：

通过extend_axis方法添加了额外的Y轴
使用yaxis_index和xaxis_index参数指定数据系列使用的轴
对每个轴设置了不同的颜色、标签格式和位置

3. 图表重叠

使用overlap方法将折线图重叠在柱状图上：

overlap_1 = bar.overlap(line): 将温度折线图重叠在左侧柱状图上
overlap_2 = bar1.overlap(line1): 将温度折线图重叠在右侧柱状图上

4. Grid布局

最后，使用Grid组件将两个重叠图表放置在同一画布上：

pos_right="58%": 左侧图表占据画布的42%宽度
pos_left="58%": 右侧图表占据画布的42%宽度
is_control_axis_index=True: 允许Grid控制轴索引

效果与应用

在这里插入图片描述

核心优势：这种组合方式可以在一个视图中同时展示空间分布数据和具体分类数据，便于理解区域差异与具体数值的关系。地理坐标图提供了宏观视角，而柱状图则展示了详细对比。

适用场景：

区域销售数据展示
人口分布与经济指标对比
资源分布与利用效率分析
任何需要结合空间和分类数据的场景

使用技巧：调整pos_top、pos_right和pos_left参数时，需要考虑不同图表的大小和比例，确保布局平衡。对于地理坐标图，可以通过maptype参数切换不同的地图级别（如国家、省份、城市）。

图表2：Grid-水平布局示例

这个示例展示了如何在Grid组件中实现水平布局，将图表左右排列。这种布局方式特别适合展示两组并列的数据，便于横向对比分析。

from pyecharts import options as opts 
from pyecharts.charts import Grid, Line, Scatter 
from pyecharts.faker import Faker scatter = (Scatter().add_xaxis(Faker.choose()).add_yaxis("商家A", Faker.values()).add_yaxis("商家B", Faker.values()).set_global_opts(title_opts=opts.TitleOpts(title="Grid-Scatter"),legend_opts=opts.LegendOpts(pos_left="20%"),)
)
line = (Line().add_xaxis(Faker.choose()).add_yaxis("商家A", Faker.values()).add_yaxis("商家B", Faker.values()).set_global_opts(title_opts=opts.TitleOpts(title="Grid-Line", pos_right="5%"),legend_opts=opts.LegendOpts(pos_right="20%"),)
)grid = (Grid().add(scatter, grid_opts=opts.GridOpts(pos_left="55%")).add(line, grid_opts=opts.GridOpts(pos_right="55%"))#.render("grid_horizontal.html")
)
grid.render_notebook()

代码解析

这个示例展示了Grid组件的水平布局用法，让我们分析其核心特点：

1. 独立图表创建

代码中创建了两个独立的图表对象：

scatter: 散点图，展示商家A和商家B的数据分布
line: 折线图，展示相同商家的数据趋势

2. 水平布局配置

Grid的水平布局通过以下参数实现：

pos_left="55%": 散点图占据画布左侧55%的空间
pos_right="55%": 折线图占据画布右侧45%的空间
这种配置实现了图表的左右排列，便于横向对比

3. 标题与图例位置

为了适应水平布局，两个图表的标题和图例位置分别进行了调整：

散点图：标题居中，图例位于左侧20%
折线图：标题位于右侧5%，图例位于右侧20%

4. 简洁的代码结构

这个示例的代码结构简洁明了，适合理解Grid的水平布局原理。通过Faker模块生成模拟数据，简化了代码示例。

效果与应用

在这里插入图片描述

核心优势：水平布局使图表在视觉上形成横向对比，特别适合展示两组并列的数据。这种布局方式充分利用了画布的水平空间，避免了垂直布局可能产生的过长页面。

适用场景：

数据分布与趋势对比
不同算法或模型的结果对比
任何需要左右对比的数据展示场景

使用技巧：调整pos_left和pos_right参数时，确保两个图表之间留出足够的空间，避免标题和图例相互重叠。对于复杂图表，可以结合pos_top和pos_bottom参数进一步优化布局。

效果与应用

核心优势：这种多图表组合方式可以在一个视图中展示多个相关数据集，便于进行对比分析。多轴设计解决了不同量级数据展示的问题。

适用场景：

气象数据展示（温度、降水量、蒸发量等）
经济指标分析（GDP、CPI、PMI等）
销售数据对比（不同产品、不同地区）
环境监测数据仪表盘

使用技巧：确保不同图表之间有明确的视觉区分（如颜色、线型），同时保持整体风格的一致性。对于多轴图表，清晰的标签和图例至关重要。

图表3：Grid-多Y轴示例

这个示例展示了如何在Grid组件中配置多个Y轴，实现不同量级数据的同时展示。通过这种方式，我们可以在一个图表中对比蒸发量、降水量和温度这三种不同单位的数据。

from pyecharts import options as opts 
from pyecharts.charts import Bar, Grid, Line x_data = ["{}月".format(i) for i in range(1, 13)] 
bar = ( Bar() .add_xaxis(x_data) .add_yaxis( "蒸发量", [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3], yaxis_index=0, color="#d14a61", ) .add_yaxis( "降水量", [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3], yaxis_index=1, color="#5793f3", ) .extend_axis( yaxis=opts.AxisOpts( name="蒸发量", type_="value", min_=0, max_=250, position="right", axisline_opts=opts.AxisLineOpts( linestyle_opts=opts.LineStyleOpts(color="#d14a61") ), axislabel_opts=opts.LabelOpts(formatter="{value} ml"), ) ) .extend_axis( yaxis=opts.AxisOpts( type_="value", name="温度", min_=0, max_=25, position="left", axisline_opts=opts.AxisLineOpts( linestyle_opts=opts.LineStyleOpts(color="#675bba") ), axislabel_opts=opts.LabelOpts(formatter="{value} °C"), splitline_opts=opts.SplitLineOpts( is_show=True, linestyle_opts=opts.LineStyleOpts(opacity=1) ), ) ) .set_global_opts( yaxis_opts=opts.AxisOpts( name="降水量", min_=0, max_=250, position="right", offset=80, axisline_opts=opts.AxisLineOpts( linestyle_opts=opts.LineStyleOpts(color="#5793f3") ), axislabel_opts=opts.LabelOpts(formatter="{value} ml"), ), title_opts=opts.TitleOpts(title="Grid-多 Y 轴示例"), tooltip_opts=opts.TooltipOpts(trigger="axis", axis_pointer_type="cross"), ) 
) line = ( Line() .add_xaxis(x_data) .add_yaxis( "平均温度", [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2], yaxis_index=2, color="#675bba", label_opts=opts.LabelOpts(is_show=False), ) 
) bar.overlap(line) 
grid = Grid() 
grid.add(bar, opts.GridOpts(pos_left="5%", pos_right="20%"), is_control_axis_index=True) 
#grid.render("grid_multi_yaxis.html") 
grid.render_notebook()

代码解析

这个示例展示了如何在单个Grid布局中配置多个Y轴，让我们分析其核心特点：

1. 数据复用

代码首先定义了x_data变量存储月份数据，然后在柱状图和折线图中复用这个变量，提高了代码的可维护性。

2. 多Y轴配置

与图表1类似，这个示例也使用了多个Y轴：

右侧主Y轴：展示降水量（单位：ml）
右侧次Y轴：展示蒸发量（单位：ml）
左侧Y轴：展示温度（单位：°C）

3. 简化的图表结构

相比图表1，这个示例更加简洁：

只使用了一个柱状图（bar）和一个折线图（line）
直接使用bar.overlap(line)将折线图重叠在柱状图上
Grid布局也更加简单，只包含一个图表区域

4. 更紧凑的布局

通过pos_left="5%", pos_right="20%"参数设置，使图表占据了更大的画布空间，布局更加紧凑。

效果与应用

在这里插入图片描述

核心优势：这种配置方式适合展示多种不同量级的数据，同时保持图表的简洁性。温度数据（°C）和降水量/蒸发量数据（ml）在量级上有很大差异，但通过多Y轴配置可以同时清晰展示。

适用场景：

气象数据展示
环境监测指标分析
经济数据对比（如GDP与CPI）
任何需要同时展示不同量级数据的场景

使用技巧：对于只有一个主要图表区域的场景，可以直接使用bar.overlap(line)简化代码，无需创建单独的overlap对象。

图表4：Grid-垂直布局示例

这个示例展示了如何在Grid组件中实现垂直布局，将图表上下排列。这种布局方式特别适合展示具有时间序列关系或需要垂直对比的数据。

from pyecharts import options as opts 
from pyecharts.charts import Bar, Grid, Line 
from pyecharts.faker import Faker bar = (Bar().add_xaxis(Faker.choose()).add_yaxis("商家A", Faker.values()).add_yaxis("商家B", Faker.values()).set_global_opts(title_opts=opts.TitleOpts(title="Grid-Bar"))
)
line = (Line().add_xaxis(Faker.choose()).add_yaxis("商家A", Faker.values()).add_yaxis("商家B", Faker.values()).set_global_opts(title_opts=opts.TitleOpts(title="Grid-Line", pos_top="48%"),legend_opts=opts.LegendOpts(pos_top="48%"),)
)grid = (Grid().add(bar, grid_opts=opts.GridOpts(pos_bottom="60%")).add(line, grid_opts=opts.GridOpts(pos_top="60%"))#.render("grid_vertical.html")
)
grid.render_notebook()

代码解析

这个示例展示了Grid组件的垂直布局用法，让我们分析其核心特点：

1. 独立图表创建

代码中创建了两个独立的图表对象：

bar: 柱状图，展示商家A和商家B的数据对比
line: 折线图，展示相同商家的数据趋势

2. 垂直布局配置

Grid的垂直布局通过以下参数实现：

pos_bottom="60%": 柱状图占据画布底部40%的空间
pos_top="60%": 折线图占据画布顶部40%的空间
中间留出20%的空间作为分隔，避免图表重叠

3. 标题与图例位置

为了适应垂直布局，折线图的标题和图例位置通过pos_top="48%"参数调整，确保它们显示在折线图区域内。

4. 简洁的代码结构

相比前两个示例，这个示例的代码更加简洁，适合初学者理解Grid的基本布局原理。

效果与应用

在这里插入图片描述

核心优势：垂直布局使图表在视觉上更加清晰，特别适合展示两组相关但不重叠的数据。这种布局方式充分利用了画布的垂直空间，避免了水平布局可能产生的拥挤感。

适用场景：

数据趋势对比（如销售额与增长率）
时间序列分析（如月度数据与季度汇总）
任何需要上下对比的数据展示场景

使用技巧：调整pos_bottom和pos_top参数时，确保两个图表之间留出足够的空间，避免标题和图例相互重叠。对于复杂图表，可以结合pos_left和pos_right参数进一步优化布局。

图表5：Grid-地理坐标与柱状图组合示例

这个示例展示了如何在Grid组件中组合地理坐标图和柱状图，实现空间数据与分类数据的同时展示。这种组合方式特别适合展示区域分布与具体数据的关系，如各省份销售数据与全国分布的对比。

from pyecharts import options as opts 
from pyecharts.charts import Bar, Geo, Grid 
from pyecharts.faker import Faker bar = (Bar().add_xaxis(Faker.choose()).add_yaxis("商家A", Faker.values()).add_yaxis("商家B", Faker.values()).set_global_opts(legend_opts=opts.LegendOpts(pos_left="20%"))
)
geo = (Geo().add_schema(maptype="china").add("geo", [list(z) for z in zip(Faker.provinces, Faker.values())]).set_series_opts(label_opts=opts.LabelOpts(is_show=False)).set_global_opts(visualmap_opts=opts.VisualMapOpts(),title_opts=opts.TitleOpts(title="Grid-Geo-Bar"),)
)grid = (Grid().add(bar, grid_opts=opts.GridOpts(pos_top="50%", pos_right="75%")).add(geo, grid_opts=opts.GridOpts(pos_left="60%"))#.render("grid_geo_bar.html")
)
grid.render_notebook()