ECharts数据可视化项目实践01天虎后端讲义教学课件.pptx

《ECharts数据可视化项目实践01天虎后端讲义教学课件.pptx》由会员分享，可在线阅读，更多相关《ECharts数据可视化项目实践01天虎后端讲义教学课件.pptx（61页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、ECharts数据可视化项目实践01天虎后端讲义E C h a r t s 数 据 可 视 化 项 目 实 践邵辉可视化项目一 天虎网上超市销售管理系统项目目录数据说明项目分析开发环境项目目标项目背景后端开发前端开发项目总结对接岗位项目背景壹数据可视化 随着互联网技术的发展，国内的网上超市如雨后春笋般地出现。在这里，消费者足不出户就可以浏览超市中的所有商品、查看打折商品、参与促销活动或下单购买商品等，因此消费者能够很方便地查找到自己所需要的商品并直接在网上购买。消费者还可以在网上直接与超市客服进行沟通和交流，如询问自己感兴趣的问题、得到自己遇到问题的解决方法等。网上超市的出现给国内人民生活带来

2、了极大的便利，它是一种典型的数字经济。数据可视化数据可视化项目目标贰数据可视化数据可视化数据可视化数据可视化数据说明叁数据可视化项目分析肆PPT模板 http:/ 前 端 开 发 使 用 的 工 具 为 V s c o d e、后 端 开 发 使 用的 工 具 则 为 P y c h a r m 专 业 版（也 可 以 用 社 区 版）。后端开发陆数据可视化清洗数据制作数据实现数据接口制作数据接口页面解决跨域问题远程访问数据可视化清洗数据数据可视化 P y c h a r m 里 F l a s k 项 目 结 构Flask项目初始目录结构Flask项目目录结构数据可视化ENV=develop

3、ment#设置开发模式设置开发模式DEBUG=True#提供报错信息提供报错信息JSON_AS_ASCII=False#解决解决json返回中文乱码问题返回中文乱码问题修改配置文件修改配置文件settings.pysettings.py数据可视化import pandas as pd#读取数据读取数据df1=pd.read_csv(datas/GoodsOrder.csv,encoding=gbk)df2=pd.read_csv(datas/GoodsTypes.csv,encoding=gbk)#异常数据处理，删除缺失值异常数据处理，删除缺失值df1=df1.dropna()df2=df2.

4、dropna()#将两表数据合并将两表数据合并df=df1.merge(df2,on=Goods)print(df)1 1.1.1 清洗清洗数据数据将df1和df2进行合并 显示结果如图1-3所示：查看df数据图1-3 df数据数据可视化制作数据数据可视化df_1=dfdfTypes=非酒精饮料非酒精饮料 df_2=df_1.groupby(Goods).count()df_3=df_2Types#df_3转换为转换为DataFrame类型类型 tmp1=pd.DataFrame(df_3)#将索引和值转换为列表将索引和值转换为列表 v=tmp1.values.tolist()name=tmp

5、1.index.tolist()#列表列表v格式为格式为,.,再次处理，转为新列表格式再次处理，转为新列表格式,.value=for i in v:value.append(i0)1.2 1.2 制作数据制作数据 1.2.1 1.2.1 任务任务1 1柱状图所需数据柱状图所需数据对统计好的数据df_2进行处理：创建一个函数h_task1：数据可视化#返回字典格式数据返回字典格式数据return return#namename为为非非酒酒精精饮饮料料类类型型的的商商品品名名称称、valuevalue为为商商品品数量数量 name:name,name:name,value:value value:

6、value 返回所需数据数据可视化df_1=df.groupby(Goods).count()df_1=df.groupby(Goods).count()#按按IDID倒序排序倒序排序df_2=df_1.sort_values(by=ID,ascending=False)df_2=df_1.sort_values(by=ID,ascending=False)#取前取前1010条数据条数据tmp=df_2.iloc0:10,0:1 tmp=df_2.iloc0:10,0:1 1.2.2 1.2.2 任务任务2 2条形图所需数据条形图所需数据 图1-5 条形图数据样例取出的是数量排名前十的商品创建

7、一个函数h_task2：数据可视化返回数据数据可视化 1.2.3 1.2.3 任务任务3 3瀑布图所需瀑布图所需数据数据图1-6 瀑布图数据样例数据可视化数据可视化 1.2.4 1.2.4 任务任务4 4折线图所需数据折线图所需数据图1-7 折线图数据样例创建一个函数h_task4。数据可视化数据可视化 1.2.5 1.2.5 任务任务5 5雷达图所需数据雷达图所需数据图1-8 雷达图数据样例数据可视化数据可视化 1.2.6 1.2.6 任务任务任务任务6 6玫瑰图所需数据玫瑰图所需数据图1-9 玫瑰图数据样例数据可视化数据可视化 1.2.7 1.2.7 任务任务7 7环形图所需数据环形图所需

8、数据图1-13 环形图数据样例数据可视化数据可视化 1.2.8 任务8旭日图所需数据图1-14 旭日图数据样例数据可视化数据可视化#返回字典格式数据返回字典格式数据return data:l,name:flagreturn data:l,name:flag返回数据得到数据data_dict数据可视化 1.2.9 任务9树图所需数据图1-15 树状图数据样例数据可视化数据可视化得到数据data_dict数据可视化#返回字典形式数据返回字典形式数据return data:data_dict返回数据到这里getdata.py文件的代码就全部完成，接下来修改app.py文件实现数据获取。数据可视化实现

9、数据接口数据可视化数据可视化数据可视化制作数据接口页面数据可视化 图1-16 部分数据接口页面数据可视化数据可视化数据可视化数据通过JS脚本来完成显示 将所有任务的表格、样式、JS脚本建好以后，数据接口页面就建立成功。前端人员可以通过地址“http:/127.0.0.1:5000/”来访问。数据可视化解决跨域问题数据可视化 from flask_cors import CORS 因此所谓跨域，就是当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。一旦被判定为跨域，那么无法读取非同源网页的Cookie、LocalStorage和 IndexedDB；无法接触非同源网页的DOM；无法向非同源地址发送 AJAX 请求。修改app.py文件，增加代码引入CORS包 CORS(app)数据可视化远程访问数据可视化感谢您的观看可化视