一、创建Flask项目,在pycharm里直接创建
创建时选择之前常用的python环境,避免创建好项目之后需要重新安装一系列的包。
创建好之后的目录如下:
二、先写一个简单的程序进行测试
from flask import Flask
app = Flask(__name__)
@app.route('/')
def hello_world():
return 'Hello World!'
if __name__ == '__main__':
app.run()
打开里面的网址,可以看到:Hello Word!
三、创建图表及展示
如果没装的话,首先要安装一下pyecharts,直接终端输入pip指令进行安装。
pip install pyecharts
1)正常使用python读取数据、写好图表。建立app.py
前后端分离可以更好的把图表精细化处理,我们需要下载一个echarts.min.js
进入链接下载,可以选择在线定制,把下载的文件拷贝到建立的Flask项目的static文件夹中 https://www.echartsjs.com/zh/download.html
2)在templates里面建立一个html文件,show_echarts.html
对应的app.py如下:
from flask import *
from pyecharts import options as opts
from pyecharts.charts import Bar
app = Flask(__name__)
@app.route('/')
def show_charts():
bar = (
Bar()
.add_xaxis(["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"])
.add_yaxis("商家A",[5, 20, 36, 10, 10, 20])
.add_yaxis("商家B", [15, 25, 16, 55, 48, 8])
.set_global_opts(title_opts=opts.TitleOpts(title="Bar-基本示例", subtitle="AB数据对比"))
)
return render_template('show_charts.html', #确定要展示的网址
bar_options=bar.dump_options())
if __name__ == "__main__":
app.run(debug=True)
show_echarts.html如下
ECharts
四、多图展示
python代码:
from flask import *
from pyecharts import options as opts
from pyecharts.charts import Bar,Pie
app = Flask(__name__)
@app.route('/')
def show_charts():
bar = (
Bar()
.add_xaxis(["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"])
.add_yaxis("商家A",[5, 20, 36, 10, 10, 20])
.add_yaxis("商家B", [15, 25, 16, 55, 48, 8])
.set_global_opts(title_opts=opts.TitleOpts(title="Bar-基本示例", subtitle="AB数据对比"))
)
pie = (
Pie()
.add("", [("商家A", 100), ("商家B", 88), ("商家C", 166)])
.set_global_opts(title_opts=opts.TitleOpts(title="Pie-基本示例"))
.set_series_opts(label_opts=opts.LabelOpts(formatter="{b}: {c}"))
)
return render_template('show_charts.html',
bar_options=bar.dump_options(),
pie_options=pie.dump_options())
if __name__ == "__main__":
app.run(debug = True)
html
ECharts
柱形图
饼图
五、网址访问
需要进行远程服务器部署指定 host='0.0.0.0' , 其他机器才能正常访问远程服务
app.run(host='0.0.0.0', port=5000, debug=True)
跑出来的网址如下:
1)http://127.0.0.1:5000/
2)http://0.0.0.0:5000/
但是pycharm2018中上述部署不行,别人依旧打不开需要去
Edit-Configuration 中,找到Additinal options栏 :手动写入 --host=x.x.x.x --port=xxxx。