注:此处用的pycharm是2020.3社区版,如果是专业版,创建的时候直接选择flask

flask的中文文档:​​https://flask.net.cn/​

1、打开pycharm,直接新建一个project,然后打开,我这边是直接用的上次新建的flask项目。

​链接:https://blog.51cto.com/u_14223622/4137016​

2、打开terminal,安装flask(此处安装成功,可以省略第3步)

pip install flask

Flask框架搭建--数据可视化_flask数据可视化


3、file--Settings--里面,搜索安装flask。

Flask框架搭建--数据可视化_flask数据可视化_02

4、新建一个templates和static文件夹。

Flask框架搭建--数据可视化_flask数据可视化_03

5、新建一个python文件,manage.py,然后运行,浏览器输入http://127.0.0.1:5000/,这样第一个flask项目就成功了

Flask框架搭建--数据可视化_flask数据可视化_04

6、运行

Flask框架搭建--数据可视化_flask数据可视化_05

Flask框架搭建--数据可视化_flask数据可视化_06

数据可视化

1、在官网中下载echarts.js组件

2、在templates文件夹下面新建一个index.html

Flask框架搭建--数据可视化_flask数据可视化_07

3、在index.html中引入刚刚下载的 ECharts 文件。

此方法是通过static静态文件配置来进行引入js文件,可以自行选择合适的引入方式

<script src="{{url_for('static',filename='js/echarts.js')}}"></script>

此方法是直接根据路径进行引入js文件

Flask框架搭建--数据可视化_flask数据可视化_08

Flask框架搭建--数据可视化_flask数据可视化_09

4、准备一个dom,并初始化echarts,然后设置图表的配置项和数据。

<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例    var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据    var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
color:'pink'
}
]
};
// 使用刚指定的配置项和数据显示图表。    myChart.setOption(option);
</script>

5、修改跳转的页面

Flask框架搭建--数据可视化_flask数据可视化_10

6、在重新运行,进行浏览器查看。

Flask框架搭建--数据可视化_flask数据可视化_11