flask数据用ECharts图表形式展现

简单写一个,一个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,







相关推荐
<p style="font-size:16px;"> <span style="font-size:18px;"><span style="background-color:#FFFFFF;">Python 数据分析+pyecharts 可视化 + Flask Web端服务 + 2大真实项目 手把手实战教程.</span></span> </p> <p style="font-size:16px;"> Python数据分析课程以Python为核心工具,结合其工具包pyecharts+开发IDEA pycharm + web 框架Flask。课程以案例为中心,结合案例讲解让同学们更清晰的掌握每一个知识点的应与工作流程。 </p> <p style="font-size:16px;"> <strong>2大项目案例: 重点讲解 开发架构 + 部署上线流程,手把手实战教学。 </strong> </p> <p style="font-size:16px;"> 1. 开发架构 </p> <p style="font-size:16px;"> (1)基于PyCharm + Flask + Echarts + Python+Pandas 组合进行数据分析全栈开发 </p> <p style="font-size:16px;"> (2)PyCharm: 项目开发的IDEA; </p> <p style="font-size:16px;"> (3)Flask:作为WEB框架,主要连接后端服务数据。主要演示: 前后端分离架构 + 模板直接渲染架构; </p> <p style="font-size:16px;"> (4)Echarts: 这里使pyecharts 作为可视化数据展示; </p> <p style="font-size:16px;"> (5)Python: 作为后端数据生成的语言; </p> <p style="font-size:16px;"> (6)Pandas: 主要作为数据分析库; </p> <p style="font-size:16px;"> 2 部署线上服务案例 </p> <p style="font-size:16px;"> (1)资讯类项目-基于Flask 模板渲染 词云; </p> <p style="font-size:16px;"> (2)人口统计项目-基于Flask 前后端分离 Line 和 Bar 组合 数据统计; </p> <p style="font-size:16px;"> <strong>课程特色</strong> </p> <p style="font-size:16px;"> 课程风格通俗易懂 </p> <p style="font-size:16px;"> 案例内容持续更新 </p> <p style="font-size:16px;"> 简单易懂,接地气的案例 </p> <p style="font-size:16px;"> 有效,提供所有数据和代码 </p> <p style="font-size:16px;"> <img src="https://img-bss.csdn.net/201908291440447128.png" alt="" /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <img src="https://img-bss.csdn.net/201908291440543352.png" alt="" /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <img src="https://img-bss.csdn.net/201908291441085943.png" alt="" /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <img src="https://img-bss.csdn.net/201908291441198368.png" alt="" /> </p>
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页