Flask+Echarts+Jinja 绘制 2022 年中国排名前 10 城市 GDP 占比分布图表

以下是使用 Flask+Echarts+Jinja 绘制“2022年中国排名前10城市的总GDP占比分布”图表的示例代码：\n\n1. 创建 Flask 启动程序 (app.py)：\n\npython\nfrom flask import Flask, render_template\nimport pandas as pd\n\napp = Flask(__name__) \n\n@app.route('/')\ndef index():\n # 读取数据并按GDP大小排序\n data = pd.read_csv('2022年中国城市GDP百强榜.csv')\n data = data.sort_values('GDP(亿元)', ascending=False).head(10)\n \n # 将数据传递到前端进行渲染\n city_data = data[['城市', 'GDP(亿元)']].values.tolist()\n \n return render_template('index.html', city_data=city_data)\n\nif __name__ == '__main__':\n app.run()\n\n\n2. 创建 Jinja 模板 html 文件 (templates/index.html)：\n\nhtml\n<!DOCTYPE html>\n<html>\n<head>\n <title>2022年中国排名前10城市的总GDP占比分布</title>\n <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.1/echarts.min.js"></script>\n</head>\n<body>\n <div id="chart" style="width: 800px;height: 600px;"></div>\n <script>\n var city_data = {{ city_data|safe }};\n \n var option = {\n title: {\n text: '2022年中国排名前10城市的总GDP占比分布',\n left: 'center'\n },\n tooltip: {\n trigger: 'item',\n formatter: '{a} <br/>{b} : {c}亿元 ({d}%)'\n },\n series: [\n {\n name: 'GDP占比',\n type: 'pie',\n radius: '55%',\n center: ['50%', '60%'],\n data: city_data,\n emphasis: {\n itemStyle: {\n shadowBlur: 10,\n shadowOffsetX: 0,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n }\n }\n }\n ]\n };\n \n var chart = echarts.init(document.getElementById('chart'));\n chart.setOption(option);\n </script>\n</body>\n</html>\n\n\n3. 将数据文件 (2022年中国城市GDP百强榜.csv) 放置在与 app.py 相同的目录下。\n\n4. 运行 Flask 程序：在命令行中执行python app.py。\n\n5. 在浏览器中访问 http://localhost:5000，即可看到绘制的图表。