关于flask入门教程-ajax+echarts简单实现一

python与大数据分析

发布于 2022-03-11 17:16:14

8500

发布于 2022-03-11 17:16:14

文章被收录于专栏：python与大数据分析

ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。

本文通过echarts官网上的一个标准样例开始flask+ajax+echarts的第一步。

第一步：下面是从echarts官网上下载的一个样例，具体参见：https://echarts.apache.org/handbook/zh/get-started，在flask中进行路由定义即可。

@app.route('/echart1')
def bigscreen():
return render_template('echartexample.html')

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <!--script src="..\static\js\echarts.min.js"></script-->
    <script src="/static/js/echarts.min.js"></script>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
 </body>
 </html>

第二步：在flask中增加ajax逻辑接口，通过jsonfiy进行数据组装和返回。

@app.route('/getjson2', methods=['GET'])
def getjson2():
    reporttitle = '销量测试'
    goodstype = ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    salenum = [5, 20, 36, 10, 10, 20]
    data = {'reporttitle': reporttitle, 'goodstype': goodstype, 'salenum': salenum, }
    return jsonify({'reporttitle': reporttitle, 'goodstype': goodstype, 'salenum': salenum, })


@app.route('/echartdemo2')
def echartdemo2():
    return render_template('echartdemo2.html')

在html中增加ajax代码实现。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <!--script src="..\static\js\echarts.min.js"></script-->
    <script src="/static/js/echarts.min.js"></script>
    <script src="/static/js/jquery.js"></script>
  </head>
  <body>
    <!-- 为 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.option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: []
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: []
          }
        ]
      };
   alert('waiting....');
      // 使用刚指定的配置项和数据显示图表。
      myChart.showLoading();
      
      $.ajax({
       url:'/getjson2',
       result:{},
       type:'GET',
       dataType:'json',
       success:function(result){
         myChart.hideLoading();
          // 填入数据
          myChart.setOption({
             title: {
                    text: '异步数据加载'
                 },
             xAxis:{
                data:result.goodstype
             },
             yAxis: {},
             series:[{
                name:'销量',
                        type: 'bar',
                data:result.salenum
             }]
          })
       },
       error:function (msg) {
         console.log(msg);
                   alert('系统发生错误');
            }
      })
      
      
    </script>
 </body>
 </html>

第三步：通过数据库返回结果集再生成json，封装成路由，由前台调用

关于数据库返回json可参考前文

@app.route('/getjson3', methods=['GET'])
def getjson3():
    sql = 'select goodstype,salenum from saledata'
    result = db.session.execute(sql)

    # jsonify data1
    result = result.mappings().all()
    goodstype = [x['goodstype'] for x in result]
    salenum = [x['salenum'] for x in result]
    data = jsonify({'goodstype': goodstype, 'salename': salenum})
    # b'{"goodstype":["\\u886c\\u886b","\\u7f8a\\u6bdb\\u886b","\\u96ea\\u7eba\\u886b","\\u88e4\\u5b50","\\u9ad8\\u8ddf\\u978b","\\u889c\\u5b50"],
    # "salename":[5,20,36,10,10,20]}\n'
    # jsonify data2
    data = jsonify(goodstype=goodstype, salename=salenum)
    # b'{"goodstype":["\\u886c\\u886b","\\u7f8a\\u6bdb\\u886b","\\u96ea\\u7eba\\u886b","\\u88e4\\u5b50","\\u9ad8\\u8ddf\\u978b","\\u889c\\u5b50"],
    # "salename":[5,20,36,10,10,20]}\n'
    # jsonify data3
    data = jsonify(goodstype=[x['goodstype'] for x in result],
                   salenum=[x['salenum'] for x in result])
    # b'{"goodstype":["\\u886c\\u886b","\\u7f8a\\u6bdb\\u886b","\\u96ea\\u7eba\\u886b","\\u88e4\\u5b50","\\u9ad8\\u8ddf\\u978b","\\u889c\\u5b50"],
    # "salenum":[5,20,36,10,10,20]}\n'
    # jsonify data4
    result = db.session.execute(sql).fetchall()
    data = jsonify(goodstype=[x[0] for x in result],
                   salenum=[x[1] for x in result])
    # b'{"goodstype":["\\u886c\\u886b","\\u7f8a\\u6bdb\\u886b","\\u96ea\\u7eba\\u886b","\\u88e4\\u5b50","\\u9ad8\\u8ddf\\u978b","\\u889c\\u5b50"],
    # "salenum":[5,20,36,10,10,20]}\n'
    return data


@app.route('/echartdemo3')
def echartdemo3():
    return render_template('echartdemo3.html')

第三步的HTML文件和第二步完全相同

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <!--script src="..\static\js\echarts.min.js"></script-->
    <script src="/static/js/echarts.min.js"></script>
    <script src="/static/js/jquery.js"></script>
  </head>
  <body>
    <!-- 为 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.option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: []
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: []
          }
        ]
      };
   
      // 使用刚指定的配置项和数据显示图表。
      myChart.showLoading();
      
      $.ajax({
       url:'/getjson3',
       result:{},
       type:'GET',
       dataType:'json',
       success:function(result){
         myChart.hideLoading();
          // 填入数据
          myChart.setOption({
             title: {
                    text: '异步数据加载'
                 },
             xAxis:{
                data:result.goodstype
             },
             yAxis: {},
             series:[{
                name:'销量',
                        type: 'bar',
                data:result.salenum
             }]
          })
       },
       error:function (msg) {
         console.log(msg);
                   alert('系统发生错误');
            }
      })
      
      
    </script>
 </body>
 </html>