3、使用Flask+Echarts+Jinja绘制2022年中国排名前10城市的总GDP占比分布图表。1使用Flask处理后台数据。①读取2022年中国城市GDP百强榜csv文件取TOP100排名前10的城市;取出城市和GDP亿元数据按GDP大小进行排序。②使用Jinja模板html将后台数据传递到前端进行网页渲染。数据可以使用二维数组形式呈现。创建Flask启动程序。
以下是使用Flask+Echarts+Jinja绘制“2022年中国排名前10城市的总GDP占比分布”图表的示例代码:
- 创建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()
- 创建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>
-
将数据文件(2022年中国城市GDP百强榜.csv)放置在与app.py相同的目录下。
-
运行Flask程序:在命令行中执行
python app.py。 -
在浏览器中访问http://localhost:5000,即可看到绘制的图表
原文地址: https://www.cveoy.top/t/topic/hIgi 著作权归作者所有。请勿转载和采集!