Python Django 模板引擎 - 使用 Echarts 绘制商品销量图表

这是一个使用 Django 模板引擎的 HTML 页面，继承了一个名为 'base.html' 的基础模板。在页面中定义了一个名为 'body_block' 的块，可以在基础模板中被引用。

页面中包含一个标题为 {{ title }} 的一级标题和一个 class 为 'echarts' 的 div 容器，用于显示一个 echarts 图表。在 JavaScript 部分，使用 echarts.init() 方法初始化一个 echarts 实例，并定义了一个名为 option 的对象，用于设置图表的配置项和数据。其中，图表的标题为 '平台商品销量TOP10'，图例的名称为 '人口数'，x 轴的数据为 {{ label|safe }}，y 轴无特殊设置，图表的类型为柱状图，数据为 {{ data }}。

最后，使用 myChart.setOption(option) 方法将配置项和数据应用到图表中，显示图表。

{% 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: '平台商品销量TOP10'
        },
        tooltip: {},
        legend: {
          data: ['人口数']
        },
        xAxis: {
          data: {{ label|safe}}
        },
        yAxis: {},
        series: [
          {
            name: '数量',
            type: 'bar',
            data: {{ data }}
          }
        ]
      };

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

    </script>
{% endblock %}