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

2023-10-19 09:59
文章标签 标记 代码 数据 筛选 大小 记录 展示 最大 效果 地图 需求 省份 echarts 经常 五个 这种 每个 本文 散点 方大

本文主要是介绍Echarts做地图，将每个省的数据标记在地图上，根据数据的大小做散点方大效果，并筛选前五个最大省份进行展示（经常有这种需求，看自己的代码跟屎一样，本文只做记录，），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

效果

请添加图片描述

js代码

function loadMap() {// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('mapChart'));var nameColor = " rgb(55, 75, 113)"var name_fontFamily = '宋体'var name_fontSize = 35var 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; // todovar 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;
},

这篇关于Echarts做地图，将每个省的数据标记在地图上，根据数据的大小做散点方大效果，并筛选前五个最大省份进行展示（经常有这种需求，看自己的代码跟屎一样，本文只做记录，）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/239076。

相关文章

MySQL InnoDB引擎ibdata文件损坏/删除后使用frm和ibd文件恢复数据

MySQL InnoDB引擎ibdata文件损坏/删除后使用frm和ibd文件恢复数据

《MySQLInnoDB引擎ibdata文件损坏/删除后使用frm和ibd文件恢复数据》mysql的ibdata文件被误删、被恶意修改,没有从库和备份数据的情况下的数据恢复,不能保证数据库所有表数据... 参考：mysql Innodb表空间卸载、迁移、装载的使用方法注意！此方法只适用于innodb_fi
阅读更多...
mysql通过frm和ibd文件恢复表_mysql5.7根据.frm和.ibd文件恢复表结构和数据

mysql通过frm和ibd文件恢复表_mysql5.7根据.frm和.ibd文件恢复表结构和数据

《mysql通过frm和ibd文件恢复表_mysql5.7根据.frm和.ibd文件恢复表结构和数据》文章主要介绍了如何从.frm和.ibd文件恢复MySQLInnoDB表结构和数据,需要的朋友可以参... 目录一、恢复表结构二、恢复表数据补充方法一、恢复表结构（从 .frm 文件）方法 1：使用 mysq
阅读更多...
mysql8.0无备份通过idb文件恢复数据的方法、idb文件修复和tablespace id不一致处理

mysql8.0无备份通过idb文件恢复数据的方法、idb文件修复和tablespace id不一致处理

《mysql8.0无备份通过idb文件恢复数据的方法、idb文件修复和tablespaceid不一致处理》文章描述了公司服务器断电后数据库故障的过程,作者通过查看错误日志、重新初始化数据目录、恢复备... 周末突然接到一位一年多没联系的妹妹打来电话，“刘哥，快来救救我”，我脑海瞬间冒出妙瓦底，电信火苲马扁.
阅读更多...
golang获取prometheus数据(prometheus/client_golang包)

golang获取prometheus数据(prometheus/client_golang包)

《golang获取prometheus数据(prometheus/client_golang包)》本文主要介绍了使用Go语言的prometheus/client_golang包来获取Prometheu... 目录1. 创建链接1.1 语法1.2 完整示例2. 简单查询2.1 语法2.2 完整示例3. 范围值
阅读更多...
Spring Retry 实现乐观锁重试实践记录

Spring Retry 实现乐观锁重试实践记录

《SpringRetry实现乐观锁重试实践记录》本文介绍了在秒杀商品SKU表中使用乐观锁和MybatisPlus配置乐观锁的方法,并分析了测试环境和生产环境的隔离级别对乐观锁的影响,通过简单验证,... 目录一、场景分析 二、简单验证 2.1、可重复读 2.2、读已提交 三、最佳实践 3.1、配置重试模板
阅读更多...
Java中有什么工具可以进行代码反编译详解

Java中有什么工具可以进行代码反编译详解

《Java中有什么工具可以进行代码反编译详解》：本文主要介绍Java中有什么工具可以进行代码反编译的相关资,料,包括JD-GUI、CFR、Procyon、Fernflower、Javap、Byte... 目录1.JD-GUI2.CFR3.Procyon Decompiler4.Fernflower5.Jav
阅读更多...
在 Spring Boot 中使用异步线程时的 HttpServletRequest 复用问题记录

在 Spring Boot 中使用异步线程时的 HttpServletRequest 复用问题记录

《在SpringBoot中使用异步线程时的HttpServletRequest复用问题记录》文章讨论了在SpringBoot中使用异步线程时,由于HttpServletRequest复用导致... 目录一、问题描述：异步线程操作导致请求复用时 Cookie 解析失败1. 场景背景2. 问题根源二、问题详细分
阅读更多...
Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

《Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)》文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一... 目录一、首先 npm 安装插件二、创建一个vue组件三、业务页面内 引用自定义组件：四、dhtmlx
阅读更多...
使用Python创建一个能够筛选文件的PDF合并工具

使用Python创建一个能够筛选文件的PDF合并工具

《使用Python创建一个能够筛选文件的PDF合并工具》这篇文章主要为大家详细介绍了如何使用Python创建一个能够筛选文件的PDF合并工具,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下... 目录背景主要功能全部代码代码解析1. 初始化 wx.Frame 窗口2. 创建工具栏3. 创建布局和界面控件4
阅读更多...
javaScript在表单提交时获取表单数据的示例代码

javaScript在表单提交时获取表单数据的示例代码

《javaScript在表单提交时获取表单数据的示例代码》本文介绍了五种在JavaScript中获取表单数据的方法：使用FormData对象、手动提取表单数据、使用querySelector获取单个字... 方法 1：使用 FormData 对象FormData 是一个方便的内置对象，用于获取表单中的键值
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2