ECharts数据可视化项目实践10小紫后端讲义教学课件.pptx

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

1、ECharts数据可视化项目实践10小紫后端讲义E C h a r t s 数 据 可 视 化 项 目 实 践邵辉可视化项目四小紫共享单车运营管理平台项目目录数据说明项目分析开发环境项目目标项目背景后端开发前端开发项目总结对接岗位项目背景壹数据可视化项目目标贰数据可视化数据可视化数据可视化数据可视化数据说明叁数据可视化表4-1 天小紫共享单车骑行数据项目分析肆PPT模板 http:/ 项目的任务列表数据可视化开发环境伍数据可视化后端开发陆数据可视化数据可视化项目的目录结构如图4-2所示。图4-2 Flask项目目录结构数据可视化ENV=development#设置开发模式设置开发模式DEBUG

2、=True#提供报错信息提供报错信息JSON_AS_ASCII=False#解决解决json返回中文乱码问题返回中文乱码问题settings.py代码如下：数据可视化处理数据制作数据实现数据接口制作数据接口页面解决跨域问题远程访问数据可视化处理数据数据可视化#导入模块导入模块import pandas as pdimport numpy as npimport calendar#读取数据读取数据file=pd.read_csv(./data/task3.csv,encoding=gbk)#有意义的季节单词有意义的季节单词fileseason=file.season.map(1:spring,2

3、:summer,3:autumn,4:winter)#有意义的天气单词有意义的天气单词 4.1 处理处理数据数据 处理数据代码如下：数据可视化fileweather=file.weather.map(1:sunny,2:cloudy,3:rainly,4:bad-day)#日期日期filedate=filedatetime.apply(lambda x:x.split()0)#年份年份fileyear=filedate.apply(lambda x:x.split(-)0)#月份月份filemonth=filedate.apply(lambda x:x.split(-)1)#天天fileday

4、=filedate.apply(lambda x:x.split(-)2)#小时小时filehour=filedatetime.apply(lambda x:x.split()1.split(:)0)#星期星期fileweekday=file.datetime.apply(lambda x:calendar.day_namepd.to_datetime(x).weekday()df=file#转成转成float类型类型dfcount=dfcount.astype(float64)数据可视化制作数据数据可视化4.2 4.2 制作数据制作数据 4.2.1 任务1动态条形图所需数据图4-3 动态条形

5、图数据样例数据可视化数据可视化数据可视化 4.2.2 4.2.2 任务任务2 2 三维散点三维散点图所需数据图所需数据图4-4 条形图数据样例数据可视化数据可视化数据可视化数据可视化 4.2.3 4.2.3 任务任务3 3 折线面积图所需数据折线面积图所需数据图4-5 折线面积图数据样例数据可视化数据可视化 4.2.4 任务4单容器多饼图所需数据图4-6 单容器多饼图数据可视化#1.注册用户和非注册用户对比注册用户和非注册用户对比#注册用户、非注册用户求和注册用户、非注册用户求和 registered=dfregistered.sum()casual=dfcasual.sum()#第一个饼图所

6、需数据第一个饼图所需数据 task4_1=name:registered,value:str(registered),name:casual,value:str(casual)第一个饼图所需数据代码如下：数据可视化#2.工作日中注册用户和非注册用户对比工作日中注册用户和非注册用户对比#过滤出工作日的数据过滤出工作日的数据 workday=dfdfworkingday=1 workday_registered=workdayregistered.sum()#注册注册用户用户 workday_casual=workdaycasual.sum()#未注册用户未注册用户#第二个饼图所需数据第二个饼图所

7、需数据 task4_2=name:registered,value:str(workday_registered),name:casual,value:str(workday_casual)第二个饼图所需数据代码如下：数据可视化#3.假期中注册用户与未注册用户的对比假期中注册用户与未注册用户的对比#过滤出假期的数据过滤出假期的数据 holiday=dfdfholiday=1 holiday_registered=holidayregistered.sum()#注册用注册用户户 holiday_casual=holidaycasual.sum()#未注册用户未注册用户#第三个饼图所需数据第三个饼

8、图所需数据 task4_3=name:registered,value:str(holiday_registered),name:casual,value:str(holiday_casual)第三个饼图所需数据。代码如下：数据可视化return task4_1:task4_1,task4_2:task4_2,task4_3:task4_3 返回数据代码如下：数据可视化 4.2.5 任务5热力图所需数据 图4-7 热力图数据样例热力图的数据处理代码如下：#corr()计算相关系数矩阵计算相关系数矩阵 task5=dftemp,atemp,humidity,windspeed,count.cor

9、r()数据可视化数据可视化#task5.values为为narray格式数据格式数据 task6_narray=task5.values#around():decimals=2 浮点型保留浮点型保留2位小数；位小数；tolist()：转成列表：转成列表 heat_value=np.around(task6_narray,decimals=2).tolist()列表数据heat_value代码如下：#热力图数据热力图数据return index:heat_xy,data:heat_value 返回数据代码如下：数据可视化 4.2.6 4.2.6 任务任务6 6动态条形图所需数据动态条形图所需数据

10、图4-9 动态条形图数据样例数据可视化数据可视化列表weekday_data代码如下：#保存星期的数据保存星期的数据weekday_data=#循环循环24次，每次保存一个星期每天所有的小时数据次，每次保存一个星期每天所有的小时数据 for i in range(0,24):weekday_data.append(#这里每行代表一个星期中的一天这里每行代表一个星期中的一天#具体是星期几根据具体是星期几根据weekday_name.sort()排序后的结果来定排序后的结果来定 task6counti,task6counti+24,task6counti+24*2,task6counti+24*3

11、,task6counti+24*4,task6counti+24*5,task6counti+24*6,)数据可视化返回数据代码如下：return index:weekday_name,data:weekday_data 数据可视化 4.2.7 4.2.7 任务任务7 7漏斗图所需数据漏斗图所需数据图4-10 环形图数据样例数据可视化数据可视化数据可视化 4.2.8 4.2.8 任务任务8 8树状图所需数据树状图所需数据图4-11 树状图数据样例数据可视化数据可视化#取出当年当前季节的数据取出当年当前季节的数据 df_season1=pd.DataFrame(season_tot.loc:,y

12、earseason)#筛选出不等于筛选出不等于0的的 df_season1_no0=df_season1df_season1season!=0#索引索引 index1=list(df_season1_no0.index)#数据数据 value1=list(df_season1_no0season)#季节的季节的childred数据：每个月份数据数据：每个月份数据 season_childred=#循环一个季节里的每个月份循环一个季节里的每个月份 for n,v in zip(index1,value1):#如果索引是如果索引是total，则把，则把“季节的季节的childred“添加到添加到“

13、每年的每年的childred”if n=total:year_childred.append(name:season,数据可视化 value:v,children:season_childred )break#添加完返回，终止循环添加完返回，终止循环#月份添加数据月份添加数据 season_childred.append(name:str(n)+月月,value:v )#最后在最后在data8里添加一年的数据里添加一年的数据 data8.append(name:str(year)+年年,value:year_totyear,children:year_childred )数据可视化 retur

14、n data8 树状图所需格式的数据代码如下：数据可视化实现数据接口数据可视化数据可视化数据可视化数据可视化制作数据接口页面数据可视化 4.4 制作数据接口页面数据可视化数据可视化最后形成的数据接口的部分页面如图4-12所示。图4-12 数据接口页面数据可视化 小紫共享单车运营管理平台数据接口小紫共享单车运营管理平台数据接口.(这里省略显示其它代码这里省略显示其它代码)table标签代码如下：引入文件代码如下：小紫共享单车运营管理平台数据接口说明小紫共享单车运营管理平台数据接口说明.(这里省略显示其它代码这里省略显示其它代码)数据可视化任务表格标题行的代码如下：任务数据接口调用任务数据接口调用

15、URL 任务数据参考内容任务数据参考内容 任务表格内容代码如下：%for task in tasks%/data-api/task 数据可视化 .(这里省略显示数据的这里省略显示数据的JS脚本脚本)%endfor%显示数据JS脚本代码如下：$.ajax(type:get,url:/data-api/task,dataType:json,success:function(datas)console.log(datas);str_pretty1=;for(var key in datas)str_pretty1=str_pretty1 +JSON.stringify(key)+数据数据+n;数据可

16、视化 str_pretty1=str_pretty1+JSON.stringify(dataskey,2);str_pretty1=str_pretty1+n;document.getElementById(task).innerText=str_pretty1;,error:function(err)console.log(err);return err;)数据可视化样式代码如下：td padding:10px;width:200px;.t2 width:1700px;a:visited color:blue;数据可视化解决跨域问题数据可视化 4.5 4.5 解决跨域问题解决跨域问题利用CORS解决跨域问题。感谢您的观看可化视