是我，是你
在网上看到这样一段话：
“很多时候，你必须接受这世界上突如其来的失去。洒了的牛奶，遗失的钱包，走散的爱人，断掉的友情。当你做什么都于事无补的时候，唯一能做的，就是让自己努力好过一点。”
回顾上篇
python操作Redis增、删、改、查
九月de云，公众号：九月de云python操作Redis增、删、改、查，独立版本
开始本篇
Flask是一个用Python编写的轻量级Web框架，它基于Werkzeug和Jinja2开发，提供了简单而灵活的方式来构建Web应用程序。Flask具有简单易用、灵活可扩展的特点，适用于构建小型到中型的Web应用程序和API。
Pyecharts是一个Python数据可视化库，它基于Echarts JavaScript库，提供了丰富的图表类型和灵活的配置选项。Pyecharts可以帮助用户通过Python代码生成各种交互式的图表，包括折线图、柱状图、饼图、散点图等。
环境：
Pycharm
Python 3.9.16
安装：
pip install Flask==2.3.1
pip install pyecharts==2.0.3
新建Flask项目
打开Pycharm，File->New Project
在New Project界面选择Flask，输入项目名称，Create即可
最终，新建的Flask项目默认会有三部分内容，分别是static、templates和app.py，以下都会分别用到！
HTML模板文件
在tempates文件夹下，新建index.html，核心代码：
<body role="document"><div class="container theme-showcase" role="main"><div style="border:1px beige solid;width:930px;height:500px;margin: 0 auto;margin-top:5%;background: aliceblue;"><div class="container">{{ chart_html|safe }}</div></div></div></body>
其中{{ chart_html|safe }}就是将HTML代码渲染到页面上
柱状图
在app.py应用文件下，创建柱状图，核心代码：
def bar_page():x_data = ['2016', '2017', '2018', '2019', '2020', '2021', '2022', '2023']y1_data = [150, 400, 300, 350, 300, 400, 200, 600, 300]y2_data = [340, 500, 500, 500, 500, 400, 200, 500, 500]y3_data = [410, 600, 700, 800, 1000, 100, 600, 900, 700]# 柱状图对象bar = Bar(opts.InitOpts(bg_color="#485e5b"))# 设置图形的全局参数bar.set_global_opts(legend_opts=opts.LegendOpts(pos_top=12,pos_right=10,textstyle_opts=opts.TextStyleOpts(color='#fffdde')),tooltip_opts=opts.TooltipOpts(trigger="axis",axis_pointer_type="shadow",textstyle_opts=opts.TextStyleOpts(color="#fff")),xaxis_opts=opts.AxisOpts(type_="category",axisline_opts=opts.AxisLineOpts(linestyle_opts=opts.LineStyleOpts(color="white")),axislabel_opts=opts.LabelOpts()),yaxis_opts=opts.AxisOpts(type_="value",max_=1200,axistick_opts=opts.AxisTickOpts(is_show=False),splitline_opts=opts.SplitLineOpts(is_show=True,linestyle_opts=opts.LineStyleOpts(color='rgba(255,255,255,0.3)'),),axisline_opts=opts.AxisLineOpts(is_show=False,linestyle_opts=opts.LineStyleOpts(color="white")),axislabel_opts=opts.LabelOpts()),datazoom_opts=opts.DataZoomOpts(is_show=True,pos_bottom='2%',pos_top='93%'))bar.add_xaxis(xaxis_data=x_data)bar.add_yaxis(series_name="test1",y_axis=y1_data,label_opts=opts.LabelOpts(is_show=False),bar_width='15%',itemstyle_opts={"normal": {"color": JsCode("""new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#fccb05'}, {offset: 1,color: '#f5804d'}])"""),"barBorderRadius": 11,}})bar.add_yaxis(series_name="test2",y_axis=y2_data,label_opts=opts.LabelOpts(is_show=False),bar_width='15%',itemstyle_opts={"normal": {"color": JsCode("""new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#8bd46e'}, {offset: 1,color: '#09bcb7'}])"""),"barBorderRadius": 11,}})bar.add_yaxis(series_name="test3",y_axis=y3_data,label_opts=opts.LabelOpts(is_show=False),bar_width='15%',itemstyle_opts={"normal": {"color": JsCode("""new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#248ff7'}, {offset: 1,color: '#6851f1'}])"""),"barBorderRadius": 11,}})chart_html = bar.render_embed()return render_template('index.html', chart_html=chart_html)
运行Flask应用
python app.py打开浏览器，输入http://127.0.0.1:5000/bar
折线图
在app.py应用文件下，创建折线图，核心代码：
methods=['POST', 'GET'])def line_page():x_data = ["7月8日", "7月9日", "7月10日", "7月11日", "7月12日", "7月13日"]y_data: list = [40, 38, 35, 29, 31, 36]y2_data: list = [22, 25, 26, 21, 23, 25]# 折线图对象line = Line(opts.InitOpts(bg_color="#1A1835"))# 设置图形的全局参数line.set_global_opts(tooltip_opts=opts.TooltipOpts(is_show=False),legend_opts=opts.LegendOpts(textstyle_opts=opts.TextStyleOpts(color='#90979c')),xaxis_opts=opts.AxisOpts(type_="category",axisline_opts=opts.AxisLineOpts(linestyle_opts=opts.LineStyleOpts(color="rgba(204,187,225,0.5)")),splitline_opts=opts.SplitLineOpts(is_show=False),axistick_opts=opts.AxisTickOpts(is_show=False)),yaxis_opts=opts.AxisOpts(type_="value",axistick_opts=opts.AxisTickOpts(is_show=True),splitline_opts=opts.SplitLineOpts(is_show=False),axisline_opts=opts.AxisLineOpts(linestyle_opts=opts.LineStyleOpts(color="rgba(204,187,225,0.5)")),),datazoom_opts=opts.DataZoomOpts(is_show=True,))=x_data)line.add_yaxis(series_name="最高温度",y_axis=y_data,symbol="circle",symbol_size=10,is_symbol_show=True,label_opts=opts.LabelOpts(is_show=False),itemstyle_opts=opts.ItemStyleOpts(color="#f60010"),markpoint_opts=opts.MarkPointOpts(label_opts=opts.LabelOpts(color='#fff'),data=[opts.MarkPointItem(type_='max',name='最大值'opts.MarkPointItem(type_='min',name='最小值')]))line.add_yaxis(series_name="最低温度",y_axis=y2_data,symbol="circle",symbol_size=10,is_symbol_show=True,label_opts=opts.LabelOpts(is_show=False),itemstyle_opts=opts.ItemStyleOpts(color="#c257F6"),markpoint_opts=opts.MarkPointOpts(label_opts=opts.LabelOpts(color='#fff'),data=[opts.MarkPointItem(type_='max',name='最大值'opts.MarkPointItem(type_='min',name='最小值')]))chart_html = line.render_embed()return render_template('index.html', chart_html=chart_html)
运行Flask应用
python app.py打开浏览器，输入http://127.0.0.1:5000/line
饼图
在app.py应用文件下，创建饼图，核心代码：
@app.route('/pie', methods=['POST', 'GET'])def pie_page():datalist = [[['T1', 80], ['T2', 150], ['T3', 40], ['T4', 95]],[], ['T2', 190], ['T3', 55], ['T4', 96]],[], ['T2', 240], ['T3', 80], ['T4', 118]]]years = [2021, 2022, 2023]rich = {"yellow": {"color": "#ffc72b","fontSize": 30,"padding": [5, 4],"align": 'center'},"total": {"color": "#ffc72b","fontSize": 40,"align": 'center'},"white": {"color": "#fff","align": 'center',"fontSize": 14,"padding": [21, 0]},"blue": {"color": '#49dff0',"fontSize": 16,"align": 'center'},"hr": {"borderColor": '#0b5263',"width": '100%',"borderWidth": 1,"height": 0,}}tl = (Timeline(init_opts=opts.InitOpts(theme=ThemeType.DARK)).add_schema(is_auto_play=True,play_interval=1500))for i in range(3):p = (Pie(init_opts=opts.InitOpts(bg_color='#031f2d',)).set_global_opts(title_opts=opts.TitleOpts(title="%d年统计" % (years[i],),pos_left='center',pos_top='40%',padding=[24, 0],title_textstyle_opts=opts.TextStyleOpts(color='#fff',font_size=18,align='center')),legend_opts=opts.LegendOpts(type_="scroll",pos_left="80%",orient="vertical",textstyle_opts=opts.TextStyleOpts(color='#fff',font_size=16,rich=rich),)).add("xilie1",datalist[i],radius=['42%', '50%'],label_opts=opts.LabelOpts(position="outside",rich=rich,formatter="{white|{b}} \n{hr|}\n{yellow|{c}}\n{blue|{d}%}")))tl.add(p, "{}年".format(years[i]))chart_html = tl.render_embed()return render_template('index.html', chart_html=chart_html)
运行Flask应用
python app.py打开浏览器，输入http://127.0.0.1:5000/pie
总结
本次先简单的将pyecharts生成的统计图程现在前端页面上，以柱状图、折线图和饼图为例，其他类型的统计图也是同样的方式程现。
项目结构：
test_app_flask：项目名称
static：用于存放静态文件，例如CSS、JavaScript和图像文件等
templates：用于存放模板文件，就是html文件
app.py：用于存放Flask应用程序的主要代码逻辑
requirments.txt：需要安装的包及版本
有需求的朋友点个“赞”和“在看”，谢谢支持~！
后台回复“pyecharts”即可获取源码！
文章就分享到这儿，喜欢就点个赞吧!
