Echarts中使用Ajax请求武汉疫情数据绘制全国疫情分布地图

上一篇文章讲了如何爬取丁香园的疫情数据，但是呢，由于是使用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("图表请求数据失败!");
                }
            }
        });