echarts地图+热力图

最新推荐文章于 2024-07-04 10:44:31 发布

magnetoY

最新推荐文章于 2024-07-04 10:44:31 发布

阅读量6.6k

点赞数 2

文章标签：前端 echarts js

本文链接：https://blog.csdn.net/weixin_47235643/article/details/121531518

版权

综合了网上的大佬的概述，做了一下比较亲民的优化，json文件可以在下面的链接上定制，经纬度可以用百度地图的坐标拾取器和获取，图中以青岛为例，感谢大佬们的之前的贡献，可以让后来人用上现成的，话不多说，贴代码。Make A PieGallery - 分享你的可视化作品https://www.makeapie.com/editor.html?c=xmCAi_XNuJ

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="qingdao.json"></script>
<div id="graphic">
<div id="main" style="width: 100%;height:1000px;"></div>
</div>

<script src="引入jquery"></script>
<script type="text/javascript" src="引入echarts"></script><script>
window.onload = function(){
//这里需要下载官网的全国地图，记得要放在服务器环境下

$.get('qingdao.json', function (bdjson) {
        echarts.registerMap('qingdao', bdjson);
        var myChart = echarts.init(document.getElementById('main'));

option = {


    title: {
        text: '自定义热力图',
        subtext: 'data from PM25.in',
        //sublink: 'http://www.pm25.in',
        left: 'center',
        textStyle: {
            color: '#fff'
        }
    },
    backgroundColor: '#404a59',
    visualMap: {
        min: 0,
        max: 500,
        splitNumber: 5,
        inRange: {
            color: ['#d94e5d','#eac736','#50a3ba'].reverse()
        },
        textStyle: {
            color: '#fff'
        }
    },
    geo: {
   
        map: 'qingdao',
        label: {
            emphasis: {
                show: false
            }
        },
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [{
        name: 'AQI',
        type: 'heatmap',
        coordinateSystem: 'geo',
        
        data: [
            [120.373486, 36.095612 , 100],  // 经纬度 + 数量
            [120.424509, 36.06936, 12],
            [120.401513,36.14261, 102],
            [120.449518,36.122555, 4561],
            [120.02753,36.790191, 122],
            [120.110318,36.042983, 200],
            [120.464466,36.393326, 102],
            [120.02753,36.10646, 1200],
            [120.374779,36.149371, 3121],
            [120.342584,36.06726, 1112],
            [120.601296,36.135847, 1842],
        ]
    }]
};
                    
window.onresize = myChart.resize;
    myChart.setOption(option,true);
      
}) 
}       
</script>
</body>
</html>

magnetoY

关注

2
点赞
踩
18

收藏

觉得还不错? 一键收藏
1
评论
echarts地图+热力图

综合了网上的大佬的概述，做了一下比较亲民的优化，json文件可以在下面的链接上定制，经纬度可以用百度地图的坐标拾取器和获取，图中以青岛为例，感谢大佬们的之前的贡献，可以让后来人用上现成的，话不多说，贴代码。Make A PieGallery - 分享你的可视化作品https://www.makeapie.com/editor.html?c=xmCAi_XNuJ<!DOCTYPE html><html lang="en"><head><meta char
复制链接

扫一扫