Flask结合Pyecharts实现单页多图表展示方案

Flask集成ECharts的两种主要路径

在Flask应用中集成ECharts图表，通常存在两种实现路径。

原生ECharts前端配置方案

第一种方案为原生ECharts集成方式。

该方式要求开发者在前端手动引入echarts.js库，创建对应的DOM容器，初始化ECharts实例，并从官方文档获取图表配置代码，最后将配置项赋值给实例以完成绘制。这种方法的显著缺点在于配置逻辑完全依赖JavaScript，对于后端开发人员而言，需要深入参与前端JS的配置开发，增加了前后端耦合度与开发复杂度。

此方式完全参照ECharts官方文档的标准做法，其实现逻辑与后端语言无关，无论是PHP、Java还是其他后端技术栈，处理流程均一致，具体参考地址见原文。

基于Pyecharts的后端配置方案

第二种方案是采用Pyecharts库。

Pyecharts的核心价值在于将ECharts的JavaScript配置选项（option）完全剥离，转而使用Python代码进行配置。它通过Python数据结构映射JS数据结构，使得后端开发人员仅需关注数据配置即可完成图表生成。这种模式在体验上类似于Matplotlib，但得益于ECharts强大的渲染能力，Pyecharts的功能更为丰富。

Pyecharts输出方式与Flask的兼容性分析

然而，Pyecharts提供了多种图表输出方式，但在与Flask框架的深度配合上，目前尚无一种方式能完美支持单页面多图表展示的需求，具体问题分析如下：

• render()方法：默认行为是在当前工作目录下生成一个render.html文件。这种默认行为在实际Web开发场景中较为罕见，且不符合Flask模板渲染的常规逻辑，显得不够灵活。
• render()方法传入路径参数：例如调用bar.render(“mycharts.html”)指定输出路径。虽然此方式允许自定义文件位置，但其本质仍是生成独立的HTML文件。在Web应用中，通常一个页面需要展示图表及其他数据内容，仅输出一个包含巨大图表的独立HTML文件无法满足复杂页面的布局需求。
• render_notebook()方法：该方法专为Jupyter Notebook环境设计，在Notebook中交互展示效果极佳。但本文讨论的是Flask Web应用，因此该方法不适用。
• render_embed()方法：源自Pyecharts文档中Flask章节的建议用法Markup(c.render_embed())。推测作者可能未深入实践Flask开发，因为该方法返回的是完整的HTML字符串。若尝试将结果传递给Flask模板，会发现它包裹了整个HTML结构，导致无法将图表嵌入到现有页面的特定区域，且单页只能展示一个由该方法生成的完整HTML块。
• chart.dump_options()方法：这是目前唯一认为能与Flask良好配合的方式，能够实现单页面绘制多个图表。尽管仍需开发者手动引入echarts.js、创建DOM容器、初始化实例并设置配置项，但其核心简化点在于图表的配置数据直接来源于Python服务端，实现了前后端配置的解耦。

基于dump_options的多图表实现代码

接下来提供使用chart.dump_options()方法在Flask网页中配置并展示多个图表的具体代码实现。

后端Python代码实现

后端Python代码逻辑如下：

@app.route("/show_pyecharts")
def show_pyecharts():
  bar = (
    Bar()
      .add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
      .add_yaxis("商家A", [5, 20, 36, 10, 75, 90])
  )
  # print(bar.render_embed())
  # print(bar.dump_options())
  return render_template(
    "show_pyecharts.html",
    bar_data=bar.dump_options()
  )

前端HTML模板结构

前端Flask模板代码结构如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="/static/echarts.min.js"></script>
</head>
<body>
<h1>柱状图</h1>
<div>
  <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  <div id="main" style="width: 600px;height:400px;"></div>
  <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption({{ bar_data | safe }});
  </script>
 
  <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  <div id="main2" style="width: 600px;height:400px;"></div>
  <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart2 = echarts.init(document.getElementById('main2'));
 
    // 指定图表的配置项和数据
    var option2 = {{ bar_data | safe }};
 
    // 使用刚指定的配置项和数据显示图表。
    myChart2.setOption(option2);
  </script>
</div>
 
</body>
</html>

最终页面展示效果如原图所示。

总结

总结

以上介绍了在Flask中使用Pyecharts在单个页面展示多个图表的具体方法，希望能为读者提供有益参考。如有任何疑问，欢迎留言交流，小编会及时回复。感谢大家的支持！若觉得本文对您有帮助，欢迎转载，请注明出处，谢谢！