05 数据分析&可视化大屏笔记&echarts

数据分析&可视化大屏笔记

github地址

1. 爬虫

1.1 简单细节

#1. 向url请求并且接受响应的json数据时，
# 首先要对响应内容调用json()方法将json数据转换为python中的字典
response = requests.get(url).json()

# 遇到错误信息跳过而不是报错
import traceback              # 打印异常信息库
try:
  可能出错的东西
except:
  traceback.print_exc()  # 打印异常信息

1.2 selenium

from selenium import webdriver

# 将下载好后的驱动放到Scripts中
# executable_path
browser = webdriver.Chrome()
# browser = webdriver.Firefox()     # 火狐驱动

# https://movie.douban.com/top250
url = "https://movie.douban.com/top250"

browser.get(url)
browser.maximize_window()

# 获取源码
# print(browser.page_source)

# 如何定位
browser.find_element_by_class_name()

1.3 scrapy

- 创建一个工程：scrapy startproject xxxPro
- cd xxxPro
- 在spiders子目录中创建一个爬虫文件
	- scrapy genspider spiderName www.xxx.com
- 执行工程：
  - scrapy crawl spiderName

2. 网页

2.1

title 标题
hr		分割线
h		 	块级标签（不能嵌套）
div		块级标签（可以嵌套）

2.2 引入静态资源

head标签中引入
引入css文件
<link rel="stylesheet" type="text/css" href="../static/css/index.css"/>
引入js文件（别人的资源）
<script src="../static/js/echarts.min.js" ></script>

body标签中写正文
body最后引入自己的js文件：<script src="../static/js/echarts/controller.js" ></script>

2.3 css中对页面进行布局

布局前，现在页面中写入几个div 同时给它属性（id#、class.）

在css中进行定位
#title{                      id
	position: absolute;        绝对定位
	width: 40%;
	height: 10%;
	top: 0;
	left: 30%;
	background: hotpink;
}

2.4 js中写入方法

类似于在网页中写入很多script，只是将这些代码写入单个文件中，不会显得很乱。
如果有多个js文件，需要对后端获取到数据，可以写一个controller.js,专门控制与后端数据进行交换的js文件
详细见：visualization文件

2.5 ajax前后端进行交互

这个后端给前端数据，并没有前端给后端。
function get_area_r2(){
	$.ajax(
		{
			url:"/index",    // 后端接口，return过来的数据
			success:function(data){
				// console.log(data)
        // area_r2_option这个是复制过来的option
        // ec_area_r2这个echarts的初始化
				area_r2_option.xAxis[0].data=data.name         // echarts中注意下标
				area_r2_option.series[0].data=data.attack
				area_r2_option.series[1].data=data.defense
				area_r2_option.series[2].data=data.height
				area_r2_option.series[3].data=data.weight
				area_r2_option.series[4].data=data.age
				ec_area_r2.setOption(area_r2_option)           // 最后要setOption
			},
			error:function(xhr,type,errorThrown){

			}
		}
	);
}

3. flask

3.1 目录

- static     静态资源
- template   网页模板
- app.py			启动文件（编写路由）

3.2 三人组

request用法

render_template     渲染网页
request							前端获取到数据
redirect						网页重定向

3.3 ajax 动态传输数据

request.方法名     获取到前端的值
return jsonify(data)     返回给ajax，然后js做相应的处理

3.4 配置文件

app.debug = True
app.config['JSON_AS_ASCII'] = False           # 返回json数据时乱码就用

3.5 蓝图

详见目录。

4. 数据预处理

4.1 json与dataframe转换转换

json与dataframe相互转换

json与dataframe相互转换

from pandas import json_normalize
# 将json数据转化成dataframe
with open(path, "r") as f:
  jsondata = json.load(f)
data = json_normalize(jsondata)

4.2 预处理

pd.read_csv(path, header=None, names=['天气状况'])# 给读取到的数据加上标题，names里面是标题

eval(data.iloc[temp].tolist()[0])     # eval 去掉字符串两边的分号， iloc按下标取列

json.dumps(data_list)      						# 序列化成json数据

# dataframe二维列表
[[value['data.city']+"市", int(value['data.wendu'])] for index, value in data.iterrows()]

data["data.city"].tolist()            # series变成list

min_id = data['球员薪金'].idxmin()  # 某行最小值的id

groupby
agg

详见data_process 文件、官方文档