Echarts做地图，将每个省的数据标记在地图上，根据数据的大小做散点方大效果，并筛选前五个最大省份进行展示（经常有这种需求，看自己的代码跟屎一样，本文只做记录，）

最新推荐文章于 2024-05-06 15:49:21 发布
最新推荐文章于 2024-05-06 15:49:21 发布
阅读量5.7k 收藏 17
点赞数 1
分类专栏： 前端 文章标签： echarts javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Gabriel_wei/article/details/122158116
版权

效果

请添加图片描述

js代码

function loadMap() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('mapChart'));

    var nameColor = " rgb(55, 75, 113)"
    var name_fontFamily = '宋体'
    var name_fontSize = 35
    var mapName = 'china'
    // var data = []
    //用于存储地图数据
    var geoCoordMap = {};
    //划上地图以后的显示
    var toolTipData = [];

    /*获取地图数据*/
    myChart.showLoading();
    var mapFeatures = echarts.getMap(mapName).geoJson.features;
    myChart.hideLoading();
    var data;
    $.ajax({
        // url: ajaxBaseUrl + "data/event-distributed.json",
        url: bigApi.regionalDistributionOfSurveyData,
        dataType: "json"
    }).done(function () {
        $("#block5").addClass("chart-done");
    }).done(function (back) {
        if (back.status == '0') {
            data = back.result;
            console.log("ssss");
            console.log(back);


            data.forEach(function (v) {
                //地区名称
                var name = v.name;
                toolTipData.push({
                    name: name,
                    value: [{
                        name: "问卷数量",
                        value: v.value + '份'
                    }, {
                        name: "播种总面积",
                        value: v.bzmj + '亩'
                    }, {
                        name: "总产量",
                        value: v.amount + '吨'
                    }, {
                        name: "总收入",
                        value: v.money + '万元'
                    }]
                })
                // toolTipData.push({
                //     name: name,
                //     value: [{
                //         name: "111",
                //         value: v.value + '份'
                //     }]
                // })
            })
            mapFeatures.forEach(function (v) {
                // 地区名称
                var name = v.properties.name;
                // 地区经纬度
                geoCoordMap[name] = v.properties.cp;
            });
            // console.log("555")
            // console.log(data);
            var max = 480,
                min = 9; // todo
            var maxSize4Pin = 50,
                minSize4Pin = 20;

            var convertData = function (data) {
                // console.log("666");
                // console.log(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),
                        });
                    }
                }
                // console.log("2222");
                // console.log(res);
                return res;
            };

            option = {
                title: {
                    text: '调查数据区域分布',
                    // subtext: 'data from PM25.in',
                    // sublink: 'http://www.pm25.in',
                    left: 'center',
                    textStyle: {
                        fontWeight: 'normal',
                        color: '#fff',
                        fontSize: 25
                    }
                },
                tooltip: {
                    //鼠标划上去以后显示的提示
                    trigger: 'item',
                    formatter: function (params) {
                        if (typeof (params.value)[2] == "undefined") {
                            var toolTiphtml = ''
                            for (var i = 0; i < toolTipData.length; i++) {
                                if (params.name == toolTipData[i].name) {
                                    toolTiphtml += toolTipData[i].name + ':<br>'
                                    for (var j = 0; j < toolTipData[i].value.length; j++) {
                                        toolTiphtml += toolTipData[i].value[j].name + ':' + toolTipData[i].value[j].value + "<br>"
                                    }
                                }
                            }
                            // console.log(toolTiphtml)
                            // console.log(convertData(data))
                            return toolTiphtml;
                        } else {
                            var toolTiphtml = ''
                            for (var i = 0; i < toolTipData.length; i++) {
                                if (params.name == toolTipData[i].name) {
                                    toolTiphtml += toolTipData[i].name + ':<br>'
                                    for (var j = 0; j < toolTipData[i].value.length; j++) {
                                        toolTiphtml += toolTipData[i].value[j].name + ':' + toolTipData[i].value[j].value + "<br>"
                                    }
                                }
                            }
                            // console.log(toolTiphtml)
                            // console.log(convertData(data))
                            return toolTiphtml;
                        }
                    }
                },
                legend: {
                    //图例
                    orient: 'vertical',
                    y: 'bottom',
                    x: 'right',
                    data: ['credit_pm2.5'],
                    textStyle: {
                        color: '#fff'
                    }
                },
                visualMap: {
                    show: false,
                    min: 0,
                    max: 600,
                    left: 'left',
                    top: 'bottom',
                    text: ['高', '低'], // 文本，默认为数值文本
                    calculable: true,
                    seriesIndex: [1],
                    //控制地图颜色的显示区间
                    inRange: {
                        // color: ['#3B5077', '#031525'] // 蓝黑
                        // color: ['#ffc0cb', '#800080'] // 红紫
                        // color: ['#3C3B3F', '#605C3C'] // 黑绿
                        //  color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
                        // color: ['#23074d', '#cc5333'] // 紫红
                        // color: ['#00467F', '#A5CC82'] // 蓝绿
                        // color: ['#1488CC', '#2B32B2'] // 浅蓝
                        // color: ['#00467F', '#A5CC82', '#ffc0cb'] // 蓝绿红
                        // color: ['#00467F', '#A5CC82'] // 蓝绿
                        // color: ['#00467F', '#A5CC82'] // 蓝绿
                        // color: ['#00467F', '#A5CC82'] // 蓝绿
                        color: ['#22e5e8', '#0035f9', '#22e5e8'] // 蓝绿

                    }
                },
                /*工具按钮组,导出图片等按钮组*/
                toolbox: {
                    show: false,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        dataView: {
                            readOnly: false
                        },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                geo: {
                    //地图的初始配置
                    show: true,
                    map: mapName,
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    roam: false,
                    itemStyle: {
                        normal: {
                            areaColor: '#F2F2F2',//地图没有数据的时候的颜色0A4579
                            // areaColor: '#0A4579',//地图没有数据的时候的颜色
                            borderColor: '#097bba'
                        },
                        emphasis: {
                            // areaColor: '#2B91B7' //鼠标划上去的时候颜色
                            areaColor: '#8389E0'

                        }
                    }
                },
                series: [{
                	//对有数据的省份画点
                    name: '散点',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    data: convertData(data),
                    symbolSize: function (val) {
                        //用来设置每个省份圆圈的大小
                        return val[2] / 6;
                    },
                    label: {
                        show: false,
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: false,//是否显示省份的名称
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(255,255,0,0.8)'
                        }
                    }
                },
                {
                    type: 'map',
                    map: mapName,
                    geoIndex: 0,
                    aspectScale: 0.75, //长宽比
                    showLegendSymbol: false, // 存在legend时显示
                    label: {
                        normal: {
                            show: true
                        },
                        emphasis: {
                            show: false,
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    },
                    roam: true,
                    itemStyle: {
                        normal: {
                            areaColor: '#031525',
                            borderColor: '#3B5077',
                        },
                        emphasis: {
                            areaColor: '#2B91B7'
                        }
                    },
                    animation: false,
                    data: data
                },
                {
                    name: '点',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    symbol: 'pin', //气泡
                    symbolSize: function (val) {
                        var a = (maxSize4Pin - minSize4Pin) / (max - min);
                        var b = minSize4Pin - a * min;
                        b = maxSize4Pin - a * max;
                        return a * val[2] + b;
                    },
                    label: {
                        normal: {
                            show: true,
                            formatter: function (params) {
                                // console.log("aaa");
                                // console.log(params);
                                return params.value[2]
                            },
                            textStyle: {
                                color: '#fff',
                                fontSize: 9,
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(255,255,0,0)', //标志颜色
                        }
                    },
                    zlevel: 6,
                    data: convertData(data),
                },
                {
                    name: 'Top 5',//用于显示最高的前五个数据
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    data: convertData(data.sort(function (a, b) {
                        return b.value - a.value;
                    }).slice(0, 5)),
                    symbolSize: function (val) {
                        return val[2] / 5;
                    },
                    showEffectOn: 'render',
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    hoverAnimation: true,
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: true
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(255,255,0,0.8)',
                            shadowBlur: 10,
                            shadowColor: '#05C3F9'
                        }
                    },
                    zlevel: 1
                },

                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

        } else {
            return;
        }
    }).fail(function (jqXHR) {
        console.log("Ajax Fail: ", jqXHR.status, jqXHR.statusText);
    });
    // var data = [
    //     {
    //         "name": "安徽",
    //         "value": "47"
    //     },
    //     {
    //         "name": "贵州",
    //         "value": "46"
    //     },
    //     {
    //         "name": "河北",
    //         "value": "89"
    //     },
    //     {
    //         "name": "重庆",
    //         "value": "78"
    //     }];


    window.addEventListener("resize", function () {
        myChart.resize();
    });
}

部分代码解释

关于geoCoordMap 地图经纬度数据

    //用于存储地图数据
    var geoCoordMap = {};

geoCoordMap类似json， 其键为省份的名称；值为数组，代表对应的经纬度

在这里插入图片描述

本例代码中data 数据

data = back.result;

此例中的data为对象组成的数组，每个对象包含几个键值，详细如下
在这里插入图片描述

关于convertData函数的作用

 var convertData = function (data) {
     // console.log("666");
     // console.log(data);
     var res = [];
     for (var i = 0; i < data.length; i++) {
     	 //通过数据中的name值，得到其对应的经纬度，
         var geoCoord = geoCoordMap[data[i].name];
         //如果存在当前省份的经纬度
         if (geoCoord) {
         	//下列各式为name:"福建",value:[经度，维度，福建省的数据]
             res.push({
                 name: data[i].name,
                 value: geoCoord.concat(data[i].value),
             });
         }
     }
     // console.log("2222");
     // console.log(res);
     return res;
 };

看一下最终的res的值
在这里插入图片描述

关于tooltip组件

tooltip: {
    //鼠标划上去以后显示的提示
    trigger: 'item',
    formatter: function (params) {
        if (typeof (params.value)[2] == "undefined") {
            var toolTiphtml = ''
            for (var i = 0; i < toolTipData.length; i++) {
                if (params.name == toolTipData[i].name) {
                    toolTiphtml += toolTipData[i].name + ':<br>'
                    for (var j = 0; j < toolTipData[i].value.length; j++) {
                        toolTiphtml += toolTipData[i].value[j].name + ':' + toolTipData[i].value[j].value + "<br>"
                    }
                }
            }
            // console.log(toolTiphtml)
            // console.log(convertData(data))
            return toolTiphtml;
        } else {
            var toolTiphtml = ''
            for (var i = 0; i < toolTipData.length; i++) {
                if (params.name == toolTipData[i].name) {
                    toolTiphtml += toolTipData[i].name + ':<br>'
                    for (var j = 0; j < toolTipData[i].value.length; j++) {
                        toolTiphtml += toolTipData[i].value[j].name + ':' + toolTipData[i].value[j].value + "<br>"
                    }
                }
            }
            // console.log(toolTiphtml)
            // console.log(convertData(data))
            return toolTiphtml;
        }
    }
},
  • formatter中params参数

鼠标滑到省份的轮廓（不正好是那个点）

注意参数中value的区别
在这里插入图片描述

在这里插入图片描述

如果鼠标正好滑到的是那个省份点

在这里插入图片描述

注意参数中value的区别
在这里插入图片描述

这一部分当中的if else主要用来判断数据的有无，因为有的省份没有数据，如果没有数据就不显示了

关于带有涟漪特效动画的散点（气泡）图

name: 'Top 5',//用于显示最高的前五个数据
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(data.sort(function (a, b) {
    return b.value - a.value;
}).slice(0, 5)),
symbolSize: function (val) {
    return val[2] / 5;
},
Gabriel_wei
关注
  • 1
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts地图 自定义区域
weixin_50885665的博客
12-28 454
关于echarts地图坐标自定义区域说明_带刺的茄子的博客-CSDN博客_echarts 地图 自定义区域echarts-map最新实时geoJson文件下载_hxkj.vip_HashTang使用ECharts map，实现省、市、区县、乡镇自定义地图_佳了个欣。的博客-CSDN博客_echarts乡镇地图数据 echarts 地图 自定义区域_一天28小时的博客-CSDN博客_echarts 地图 自定义区域Echarts地图 绘制自定义区域 - geojson.io使用方法_zaqenenen的博客
Echarts实现中国地图、省市地区地图
weixin_44389116的博客
07-07 9152
【代码】Echarts实现全国、省市地区地图
【源码】数据可视化：基于Echarts + GeoJson实现的地图视觉映射散点（气泡）组件【7】 - 海南省.zip
09-06
1、Echarts ，Python 实现的地图 视觉映射图，散点（气泡）图。 2、包括地图坐标经纬度geoJSON数据。 3、详细手册参考我的博文： https://blog.csdn.net/lildkdkdkjf/article/details/120130595 4、技术支持QQ微信同号： 6550523，欢迎来撩~
前端echarts加标记点及标记线和提示框
最新发布
chenchuang0128的博客
05-06 1553
在 ECharts 中，你可以通过配置series对象的markPointmarkLine和tooltip属性来添加标记点、标记线和提示框。以下是一个简单的示例，说明如何在图表中添加这些元素。
记使用echarts绘制地图根据数据修改每个省份深浅颜色
一个年纪不大生活经历丰富的码农
11-14 3442
echarts绘制省份地图，可以根据数据修改省份颜色深浅
使用Echarts在地图上实现Marker标注
一只想躺平却不敢躺平的小菜鸟
06-21 4703
使用Echarts在地图上实现Marker标注
如何在echarts生成得到地图上添加标记
m0_66722601的博客
05-22 3966
我console.log(markImg)后,在控制台输出,显然图片已经转成了base64格式了。在echarts生成的图形上如果利用本地的图片达到标记的效果。1.首先我们可以在全局先把这个图片引进来。2.在我们的那个生成图形的方法里面可以这样。3.在需要配置的地方。
echarts地图的使用
Ych_cxy的博客
11-08 2882
var mapFeatures = echarts.getMap('china').geoJson.features; let res = [] mapFeatures.forEach(function (v) { // 地区名称 let name = v.properties.name; let value = v.properties.c...
echarts实现地图下钻
热门推荐
qq_23447231的博客
12-14 1万+
公司的新项目需要写这样的地图，还要能两级下钻到省，下面是我写好了的样子，我今天就是复一下盘： 如何用echarts显示地图 首先需要下载map的Json数据，我放到这里：mapJson 然后使用echarts的geo配置，或者series的type = 'map’就可以加载地图了： import chinaMapJson from "./china.json" echarts.registerMap('china', chinaMapJson) var options = { tooltip:{
echarts社区地图、echart地图
qq_34200636的博客
02-10 4014
echarts社区地图、echart地图
echarts-地图添加悬浮文本标签
04-14
echarts2在地图上添加悬浮的文本标签
echarts地图散点悬浮显示多条数据
10-29
echarts地图散点悬浮显示多条数据echarts地图散点悬浮显示多条数据echarts地图散点悬浮显示多条数据
echarts3d地图散点数据陷进地图的解决方案
10-25
echarts 3d地图数据散点下陷，下陷到地图里的数据是数据中的最小值，解决方法是，添加数据中不能出现的最小值，并且让它不现实出来，就可以解决想要数据下陷得问题
echarts3d地图散点数据陷进地图的多次试验后终于成功
06-13
echarts 3d地图数据散点下陷，下陷到地图里的数据是数据中的最小值，解决方法是，添加数据中不能出现的最小值，并且让它不现实出来，就可以解决想要数据下陷得问题
Echarts结合百度地图实现省市区散点展示
11-12
公司要做数据大屏，Echart和百度地图的结合，实现利用百度地图的行政区划展示，在行政区区划中添加相应的Echarts散点图，散点图随地图放大和缩小，默认实景图，限制缩放等级，也可展示多个省市区划，代码注释详细，...
【转载】使用echarts实现简单的地图标注效果
在热爱技术的路上一直前行。
06-24 3583
在做大屏地图的过程中，看到了这篇文章，感觉受益匪浅，写的挺好。 链接如下：Vue Echarts 显示地图且根据坐标设置标注点
【Echarts】绘制中国地图及各省份地图
qq_25285531的博客
12-07 3165
名字命名在对应的js文件里，需要写对，地理坐标js文件也有，复制出来就可以了。js，放射状和扩散圈。
echarts引入地图不成功（使用echarts遇到的坑）
m0_49343686的博客
06-24 8193
这个是我的项目遇到的问题，不具有普遍性。此文章只是记录寻找bug的过程。 需求 老板：这个项目要新增一个大数据的大屏展示页面。 准备 按照echarts官网教程进行安装与引入。 npm install echarts --save //引入包 import echarts from 'echarts'; //外部引入中国地图（echarts5没有内置地图） import "./map/js/china.js"; //渲染 var myChart = echarts.init(document.get.
echarts地图数据是写在series里，为什么散点图没显示？
06-09
如果您在 Echarts 散点图中没有看到数据点，请检查以下几点： 1. 检查数据格式是否正确：散点图数据应该是一个数组，每个元素表示一个数据点，每个数据点包括 x 和 y 坐标值。例如： ``` data: [ [10, 20], [20, 30], [30, 40] ] ``` 2. 确认散点图的配置项是否正确：请检查您是否正确设置了散点图的 x 轴和 y 轴配置项，以及散点图的系列名称和标记大小等配置项。 3. 检查数据范围和坐标轴范围是否匹配：如果散点图的数据点超出了坐标轴范围，则可能会导致数据点无法显示。请确保您的数据点在坐标轴范围内。 如果您仍然无法看到散点图数据，请提供更多的代码或信息，以便更好地帮助您解决问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值