结对作业之疫情地图 3

//获取疫情数据

$.ajax({
    url:"https://news.sina.com.cn/project/fymap/ncp2020_full_data.json",
    dataType:"jsonp",
    jsonpCallback:"jsoncallback",
    success:function(res){
         //1、获取数据
        var allData = res.data;
        var historylist = allData.historylist;
        console.log(res);
        //2、设置更新时间
        $(".time span").html(allData.cachetime);
        //3、设置详情信息
        (function(){
            var infoConfig={
                "cn_econNum":{
                    "title":"现有确诊",
                    "color":"#ff5e49",
                },
                "cn_asymptomNum":{
                    "title":"无症状",
                    "color":"#fe653b"
                },
                "cn_susNum":{
                    "title":"现有疑似",
                    "color":"#fe8d00"
                },
                "cn_heconNum":{
                    "title":"现有重症",
                    "color":"#525498"
                },
                "cn_conNum":{
                    "title":"累计确诊",
                    "color":"#ff0910"
                },
                "cn_jwsrNum":{
                    "title":"境外输入",
                    "color":"#356ea0"
                },
                "cn_cureNum":{
                    "title":"累积治愈",
                    "color":"#00b1b7"
                },
                "cn_deathNum":{
                    "title":"累计死亡",
                    "color":"#4c5054"
                }
            }
            var htmlStr = "";
            for(var k in infoConfig){
                var value  = historylist[0][k] - historylist[1][k];
                htmlStr += `<li>
                                <h5>${infoConfig[k].title}</h5>
                                <p style = "color:${infoConfig[k].color}">${historylist[0][k]}</p>
                                <span>
                                    <em>昨日</em>
                                    <i style = "color:${infoConfig[k].color}">
                                        ${value > 0? "+" + value :value}
                                    </i>
                                </span>
                            </li>`
            }
            $(".info").html(htmlStr)
        })();

        //4、设置中国疫情地图
        (function(){
            //获取数据
            var list = allData.list;
            //分别存储当前确诊和累计确诊人数
            var nowList = [];
            var allList = [];
            list.forEach(function(element){
                nowList.push({
                    name:element.name,
                    value:element.econNum
                });
                allList.push({
                    name:element.name,
                    value:element.value
                })
                
            })
            
            var china_map =echarts.init(document.querySelector(".china_map .content"));
            var option ={
                geo:{
                    map:"china",
                    itemStyle: {
                        areaColor: "#fff",
                        borderColor: "#666",
                        borderWidth: "0.3",
                        opacity: 1
                    },
                    label: {
                        show:true,
                        textStyle: {
                            color: "#000",
                            fontSize: 8,
                            fontWeight: 700
                        },
                    },
                    emphasis: {
                       itemStyle: {
                           areaColor: "#b4ffff",
                       } 
                    },
                    select: {
                        itemStyle: {
                            areaColor: "#b4ffff",
                        }
                    }
                },
                series: [
                    {
                        type: "map",
                        geoIndex: 0,
                        data: nowList
                    }
                ],   
                visualMap: {
                    type: 'piecewise',
                    pieces: [
                        {min: 0, max: 0, label: '0', color: '#fff' },
                        {min: 1, max:9, label: '1-9', color: '#ffe4da' },
                        {min: 10, max:99, label: '10-99', color: '#ff937f' },
                        {min: 100, max:999, label: '100-999', color: '#ff6c5e' },
                        {min: 1000, max:9999, label: '1000-9999', color: '#fe3335' },
                        {min: 10000, label: '>=10000', color: '#cd0000' },
                    ],
                    itemWidth:10,
                    itemHeight:10,
                    itemGap:2,
                    inverse: false
                },
                tooltip:{
                    show:true,
                    formatter: function (param) {
                        return `<section style="display:flex;align-items:center;position:relative;z-
                        index:9999">
                            <div style="padding:0px 10px;font-size:12px;">地区:
                            ${param.name}<br></br>确诊: ${param.value}</div>
                            <a style="display:flex; 
                            align-items:center;
                            height:30px;
                            border-left:1px solid #fff;
                            padding-left:8px;
                            color:#fff;
                            font-size:12px"
                            href="#">详情 </a>
                        </section>`;
                    },
                    padding: 3,
                    borderColor: '#333',
                    enterable: true,
                    backgroundColor: "rgba(50, 50, 50, 0.7)",
                    textStyle: {
                        color: "#fff",
                    },
                    triggerOn:'mousemove'
                }
            };
            china_map.setOption(option);
            
            // //设置地图下钻
            // china_map.on('click',params=>{
            //     console.log("onclick"+params.name);
            // })

             //根据窗口的大小变动图表 
             window.addEventListener('resize', function () {
                china_map.resize()
              })
              
            //设置地图切换效果
            $(".china_map nav a").click(function(){
                $(".china_map nav a").toggleClass("active");
                //切换option中series中得data属性
                option.series[0].data = $(this).index() == 0 ? nowList : allList;
                china_map.setOption(option)
            })
        })();
    }
})

　　

运行效果图：