526互联

关于ECharts调用外部信息，然后将相关数据放入中国地图的具体实现

发布时间 2023-03-23 11:23:10作者: yesyes1

相关描述

之前我已经试过直接导入中国地图，但是仅仅只是将固定的数据导入进去，并没有涉及到将数据库+地图化显示，只能说是还没有学到精髓了；

所以这次在作业的压迫下，就正好实现了这个延迟了许久的事情啦！

遗留问题的解决

想要获取到数据库里面的内容，还是少不了ajax的参与，将ajax部分写进去。源代码如下：

//获取数据
    function getData() {
        $.ajax({
            url: "https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5",
            dataType: "jsonp",
            success: function (data) {
                var res = data.data || "";
                res = JSON.parse(res);
                var newArr = [];
               
                if (res) {
                    //获取到各个省份的数据
                    var province = res.areaTree[0].children;//这里根据网页里面的json数据得到的存储的想要的数据信息
                    for (var i = 0; i < province.length; i++) {
                        var json = {
                            name: province[i].name,
                            value: province[i].total.confirm//得到总数
                        }
                        newArr.push(json)
                    }
                    console.log(newArr)
                    console.log(JSON.stringify(newArr))
                    //使用指定的配置项和数据显示图表
                    myChart.setOption({
                        series: [
                            {
                                name: '确诊数',
                                type: 'map',
                                mapType: 'china',
                                roam: false,
                                label: {
                                    show: true,
                                    color: 'rgb(249, 249, 249)'
                                },
                                data: newArr
                            }
                        ]
                    });
                }
            }

        })
    }
    getData();

以上为主要代码，url为相关数据的存储点，可以复制到网页里面看看效果；

没有连接数据库，直接调用的外部数据信息进行数据可视化；