一、原理

引用对应市区json数据（比如我就是引用的河南省驻马店市的数据），通过百度地图坐标拾取器获取地区的经纬度，将数据填在对应位置（我下面有注释），再配置下样式颜色之类的渲染上就可以了

二、看图片可能感受不大，下面是我echarts社区的主页，里面有这个例子，大家可以去看看效果

我的echarts个人主页

三、效果图

在这里插入图片描述

四、直接上代码，解释在注释里

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src = "jquery-3.4.1.js的路径"></script>
    <script type="text/javascript" src = "echarts.js的路径"></script>
</head>
<body>
<div id="map" style="width: 1200px;height:900px;"></div>
<script type="text/javascript">
    	var dom = document.getElementById("map");
    //得到echarts的实例对象
    var myChart = echarts.init(dom);
    //根据百度地图坐标拾取器来的经纬度
    var geoCoordMap = {
        '遂平县': [114.015819, 33.150944],
        '上蔡县': [114.276256, 33.267906],
        '西平县': [114.022143, 33.394355],
        "驿城区": [114.006045, 32.978599],
        '确山县': [114.033641, 32.810768],
        "泌阳县": [113.335694, 32.731107],
        "汝南县": [114.375141, 33.016389],
        "正阳县": [114.398138, 32.615372],
        "平舆县": [114.629254, 32.969876],
        "新蔡县": [114.979952, 32.752487]

    };
    //数据信息（黄色点点的大小，鼠标移上去会显示这个数据）
    var data = [{
            name: "遂平县",
            value: 199
        },
        {
            name: "上蔡县",
            value: 170
        },
        {
            name: "西平县",
            value: 102
        },
        {
            name: "驿城区",
            value: 81
        },
        {
            name: "确山县",
            value: 147
        },
        {
            name: "泌阳县",
            value: 130
        },
        {
            name: "汝南县",
            value: 172
        },
        {
            name: "正阳县",
            value: 123
        },
        {
            name: "平舆县",
            value: 120
        },
        {
            name: "新蔡县",
            value: 292
        }
    ];
	//处理数据的函数,将经纬度,名称,value结合到一起放入series中的data中
    var convertData = function(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value)
                });
            }
        }
        return res;
    };
    
    //配置样式
    var optionMap = {
        
        backgroundColor: '#404a59',
        title: {
            text: 'XX数量-驻马店市',

            left: 'center',
            textStyle: {
                color: '#fff'
            }
        },
        //鼠标移到黄点点上显示数据就是配置的这个
        tooltip: {
            trigger: 'item',

            //自定义修改显示
            formatter: function(data) {

                return res = '<div><p>数量：' + data.value[2] + '</p></div>'

            },
        },

        geo: {
            map: 'china',
            //中心点(经纬度)
            center: [114.006045, 32.978599],
            //缩放比例
            zoom: 1.2,
            label: {
                emphasis: {
                    show: false
                }
            },
            //是否允许拖拽
            roam: true,
            itemStyle: {
                normal: {
                    areaColor: '#323c48',
                    borderColor: '#111'
                },
                emphasis: {
                    areaColor: '#2a333d'
                }
            }
        },
        series: [{
            name: 'pm2.5',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: convertData(data),
            symbolSize: function(val) {
                return val[2] / 10;
            },
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#f4e925',
                    shadowBlur: 10,
                    shadowColor: '#333'
                }
            },
            zlevel: 1
        }]
    };
    //411700.json 是对应区域的地理信息json文件
    $.get('../json/411700.json', function (myJson){
        echarts.registerMap('411700', myJson) //注册
        optionMap.geo.map = '411700';
        myChart.setOption(optionMap);
    });
    
    
</script>
</body>
</html>

五、本地访问json会有跨域的问题,为了图方便我就放在了服务器上看网页的效果…在社区的话没有这个问题

# json
Logo
永洪数据分析社区

永洪科技，致力于打造全球领先的数据技术厂商，具备从数据应用方案咨询、BI、AIGC智能分析、数字孪生、数据资产、数据治理、数据实施的端到端大数据价值服务能力。

更多推荐

cover

java计算机毕业设计教师工作量统计系统 基于SpringBoot的高校教师绩效测算与可视化平台 教师教学任务与工作量智能汇总系统

avatar 永洪数据分析社区
cover

BI是报表？BI是可视化？BI到底是什么？

avatar 永洪数据分析社区

BackstopJS 与 Prettier 集成：配置文件格式化与团队规范统一

在当今的前端开发环境中，**BackstopJS** 作为一款强大的视觉回归测试工具，已经成为保障UI一致性的重要武器。然而，随着团队规模的扩大和项目的复杂度提升，如何确保所有开发人员遵循统一的配置规范成为了一个挑战。本文将为您详细介绍如何通过 Prettier 工具实现 BackstopJS 配置文件的自动格式化，从而提升团队协作效率和代码质量。💪## 为什么需要 BackstopJS 配

avatar 永洪数据分析社区