Echarts散点图 HTML 模板代码详解

这是一个使用Echarts图表库制作散点图的HTML模板代码。代码中使用了模板引擎语法，通过继承基础模板和定义块来组织页面结构。

该代码中在页面主体部分（body_block）嵌入了一个标题和一个id为'echarts-line-chart'的div元素，用于显示Echarts散点图。在div元素下方嵌入了JavaScript脚本，用于初始化Echarts实例和设置图表的配置项和数据。最后通过调用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 = {
  xAxis: {},
  yAxis: {},
  series: [
    {
      type: 'scatter',
      data: [
          {{ data }}

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

    </script>
{% endblock %}