上一篇文章讲了如何爬取丁香园的疫情数据,但是呢,由于是使用Django直接返回的页面数据,不具有通用性,现在打算把前后端分离开,在前端直接使用js请求加载Echarts地图
后端数据格式
{"湖北": "1423", "广东": "151", "浙江": "128", "河南": "128", "重庆": "110", "湖南": "100", "山东": "75", "北京": "72", "安徽": "70", "四川": "69", "福建": "56", "上海": "53", "江西": "48", "江苏": "47", "广西": "46", "陕西": "35", "海南": "33", "辽宁": "27", "云南": "26", "天津": "22", "黑龙江": "21", "河北": "18", "甘肃": "14", "山西": "13", "内蒙古": "11", "香港": "8", "贵州": "7", "宁夏": "7", "吉林": "6", "澳门": "6", "台湾": "5", "新疆": "5", "青海": "4"}
由于Echarts中要求的数据长这样
var datavirus=[
{name:"南海诸岛",value: 0},
{name: '北京', value: 14},
{name: '天津', value: 4},
{name: '上海', value: 16},
{name: '重庆', value: 9},
...
]
所以前端要处理一下
for(var i in dataStage) {
var statisticsObj = {name:'',value:''}; //因为ECharts里边需要的的数据格式是这样的
statisticsObj.name = i;
statisticsObj.value = dataStage[i];
statisticsData.push(statisticsObj); //把拿到的异步数据push进我自己建的数组里
}
完整的ajax请求如下
var statisticsData = []; //这是我自己建的空数组,为了把异步拿到的数据push进去
$.ajax({
type : "get",
async : true, //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)
url : "/china-wuhan/virusdata", //请求发送到相应的servlet
dataType : "json",
success : function(data){
if (data) {
var dataStage = data;
for(var i in dataStage) {
var statisticsObj = {name:'',value:''}; //因为ECharts里边需要的的数据格式是这样的
statisticsObj.name = i;
statisticsObj.value = dataStage[i];
statisticsData.push(statisticsObj); //把拿到的异步数据push进我自己建的数组里
}
console.log(statisticsData);
myChart.hideLoading();
myChart.setOption({
series: [{
name: '确诊人数',
type: 'map',
geoIndex: 0,
data: statisticsData
}]
});
myChart.on('click', function (params) {
Swal.fire(
params.name+"确诊人数"+params.data['value']+"人",
'',
)
});
}
else {
alert("图表请求数据失败!");
}
}
});
整个过程分两步,第一步加载data为空的初始的图表
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
backgroundColor: '#404a59',
title: {
text: '武汉疫情',
x: 'center',
textStyle: {
fontSize:28,
color: '#fff'
},
},
tooltip: {
formatter:function(params,ticket, callback){
return params.seriesName+'<br />'+params.name+':'+params.value
}//数据格式化
},
visualMap: {
min: 0,
max: 50,
align: 'auto',
{#type: 'piecewise', //是否连续#}
left: 'left',
top: 'bottom',
text: ['高','低'], //取值范围的文字
{#categories: [#}
{# '0','1','2','3','4','5','6','7','8','9','10','14','16','32','444',#}
{#],#}
inRange: {
color: ['#fdfff8','#f0a23f','#DD7931','#dd5340','#dd292f','#DD3E1B','#DD2020','#742B33',],
},
show:false//图注
},
geo: {
map: 'china',
roam: false,//不开启缩放和平移
zoom:1.23,//视角缩放比例
label: {
normal: {
show: true,
fontSize:'10',
color: 'rgba(0,0,0,0.7)'
}},
itemStyle: {
normal:{
borderColor: 'rgba(0, 0, 0, 0.2)'
},
emphasis:{
areaColor: '#53adf3',//鼠标选择区域颜色
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
series : [
{
name: '确诊人数',
type: 'map',
geoIndex: 0,
data: []
}
]
});
第二步,通过ajax传入data数据
myChart.showLoading();
var statisticsData = []; //这是我自己建的空数组,为了把异步拿到的数据push进去
$.ajax({
type : "get",
async : true, //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)
url : "/china-wuhan/virusdata", //请求发送到相应的servlet
dataType : "json",
success : function(data){
if (data) {
var dataStage = data;
for(var i in dataStage) {
var statisticsObj = {name:'',value:''}; //因为ECharts里边需要的的数据格式是这样的
statisticsObj.name = i;
statisticsObj.value = dataStage[i];
statisticsData.push(statisticsObj); //把拿到的异步数据push进我自己建的数组里
}
console.log(statisticsData);
myChart.hideLoading();
myChart.setOption({
series: [{
name: '确诊人数',
type: 'map',
geoIndex: 0,
data: statisticsData
}]
});
myChart.on('click', function (params) {
Swal.fire(
params.name+"确诊人数"+params.data['value']+"人",
'',
)
});
}
else {
alert("图表请求数据失败!");
}
}
});