Python Flask使用pyecharts画图表
HDUZN
  2023-01-13 21:42:51 2023-01-13 21:42      

pyecharts 是一个用于生成 Echarts 图表的类库，Echarts 是百度开源的一个数据可视化 JS 库，主要用于数据可视化。所以，pyecharts 实际上就是 Echarts 与 Python 的对接。

官方文档：https://pyecharts.org/#/zh-cn/intro

安装pyecharts：

1
pip install pyecharts

1.在Flask中画柱形图

官方文档中也有关于在Flask中使用的说明：https://pyecharts.org/#/zh-cn/web_flask

这个跟官方的例子差不多，稍微改了下，chart1中变量bar赋值的时候用的是链式的，不习惯这种方式，参考chart2中写法就行，一样的效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
# app.py
# pip install gevent
from flask import Flask, render_template
from gevent.pywsgi import WSGIServer
from pyecharts.charts import Bar
from pyecharts import options as opts

app = Flask(__name__)

@app.route("/chart1")
def chart1():
    bar = (
        Bar()
        .add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
        .add_yaxis("商家A", [5, 20, 36, 10, 75, 90])
        .add_yaxis("商家B", [15, 25, 16, 55, 48, 8])
        .set_global_opts(title_opts=opts.TitleOpts(title="Bar-基本示例", subtitle="我是副标题"))
    )
    chart1 = bar.render_embed()
    return render_template('chart1.html', chart1=chart1)

@app.route("/chart2")
def chart2():
    bar = Bar(init_opts=opts.InitOpts(width='800px', height='400px'))
    bar.add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
    bar.add_yaxis("商家A", [5, 20, 36, 10, 75, 90])
    bar.add_yaxis("商家B", [15, 25, 16, 55, 48, 8])
    bar.set_global_opts(title_opts=opts.TitleOpts(title="Bar-基本示例", subtitle="副标题"))
    chart2 = bar.render_embed()
    return render_template('chart2.html', chart2=chart2)

if __name__ == '__main__':
    # app.run('0.0.0.0', port=5000)
    http_server = WSGIServer(('0.0.0.0', 5000), app)
    http_server.serve_forever()

chart1.html（我这里不想用在线的js文件，所以把下载好的 echarts.min.js放在项目目录下的static/js目录下了 ）：

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Bar-基本示例</title>
    <script src="{{url_for('static', filename='js/echarts.min.js')}}"></script>
</head>
<body>
    <div class="chart">
        {{ chart1|safe }}
    </div>
</body>
</html>

2.在Flask中画时间线轮播多张饼图（Timeline）

需要展示多个图表的话，依次展示的话直接把2个chart传过去就行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
# app.py
from flask import Flask, render_template
from gevent.pywsgi import WSGIServer
from pyecharts.charts import Bar, Timeline, Pie
from pyecharts import options as opts
import random

app = Flask(__name__)

@app.route("/chart3")
def chart3():
    # 画柱形图
    bar = Bar(init_opts=opts.InitOpts(width='800px', height='400px'))
    bar.add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
    bar.add_yaxis("商家A", [5, 20, 36, 10, 75, 90])
    bar.add_yaxis("商家B", [15, 25, 16, 55, 48, 8])
    bar.set_global_opts(title_opts=opts.TitleOpts(title="Bar-基本示例", subtitle="副标题"))
    chart1 = bar.render_embed()

    # 画时间线轮播多张饼图（每一题统计结果）
    timeline = Timeline()
    x_list = ['A', 'B', 'C', 'D']
    ques_id_list = [1, 2, 3, 4, 5] # 题目序号
    standard_answer_dict = {1:'A', 2:'C', 3:'D', 4:'B', 5:'C'} # 标准答案
    for ques_id in ques_id_list:
        standard_answer = standard_answer_dict[ques_id]
        # 在正确答案后面添加文字：' 正确答案'
        new_x_list = []
        for x in x_list:
            if(x == standard_answer):
                new_x_list.append(x + ' 正确答案')
            else:
                new_x_list.append(x)
        
        num_list = [random.randint(0, 5) for _ in range(4)] # 随机生成每个选项的选择人数
        pie_data_dict = list(zip(new_x_list, num_list)) # [('A', 1), ('B 正确答案', 1), ('C', 2), ('D', 3)]
        
        # 饼图
        pie = Pie(init_opts=opts.InitOpts(width='300px', height='300px'))
        pie.add("", pie_data_dict)
        pie.set_global_opts(title_opts=opts.TitleOpts(title=str(ques_id)+'题', subtitle="副标题"))
        pie.set_series_opts(label_opts=opts.LabelOpts(formatter="{b}: {c}")) # {b}是数据项的名称，{c}是数据项的值。
        timeline.add(pie, ques_id)
    chart2 = timeline.render_embed()

    return render_template('chart3.html', chart1=chart1, chart2=chart2)

if __name__ == '__main__':
    # app.run('0.0.0.0', port=5000)
    http_server = WSGIServer(('0.0.0.0', 5000), app)
    http_server.serve_forever()

http://localhost:5000/chart3 运行结果如图：

3.Grid：并行多图

如果需要布局多张图表的话，可以用Grid类：

pos_bottom：表示与下方间距
pos_top：表示与上方间距
pos_right：表示与右方间距
pos_left：表示与左方间距

布局的时候，顺便也要把 LegendOpts（图例配置项）和 TitleOpts（标题配置项）位置也调整下。

举个例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
# app.py
from flask import Flask, render_template
from gevent.pywsgi import WSGIServer
from pyecharts.charts import Bar, Grid
from pyecharts import options as opts

app = Flask(__name__)

@app.route("/")
def index():
    bar1 = Bar(init_opts=opts.InitOpts(width='150px', height='100px'))
    bar1.add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
    bar1.add_yaxis("商家A", [5, 20, 36, 10, 75, 90])
    bar1.set_global_opts(title_opts=opts.TitleOpts(title="Bar1-基本示例", subtitle="Bar1副标题", pos_bottom="93%", pos_right="85%"),
                        legend_opts=opts.LegendOpts(pos_bottom="95%", pos_right="70%"))

    bar2 = Bar(init_opts=opts.InitOpts(width='150px', height='100px'))
    bar2.add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
    bar2.add_yaxis("商家A", [5, 20, 36, 10, 75, 80])
    bar2.set_global_opts(title_opts=opts.TitleOpts(title="Bar2-基本示例", subtitle="Bar2副标题", pos_bottom="93%", pos_left="55%"),
                        legend_opts=opts.LegendOpts(pos_bottom="95%", pos_left="70%"))

    bar3 = Bar(init_opts=opts.InitOpts(width='150px', height='100px'))
    bar3.add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
    bar3.add_yaxis("商家A", [5, 20, 36, 10, 75, 70])
    bar3.set_global_opts(title_opts=opts.TitleOpts(title="Bar3-基本示例", subtitle="Bar3副标题", pos_top="52%", pos_right="85%"),
                        legend_opts=opts.LegendOpts(pos_top="54%", pos_right="70%"))

    bar4 = Bar(init_opts=opts.InitOpts(width='150px', height='100px'))
    bar4.add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
    bar4.add_yaxis("商家A", [5, 20, 36, 10, 75, 60])
    bar4.set_global_opts(title_opts=opts.TitleOpts(title="Bar4-基本示例", subtitle="Bar4副标题", pos_top="52%", pos_left="55%"),
                        legend_opts=opts.LegendOpts(pos_top="54%", pos_left="70%"))

    grid = Grid(init_opts=opts.InitOpts(width='960px', height='800px'))
    grid.add(bar1, grid_opts=opts.GridOpts(pos_bottom="60%", pos_right="60%")) # 左上
    grid.add(bar2, grid_opts=opts.GridOpts(pos_bottom="60%", pos_left="60%")) # 右上
    grid.add(bar3, grid_opts=opts.GridOpts(pos_top="60%", pos_right="60%")) # 左下
    grid.add(bar4, grid_opts=opts.GridOpts(pos_top="60%", pos_left="60%")) # 右下

    chart1 = grid.render_embed()

    return render_template('index.html', chart1=chart1)

if __name__ == '__main__':
    # app.run('0.0.0.0', port=5000)
    http_server = WSGIServer(('0.0.0.0', 5000), app)
    http_server.serve_forever()

运行效果如下图：

  • 本文标题：Python Flask使用pyecharts画图表
  • 本文作者：HDUZN
  • 创建时间：2023-01-13 21:42:51
  • 本文链接：http://hduzn.cn/2023/01/13/Python-Flask使用pyecharts画图表/
  • 版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
 评论