首先,需要安装Flask和Echarts的Python库。可以使用以下命令进行安装:

pip install flask
pip install pyecharts

然后,创建一个名为app.py的文件,用于编写Flask应用程序。在该文件中,我们需要导入必要的库,并创建一个Flask应用程序实例:

from flask import Flask, render_template
from pyecharts import options as opts
from pyecharts.charts import Bar
import csv

app = Flask(__name__)

接下来,我们需要定义一个路由,用于处理请求并返回渲染后的页面。在该路由中,我们需要读取csv文件中的数据,并将其传递给前端页面进行渲染:

@app.route('/')
def index():
    # 读取csv文件中的数据
    data = read_csv_data('2023年湖南第一季度家电市场销售数据.csv')
    
    # 获取各种家电的销售数据
    online_data = data['线上']
    offline_data = data['线下']
    
    # 创建柱状图
    bar = create_bar(online_data, offline_data)
    
    # 将图表转换为html代码
    chart_html = bar.render_embed()
    
    # 渲染网页模板并传递数据到前端页面
    return render_template('index.html', chart_html=chart_html)

def read_csv_data(filename):
    data = {}
    with open(filename, 'r') as f:
        reader = csv.DictReader(f)
        for row in reader:
            for key, value in row.items():
                if key not in data:
                    data[key] = []
                data[key].append(float(value))
    return data

def create_bar(online_data, offline_data):
    bar = (
        Bar()
        .add_xaxis(['家电1', '家电2', '家电3', '家电4'])
        .add_yaxis('线上', online_data)
        .add_yaxis('线下', offline_data)
        .set_global_opts(
            title_opts=opts.TitleOpts(title='2023年第一季度湖南家电市场销售数据'),
            xaxis_opts=opts.AxisOpts(name='家电类型'),
            yaxis_opts=opts.AxisOpts(name='销售额(万元)'),
        )
    )
    return bar

在上面的代码中,read_csv_data函数用于读取csv文件中的数据,create_bar函数用于创建柱状图。然后,在路由函数中,我们调用这两个函数来获取数据和创建图表,并将图表转换为html代码。最后,将数据传递给前端页面进行渲染。

接下来,我们需要创建一个名为index.html的Jinja模板文件,用于渲染前端页面。在该文件中,我们可以使用Flask提供的模板语法来动态插入数据:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>2023年第一季度湖南家电市场销售数据</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.0/echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 800px; height: 400px;"></div>
    <script>
        // 将后台传递的图表html代码插入到页面中
        document.getElementById('chart').innerHTML = '{{ chart_html|safe }}';
    </script>
</body>
</html>

在上面的代码中,我们使用{{ chart_html|safe }}来插入后台传递的图表html代码,并使用safe过滤器来确保代码不被转义。

最后,我们可以在app.py文件中添加启动Flask应用程序的代码:

if __name__ == '__main__':
    app.run()

现在,我们可以运行app.py文件,启动Flask应用程序。然后,在浏览器中访问http://localhost:5000,即可看到渲染后的图表页面。

注意:在运行Flask应用程序之前,需要将2023年湖南第一季度家电市场销售数据.csv文件放置在与app.py文件相同的目录下,并确保csv文件的格式正确。另外,需要根据实际情况修改csv文件的读取和图表创建的代码

2、使用Flask+Echarts+Jinja绘制2023年第一季度湖南家电市场销售数据图表。1使用Flask处理后台数据。①读取2023年湖南第一季度家电市场销售数据csv文件分别取出线上、线下4种家电的销售数据。②使用Jinja模板html将后台数据传递到前端进行网页渲染;创建Flask启动程序。

原文地址: http://www.cveoy.top/t/topic/hIfF 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录