web实战基础（pycharts篇）：flask+pycharts渲染网页的三种方式
这是一篇非常非常基础的入门教程，但是也能让你深入了解pycharts的实现机制和带着你深入了解细节的设计，因此非常建议你能看完，相信一定会有所收获！
这一篇讲深入介绍flask+pycharts渲染网页的基础知识。
flask+pycharts渲染网页的三种方式：
1、通过render()函数进行渲染；
2、通过Markup()函数进行渲染；
3、通过dump_options_with_quotes()函数进行渲染。
其中第三种为最通用的方法，下面将一一进行介绍。
文章目录
- 一、render()函数
-
- （一）创建一个flask程序。
- （二）然后通过pycharts进行异步渲染生成index.html文件
- （三）运行`python first.py`
- 二、Markup()函数
- 三、dump_options_with_quotes()函数
-
- （一）新建flask.py
- （二）在templates文件夹中新建index.html
- （三）运行flask.app
- （四）实现效果
- 四、实现定时实时更新数据
-
- （一）重写flask.py
- （二）重写index.html
- （三）运行效果
一、render()函数
（一）创建一个flask程序。
命名为：first.py
from flask import Flask,render_template
app = Flask(__name__)
@app.route('/', methods=['GET', 'POST'])
def test():
return render_template('index.html')
if __name__ == '__main__':
app.run(host="127.0.0.1", port=5000,debug=True)
（二）然后通过pycharts进行异步渲染生成index.html文件
先创建文件夹templates，然后保存成second.py。
from pyecharts.charts import Bar
from pyecharts import options as opts
from pyecharts.globals import ThemeType
bar = (
Bar(init_opts=opts.InitOpts(theme=ThemeType.LIGHT))
.add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
.add_yaxis("商家A", [5, 20, 36, 10, 75, 90])
.add_yaxis("商家B", [15, 25, 30, 18,65, 70])
.set_global_opts(title_opts=opts.TitleOpts(title="主标题", subtitle="副标题"))
# 或者直接使用字典参数
# .set_global_opts(title_opts={"text": "主标题", "subtext": "副标题"})
)
bar.render('templates\index.html')
（三）运行python first.py
在浏览器中访问http://127.0.0.1:5000/
这种方法的缺点：只能异步操作，先运行
second.py生成index.html文件，然后才能在网址中访问，便利性很差。
二、Markup()函数
整合first.py和second.py的代码，形成third.py，具体代码如下：
from flask import Flask,render_template
from pyecharts import options as opts
from pyecharts.globals import ThemeType
from pyecharts.charts import Bar
from jinja2 import Markup
app = Flask(__name__)
def bar_base():
bar = (
Bar(init_opts=opts.InitOpts(theme=ThemeType.LIGHT))
.add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
.add_yaxis("商家A", [5, 20, 36, 10, 75, 90])
.add_yaxis("商家B", [15, 25, 30, 18, 65, 70])
.set_global_opts(title_opts=opts.TitleOpts(title="主标题", subtitle="副标题"))
)
return bar
@app.route('/', methods=['GET', 'POST'])
def index():
bar = bar_base()
return Markup(bar.render_embed())
if __name__ == '__main__':
app.run(host="127.0.0.1", port=5000,debug=True)
核心代码为：
def index():
bar = bar_base()
return Markup(bar.render_embed())def index():
bar = bar_base()
return Markup(bar.render_embed())
这种方法的优点：相比render明显更便捷，无需异步操作，直接在flask代码中继承了pycharts代码，
缺点为：仍然无法进行前后端分离操作。
三、dump_options_with_quotes()函数
（一）新建flask.py
具体代码实现如下：
from flask import Flask,render_template
from pyecharts import options as opts
from pyecharts.globals import ThemeType
from pyecharts.charts import Bar
from jinja2 import Markup
app = Flask(__name__)
def bar_base():
bar = (
Bar(init_opts=opts.InitOpts(theme=ThemeType.LIGHT))
.add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
.add_yaxis("商家A", [5, 20, 36, 10, 75, 90])
.add_yaxis("商家B", [15, 25, 30, 18, 65, 70])
.set_global_opts(title_opts=opts.TitleOpts(title="主标题", subtitle="副标题"))
)
return bar
@app.route("/")
def index():
return render_template("index.html")
@app.route("/barChart")
def get_bar_chart():
c = bar_base()
return c.dump_options_with_quotes()
if __name__ == '__main__':
app.run(host="127.0.0.1", port=5000,debug=True)
（二）在templates文件夹中新建index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>FLASK和PYCHARTS交互</title>
<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
<script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
</head>
<body>
<div id="bar" style="width:600px; height:400px;"></div>
<script>
$(
function () {
var chart = echarts.init(document.getElementById('bar'), 'pink', {
renderer: 'canvas'});
$.ajax({
type: "GET",
url: "http://127.0.0.1:5000/barChart",
dataType: 'json',
success: function (result) {
chart.setOption(result);
}
});
}
)
</script>
</body>
</html>
（三）运行flask.app
然后访问http://127.0.0.1:5000/。
（四）实现效果
四、实现定时实时更新数据
（一）重写flask.py
from flask import Flask,render_template
from pyecharts import options as opts
from pyecharts.globals import ThemeType
from pyecharts.charts import Bar
from pyecharts.faker import Faker
app = Flask(__name__)
def bar_base():
bar = (
Bar(init_opts=opts.InitOpts(theme=ThemeType.LIGHT))
.add_xaxis(Faker.choose())
.add_yaxis("商家A", Faker.values())
.add_yaxis("商家B", Faker.values())
.set_global_opts(title_opts=opts.TitleOpts(title="主标题", subtitle="副标题"))
)
return bar
@app.route("/")
def index():
return render_template("index.html")
@app.route("/barChart")
def get_bar_chart():
c = bar_base()
return c.dump_options_with_quotes()
if __name__ == '__main__':
app.run(host="127.0.0.1", port=5000,debug=True)
（二）重写index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>FLASK和PYCHARTS交互</title>
<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
<script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
</head>
<body>
<div id="bar" style="width:600px; height:400px;"></div>
<script>
var chart = echarts.init(document.getElementById('bar'), 'white', {
renderer: 'canvas'});
$(
function () {
fetchData(chart);
setInterval(fetchData, 2000);
}
);
function fetchData() {
$.ajax({
type: "GET",
url: "http://127.0.0.1:5000/barChart",
dataType: 'json',
success: function (result) {
chart.setOption(result);
}
});
}
</script>
</body>
</html>
（三）运行效果
OK，关于pycharts部分的内容终于写完了，后续我将会继续介绍新的部分echarts的内容，敬请期待。
感谢你的关注！
参考：https://pyecharts.org/#/zh-cn/intro