以下是使用Flask+Echarts+Jinja绘制“2022年中国排名前10城市的总GDP占比分布”图表的示例代码:

  1. 创建Flask启动程序(app.py):
from flask import Flask, render_template
import pandas as pd

app = Flask(__name__)

@app.route('/')
def index():
    # 读取数据并按GDP大小排序
    data = pd.read_csv('2022年中国城市GDP百强榜.csv')
    data = data.sort_values('GDP(亿元)', ascending=False).head(10)
    
    # 将数据传递到前端进行渲染
    city_data = data[['城市', 'GDP(亿元)']].values.tolist()
    
    return render_template('index.html', city_data=city_data)

if __name__ == '__main__':
    app.run()
  1. 创建Jinja模板html文件(templates/index.html):
<!DOCTYPE html>
<html>
<head>
    <title>2022年中国排名前10城市的总GDP占比分布</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.1/echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 800px;height: 600px;"></div>
    <script>
        var city_data = {{ city_data|safe }};
        
        var option = {
            title: {
                text: '2022年中国排名前10城市的总GDP占比分布',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c}亿元 ({d}%)'
            },
            series: [
                {
                    name: 'GDP占比',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: city_data,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        
        var chart = echarts.init(document.getElementById('chart'));
        chart.setOption(option);
    </script>
</body>
</html>
  1. 将数据文件(2022年中国城市GDP百强榜.csv)放置在与app.py相同的目录下。

  2. 运行Flask程序:在命令行中执行python app.py

  3. 在浏览器中访问http://localhost:5000,即可看到绘制的图表

3、使用Flask+Echarts+Jinja绘制2022年中国排名前10城市的总GDP占比分布图表。1使用Flask处理后台数据。①读取2022年中国城市GDP百强榜csv文件取TOP100排名前10的城市;取出城市和GDP亿元数据按GDP大小进行排序。②使用Jinja模板html将后台数据传递到前端进行网页渲染。数据可以使用二维数组形式呈现。创建Flask启动程序。

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

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