echarts实现每日地图情况更新

最新推荐文章于 2024-05-16 10:30:35 发布

UzumakiHan

最新推荐文章于 2024-05-16 10:30:35 发布

阅读量1k

点赞数 1

分类专栏： html

本文链接：https://blog.csdn.net/Hhjian524/article/details/104536845

版权

html 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

效果演示:
在这里插入图片描述

代码:
html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./echarts.min.js"></script>
    <script src="./china.js"></script>
    <script src="./jquery.js"></script>
    <script src="./index.js"></script>
    <title>疫情地图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        /* #main{
          margin: 0 auto;  
        } */
    </style>
</head>
<body>
    <div id="main" style="width: 800px;height:600px;"></div>
</body>
</html>

JS:

window.onload = function () {
    initEchart()
    function initEchart(){
        var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '疫情实时地图',
            x: 'center',
            textStyle: {
                color: '#9c0505'
            }
        },
        tooltip: {
            trigger:'item',
            formatter:'地区:{b}<br/>确诊:{c}'
        },

        series: [
            {
                type: 'map',
                map: 'china',
                data:[],
                label:{
                    show:true,
                    color:'#fff'
                },
                itemStyle:{
                    borderColor:'blue'
                },
                emphasis:{//鼠标hover时样式
                    label:{
                        color:'#fff'
                    },
                    itemStyle:{
                        areaColor:'green'
                    }
                }
            },
        ],
        visualMap:{//左下方视图
            type:'piecewise',
            show:true,
            pieces:[
                {min:10000},
                {min:1000,max:9999},
                {min:100,max:999},
                {min:10,max:99},
                {min:1,max:9},
                {value:0}
            ],
            inRange:{
                color:['#fff','#ffaa85','#660208']
            }
        }
    };
    // 使用刚指定的配置项和数据显示图表。
    // myChart.setOption(option);
    myChart.showLoading()
    var mapData;
    //ajax获取疫情数据
    $.ajax({
        type:'GET',
        url:'https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427',
        dataType:"jsonp",
        crossDomain:true,
        jsonpCallback:"jsonpCallbackFun",
        jsonp:"callback",
        success:function(data){
            mapData= data.data.list.map(item=>{
                return{
                    name:item.name,
                    value:item.value
                }
            })
            option.series[0].data = mapData;
           setTimeout(()=>{
            myChart.setOption(option);
            myChart.hideLoading();
           },1500)
        },
        error:function(err){
            console.log(err)
        }
    }) 
    window.addEventListener("resize", function () {
        myChart.resize();
    });
    }
    
}

UzumakiHan

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
echarts实现每日地图情况更新

效果演示:代码:html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <me...
复制链接

扫一扫

专栏目录