flask数据用ECharts图表形式展现_flask如何引用echart图标

作者：笔触狂放9 | 2024-08-02 12:05:29

踩

flask如何引用echart图标

简单写一个，一个flask后台发送数据，一个前端ajax接收数据并用echarts图表展示

test.html


<html>
	<head>
		<!-- 引入 echarts.js -->
	    <script type="text/javascript" src="http://echarts.baidu.com/dist/echarts.js"></script>
	    <!-- 引入jquery.js -->
	    <script type="text/javascript" src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
	</head>
	<body>
		<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    	<div id="main" style="width: 900px;height:500px;"></div>
	</body>
	<script type="text/javascript">
        var a = echarts;
        var myChart = a.init(document.getElementById('main'));
         // 显示标题，图例和空的坐标轴
         myChart.setOption({
             title: {
                 text: '爬虫今日抓取数据图'
             },
             tooltip : {
            trigger: 'axis'
	        },
	        legend: {
	            data:['今日数据']
	        },
	        toolbox: {
	            show : true,
	            feature : {
	                mark : {show: true},
	                dataView : {show: true, readOnly: false},
	                magicType : {show: true, type: ['line', 'bar']},
	                // restore : {show: true},
	                // saveAsImage : {show: true}
	            }
	        },
	        calculable : true,
 
             xAxis : [
	            {
	                type : 'category',
	                boundaryGap : false,
	                data : []
	            }
	        ],
             yAxis : [
	            {
	                type : 'value',
	                axisLabel : {
	                    formatter: '{value}'
	                }
	            }
	        ],
             series : [
	            {
	                name:'最多数量',
	                type:'line',
	                data:[],
	                markPoint : {
	                    data : [
	                        {type : 'max', name: '最大值'},
	                        {type : 'min', name: '最小值'}
	                    ]
	                },
	                markLine : {
	                    data : [
	                        {type : 'average', name: '平均值'}
	                    ]
	                }
	            },]
         });
         myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
         var names=[];    //名称数组（实际用来盛放X轴坐标值）
         var nums=[];    //数量数组（实际用来盛放Y坐标值）
         $.ajax({
         type : "get",
//       async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
         url : "http://127.0.0.1:5000/echarts",    //请求发送到Servlet处
//       data : {},
         dataType : "json",        //返回数据形式为json
         success : function(result) {
             //请求成功时执行该函数内容，result即为服务器返回的json对象
             if (result) {
//           	alert(result["data"]);
                    for(var i=0;i<result["data"].length;i++){
//                  	alert(result["data"][i]["name"]);
                       names.push(result["data"][i]["name"]);    //挨个取出名称并填入类别数组
                     }
                    for(var i=0;i<result["data"].length;i++){
//                  	alert(result["data"][i]["num"]);
                        nums.push(result["data"][i]["num"]);    //挨个取出数量并填入销量数组
                      }
                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        xAxis: {
                            data: names
                        },
                        series: [{
                            // 根据名字对应到相应的系列
                            name: '数量',
                            data: nums
                        }]
                    });
 
             }
 
        },
         error : function(errorMsg) {
             //请求失败时执行该函数
         alert("图表请求数据失败!");
         myChart.hideLoading();
         }
    })
    </script>
</html>

test.py:


# -*- coding: utf-8 -*-
#__author__="ZJL"
 
from flask import Flask
from flask import request
from flask import Response
 
import json
 
app = Flask(__name__)
 
def Response_headers(content):
    resp = Response(content)
    resp.headers['Access-Control-Allow-Origin'] = '*'
    return resp
 
@app.route('/')
def hello_world():
    return Response_headers('hello world')
 
@app.route('/echarts')
def echarts():
    datas = {
		"data":[
			{"name":"allpe","num":100},
			{"name":"peach","num":123},
			{"name":"Pear","num":234},
			{"name":"avocado","num":20},
			{"name":"cantaloupe","num":1},
			{"name":"Banana","num":77},
			{"name":"Grape","num":43},
			{"name":"apricot","num":0}
		]
	}
    content = json.dumps(datas)
    resp = Response_headers(content)
    return resp
 
@app.errorhandler(403)
def page_not_found(error):
    content = json.dumps({"error_code": "403"})
    resp = Response_headers(content)
    return resp
 
@app.errorhandler(404)
def page_not_found(error):
    content = json.dumps({"error_code": "404"})
    resp = Response_headers(content)
    return resp
 
@app.errorhandler(400)
def page_not_found(error):
    content = json.dumps({"error_code": "400"})
    resp = Response_headers(content)
    return resp
 
@app.errorhandler(410)
def page_not_found(error):
    content = json.dumps({"error_code": "410"})
    resp = Response_headers(content)
    return resp
 
@app.errorhandler(500)
def page_not_found(error):
    content = json.dumps({"error_code": "500"})
    resp = Response_headers(content)
    return resp
 
if __name__ == '__main__':
    app.run(debug=True)#threaded=True,

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/918526