1、获取数据
地址：https://voice.baidu.com/act/newpneumonia/newpneumonia
通过python来获取数据
import requests
from lxml import etree
import json
import openpyxl
#爬虫
url = 'https://voice.baidu.com/act/newpneumonia/newpneumonia'
headers = {
"User-Agent": "自己的user-agent"
}
response = requests.get(url=url,headers=headers).text
#在使用xpath的时候要用树形态
html = etree.HTML(response)
#用xpath来获取之前找到的页面json数据
json_text = html.xpath('//script[@type="application/json"]/text()')
json_text = json_text[0]
# print(json_text)解析json数据：
#用python本地自带的库转换一下json数据
result = json.loads(json_text)
# print(result)
#通过打印出转换的对象我们可以看到我们要的数据都要key为component对应的值之下
所以现在我们将值拿出来
result = result["component"]
# 再次打印看看结果
# print(result)
# 获取国内当前数据
result = result[0]['caseList']
# print(result)将获取到的数据保存到excel中
# 创建工作簿
wb = openpyxl.Workbook()
# 创建工作表
ws = wb.active
# 设置表的标题
ws.title = "国内疫情"
# 写入表头
ws.append(["省份","累计确诊","死亡","治愈"])
#获取各省份的数据并写入
for line in result:
line_name = [line["area"],line["confirmed"],line["died"],line["crued"]]
for ele in line_name:
if ele == '':
ele = 0
ws.append(line_name)
#保存到excel中
wb.save('./china.xlsx')查看获取到的数据
2、数据可视化
在django里面创建app--->demo
在demo.views.py里面编写视图函数，将数据传到前端
def map(request):
# 设置列对齐
pd.set_option('display.unicode.ambiguous_as_wide', True)
pd.set_option('display.unicode.east_asian_width', True)
# 打开文件
df = pd.read_excel('./china.xlsx')
# 对省份进行统计
data2 = df['省份']
data2_list = list(data2)
data3 = df['累计确诊']
data3_list = list(data3)
data4 = df['死亡']
data4_list = list(data4)
data5 = df['治愈']
data5_list = list(data5)
lists = [list (a) for a in zip(data2,data3)]
print(lists)
keys = ['name','value']
list_joson = [dict(zip(keys,item)) for item in lists]
str_json = json.dumps(list_joson,indent=2,ensure_ascii=False)
print(str_json)
context = {"datas":str_json}
return render(request, 'test2.html', context)配置urls
url(r'^demo/test2',demo.views.map),
编写html，用ercharts绘制中国疫情地图
并设置，点击某个省份的小图标，则可跳转到具体的省份地图，双击则退回全国地图。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=EDGE">
<title>HTML5 Canvas实现中国地图DEMO演示</title>
<style>
#china-map {
width: 1000px;
height: 1000px;
margin: auto;
}
#box{
display:none;
background-color: goldenrod;
width: 180px;
height: 30px;
}
#box-title{
display:block;
}
</style>
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/echarts.min.js"></script>
<script type="text/javascript" src="/static/js/map/china.js"></script>
</head>
<body>
<div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
<button id="back">返回全国</button>
<div id="china-map"></div>
<script>
var myChart = echarts.init(document.getElementById('china-map'));
var oBack = document.getElementById("back");
var provinces = ['shanghai', 'hebei', 'shanxi', 'neimenggu', 'liaoning', 'jilin', 'heilongjiang', 'jiangsu', 'zhejiang', 'anhui', 'fujian', 'jiangxi', 'shandong', 'henan', 'hubei', 'hunan', 'guangdong', 'guangxi', 'hainan', 'sichuan', 'guizhou', 'yunnan', 'xizang', 'shanxi1', 'gansu', 'qinghai', 'ningxia', 'xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen'];
var provincesText = ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门'];
var lists = {{ datas|safe }};
var seriesData = lists;
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
};
oBack.onclick = function () {
initEcharts("china", "中国");
};
initEcharts("china", "中国");
// 初始化echarts
function initEcharts(pName, Chinese_) {
var tmpSeriesData = pName === "china" ? seriesData : [];
var option = {
title: {
text: Chinese_ || pName,
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{b}<br/>{c} 人次'
},
visualMap: {
type: 'piecewise',
pieces: [
{min: 1000, max: 1000000, label: '累计确诊大于等于1000人', color: '#372a28'},
{min: 500, max: 999, label: '累计确诊500-999人', color: '#4e160f'},
{min: 100, max: 499, label: '累计确诊100-499人', color: '#974236'},
{min: 10, max: 99, label: '累计确诊10-99人', color: '#ee7263'},
{min: 1, max: 9, label: '累计确诊1-9人', color: '#f5bba7'},
],
color: ['#E0022B', '#E09107', '#A3E00B'],
left:"10%", //组件离容器左侧的距离,'left', 'center', 'right','20%'
top:"auto", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
right:"20%", //组件离容器右侧的距离,'20%'
bottom:"35%", //组件离容器下侧的距离,'20%'
orient:"vertical", //图例排列方向
padding:5,
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
roamController: {
show: true,
left: 'left',
mapTypeControl: {
'china': true
}
},
series: [
{
name: Chinese_ || pName,
type: 'map',
mapType: pName,
roam: false,//是否开启鼠标缩放和平移漫游
data: tmpSeriesData,
top: "3%",//组件距离容器的距离
zoom:1.1,
selectedMode : 'single',
label: {
normal: {
show: true,//显示省份标签
textStyle:{color:"#fbfdfe"}//省份标签字体颜色
},
emphasis: {//对应的鼠标悬浮效果
show: true,
textStyle:{color:"#323232"}
}
},
itemStyle: {
normal: {
borderWidth: .5,//区域边框宽度
borderColor:'#4ea397' ,//区域边框颜色
areaColor:'skyblue',//区域颜色
},
emphasis: {
borderWidth: .5,
borderColor: '#4b0082',
areaColor:"#ece39e",
}
},
}
]
};
myChart.setOption(option);
myChart.off("click");
if (pName === "china") { // 全国时，添加click 进入省级
myChart.on('click', function (param) {
console.log(param.name);
// 遍历取到provincesText 中的下标 去拿到对应的省js
for (var i = 0; i < provincesText.length; i++) {
if (param.name === provincesText[i]) {
//显示对应省份的方法
showProvince(provinces[i], provincesText[i]);
break;
}
}
if (param.componentType === 'series') {
var provinceName =param.name;
$('#box').css('display','block');
$("#box-title").html(provinceName);
}
});
} else { // 省份，添加双击 回退到全国
myChart.on("dblclick", function () {
initEcharts("china", "中国");
});
}
}
// 展示对应的省
function showProvince(pName, Chinese_) {
if(Chinese_){
//这写省份的js都是通过在线构建工具生成的，保存在本地，需要时加载使用即可，最好不要一开始全部直接引入。
loadBdScript('$' + pName + 'JS', '/static/js/map/province/' + pName + '.js', function () {
initEcharts(Chinese_);
});
}
// 加载对应的JS
function loadBdScript(scriptId, url, callback) {
var script = document.createElement("script");
script.type = "text/javascript";
if (script.readyState) { //IE
script.onreadystatechange = function () {
if (script.readyState === "loaded" || script.readyState === "complete") {
script.onreadystatechange = null;
callback();
}
};
} else { // Others
script.onload = function () {
callback();
};
}
script.src = url;
script.id = scriptId;
document.getElementsByTagName("head")[0].appendChild(script);
};
</script>
</body>
</html>
758
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
