Flask结合ECharts实现在线可视化效果,超级详细!
Flask结合ECharts实现在线可视化效果,超级详细!
相信大家都知道这个吧Flask!——它是微型Python框架
一、Flask基本介绍
Flask 是一个微型的 Python 开发的 Web 框架
Flask一般是Python开发者最常用的网站框架,原因就是因为Flask轻巧,精简,便捷。并且功能也齐全。
1.Flask安装
推荐使用最新版本的 Python 3 。 Flask 支持 Python 3.5 及更高版本的 Python 3 、 Python 2.7 和 PyPy 。
然后通过下面这个命令可以直接安装python
pip install flask
pip install flask_cors
2.Flask代码操作
之所以叫代码套路,是因为用Flask的时候,这些是必须写的,可以说是固定的
from flask_cors import *
from flask import Flask,render_template,request,Response,redirect,url_for
#内网ip
app = Flask(__name__)if __name__ == "__main__": """初始化,debug=True"""app.run(host='127.0.0.1', port=5000,debug=True)
参数:host是网站ip
端口设为5000,开启debug模式,真正上线的情况下可以去掉这个。
CORS(app, supports_credentials=True)
前后端分离或者在其他地方使用异步请求的时,需要加上这一行,这样才能解决跨域问题。
3.URL路由
第一种:跳转页面带参数
#跳转页面带参数
@app.route('/pie-nest')
def index():return render_template('pie-nest.html', roomid = roomid)
第二种:跳转页面不带参数
#跳转页面不带参数
@app.route('/pie-nest')
def index():return render_template('pie-nest.html')
第三种:Api接口返回Json数据
#Api接口返回Json数据
@app.route('/pie_nest_data')
def pie_nest_data():data_list = {}data1 = ['公众号:Python研究者','直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他']data_list['data1'] = data1return Response(json.dumps(data_list), mimetype='application/json')
第四种:获取(传递)参数
@app.route('/alldata')
def alldata():d = request.args.get('d')return Response(json.dumps(d), mimetype='application/json')
二、ECharts的使用
可以直接百度ECharts或者通过下面链接都有可以找到ECharts官网
https://echarts.apache.org/examples/zh/index.html#chart-type-globe
可以看到很多的可视化图表,下面教大家如何引入到Flask中,并且可以通过Flask去修改数据,在网页端更新可视化中数据。
下面以这个图例为例
https://echarts.apache.org/examples/zh/editor.html?c=pie-nest
点击右上角的:下载实例
下载之后就是一个html文件
在和py文件同级目录下新建templates文件夹,将下载好的html文件夹放进去
在py文件中编写url路由
#进入页面
@app.route('/pie-nest')
def index():return render_template('pie-nest.html')
访问一下链接就可以出来可视化效果
http://127.0.0.1:5000/pie-nest
三、Flask结合ECharts
上面已经将html和放到Flask中,但是数据是固定的
为了让数据是动态的,下面通过Flask去修改数据,然后更新到html网页可视化中
#pie-nest-data
@app.route('/pie_nest_data')
def pie_nest_data():data_list = {}data1 = ['公众号:Python研究者','直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他']data_list['data1'] = data1data2 = [{'value': 2000, 'name': 'Python研究者', 'selected': True},{'value': 1548, 'name': '搜索引擎'},{'value': 775, 'name': '直达'},{'value': 679, 'name': '营销广告'}]data_list['data2'] = data2data3 =[{'value': 1048, 'name': '百度'},{'value': 335, 'name': '直达'},{'value': 310, 'name': '邮件营销'},{'value': 251, 'name': '谷歌'},{'value': 234, 'name': '联盟广告'},{'value': 147, 'name': '必应'},{'value': 135, 'name': '视频广告'},{'value': 102, 'name': '其他'}]data_list['data3'] = data3return Response(json.dumps(data_list), mimetype='application/json')
访问下面这个链接就可以获取到json数据
http://127.0.0.1:5000/pie_nest_data
修改html
首先引入jquery文件,后面异步ajax请求需要用到
在py统计目录下新建static/js
添加异步请求代码
$.ajax({type:'GET',url:"http://127.0.0.1:5000/pie_nest_data",dataType:'json',success:function(data){console.log(data);//html原本的js代码}
});
修改html原本中的js代码(三处)
这样我们就修改好了。
然后在访问一下
http://127.0.0.1:5000/pie-nest
ok,这样html可视化就是动态的,也成功将Flask和ECharts结合在一起
四、总结
如何利用Flask框架结合ECharts,将采集的数据实现在线可视化效果
如果大家对本文代码源码感兴趣,扫码关注公众号,后台回复:flask可视化 ,获取完整代码!
Flask结合ECharts实现在线可视化效果,超级详细!相关推荐
- 基于Ganos百行代码实现亿级矢量空间数据在线可视化
简介: 本文介绍如何使用RDS PG或PolarDB(兼容PG版或Oracle版)的Ganos时空引擎提供的数据库快显技术,仅用百行代码实现亿级海量几何空间数据的在线快速显示和流畅地图交互,且无需关注 ...
- 三维交互可视化平台(智慧海上牧场平台)学习开发Flask+Vue+Echarts+Mysql+websocket 实战(四)
前言 三维交互可视化平台(智慧海上牧场平台)学习开发之Vue(一) 三维交互可视化平台(智慧海上牧场平台)学习开发之Flask+Vue+Mysql(二) 三维交互可视化平台(智慧海上牧场平台)学习开发 ...
- Hadoop+hive+flask+echarts大数据可视化项目之flask结合echarts前后端结合显示hive分析结果
Hadoop+hive+flask+echarts大数据可视化项目(五) ------flask与echarts前后端结合显示hive分析结果------- 关注过Hadoop+hive+flask+ ...
- echarts 堆叠柱状图3d效果_【python可视化】:pyecharts:柱形图、堆叠条形图、极坐标堆叠柱形图、极坐标堆叠分类条形图...
•本文字数:约1000字•阅读时长:约3分钟•难度:2颗星 官方介绍:pyecharts 是一个用于生成 Echarts 图表的类库.Echarts 是百度开源的一个数据可视化 JS 库.用 Echa ...
- Hadoop+hive+flask+echarts大数据可视化项目之hive环境搭建与系统数据的分析思路
Hadoop+hive+flask+echarts大数据可视化项目(四) --------------hive环境搭建与系统数据的分析思路---------------- 关注过Hadoop+hive ...
- Hadoop+hive+flask+echarts大数据可视化之系统数据收集
Hadoop+hive+flask+echarts大数据可视化项目(一) --------------系统数据收集---------------- 谈到大数据的项目,一般以数据可视化为主体,收集大数据 ...
- python flask 在线可视化平台系统
python flask 在线可视化平台系统 基于python flask的在线可视化平台 基于python flask可视化平台 基于python flask 词云分析系统 后端:python fl ...
- 用python,flask,echarts实现豆瓣读书top250的爬取及可视化大屏
好的,我来为你讲解如何使用 Python.Flask 和 Echarts 实现豆瓣读书 Top250 的爬取和可视化大屏. 首先,你需要在你的电脑上安装 Python 和 Flask,并使用 pip ...
- Hadoop+hive+flask+echarts大数据可视化项目之系统数据整合和hadoop环境搭建
Hadoop+hive+flask+echarts大数据可视化项目(二) --------------系统数据整合和hadoop环境搭建---------------- 关注Hadoop+Hive+F ...
最新文章
- 全球首届“AI球球大作战:Go-Bigger多智能体决策智能挑战赛”开启
- jmeter(一)安装教程
- BZOJ 1012 单调队列+二分
- 用vs2003调试asp的方法和体会
- 【ElasticSearch】IK分词加入标点符号
- 6 redis 编译失败_Redis(NoSQL数据库)基础篇
- [码海拾贝 之Perl]获取日期以及日期的加减
- php bloginfo templatedirectory,PHP变量不显示使用bloginfo('template_directory')的图像
- TIOBE 2 月编程语言排行榜:Python 逼近 C,Groovy 重回 TOP20
- Ubuntu设置终端相对短路径
- PowerDesigner一些小技巧
- 获取网页中的验证码图片
- 用Python将一个文件夹下多个子文件夹中相同文件拷贝到同一个文件夹中并重新命名
- 大数据之Linux早课9.14
- 控制台 钢铁雄心2_钢铁雄心2中共事件代码 | 手游网游页游攻略大全
- 利用MATLAB对乐曲进行钢琴演奏【matlab调音_1】
- 微信小程序傻瓜制作_怎么能免费制作自己的微信小程序?
- 数据集制作之xml文件转化为csv
- java 用户登录界面代码_求JAVA实现用户登录界面代码?
- 沉没的泰坦尼克号的幸存者数据分析
热门文章
- Revit中的族不能剪切构件怎么办?建模助手的一键剪切功能
- leetcode【简单】169、多数元素 / 229、求众数2
- 以腾讯云为例,使用宝塔搭建一个骚气的导航网站
- 数据结构与算法(Java版) | 数据结构与算法的重要性
- 解决cannot import name ‘XXX‘ from partially initialized module ‘XXX‘ (most likely due to a circular...
- 赋能科特派共同体与山东国企组建国稻种芯粮农健康产业集团
- 英特尔反击英伟达,推出深度学习加速器和新一代至强芯片
- 局域网内如何共享文件夹,如何解决文件共享的安全性?
- 使用Beanstalk搭建队列服务
- React单元测试策略及落地