Python Flask Jinja2 模板引擎：Echarts 图表实现人口普查男女对比

这是一段基于模板的前端代码，使用了 Python 的 Flask 框架中的 Jinja2 模板引擎语法。代码中使用了扩展（extends）和块（block）的定义方式，继承了'base.html' 模板，并在'body_block' 块中定义了一个标题和一个 Echarts 图表。该图表使用了 Echarts 库实现，通过指定图表的配置项和数据，展示了历次全国人口普查男女人数对比的柱状图。其中，x 轴代表人口数量，y 轴代表性别，数据分别对应男性和女性人口数量。最后，通过调用 Echarts 的 setOption 方法将图表显示在页面上。

{% extends 'base.html' %}
{% block body_block %}
    <h1>{{ title }}</h1>
    <div class="echarts" id="echarts-line-chart" style="height: 800px;"></div>
     <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('echarts-line-chart'));
      // 指定图表的配置项和数据
      var option = {
          title: {
              text: '历次全国人口普查男女人数对比'
          },
          tooltip: {
              trigger: 'axis',
              axisPointer: {
                  type: 'shadow'
              }
          },
          legend: {},
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          xAxis: {
              type: 'value',
              boundaryGap: [0, 0.01]
          },
          yAxis: {
              type: 'category',
              data: {{ label | safe}}
          },
          series: [
              {
                  name: '男性人口数量：',
                  type: 'bar',
                  data: {{ data }}
              },
              {
                  name: '女性人口数量：',
                  type: 'bar',
                  data: {{ data2 }}
              }
          ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);

    </script>
{% endblock %}

该代码演示了如何将 Echarts 图表与 Python Flask 框架中的 Jinja2 模板引擎相结合，为前端页面提供动态数据可视化功能。