Echarts地图高亮循环数据展示

js项目使用Echarts进行地图的绘制与数据高亮循环展示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>地图绘制</title>
</head>
<body><div class="map" style="width:850px; height:600px;"></div>
</body>
</html>
<script src="./js/echarts.min.js"></script>
<script src="./js/jquery-3.6.0.min.js"></script>
<script>var dataList = [];var dataList2 = [];var gdGeoCoordMap = {"南京市":[118.767413, 32.041544],"无锡市":[120.301663, 31.574729],"徐州市":[117.184811, 34.261792],"常州市":[119.946973, 31.772752],"苏州市":[120.619585, 31.299379],"南通市":[120.864608, 32.016212],"连云港市":[119.144784, 34.536075],"淮安市":[119.021265, 33.597506],"盐城市":[120.139998, 33.377631],"扬州市":[119.421003, 32.393159],"镇江市":[119.452753, 32.204402],"泰州市":[119.915176, 32.484882],"宿迁市":[118.275162, 33.963008]};$.ajax({url: '请求地址',type: 'GET',async: false,success: function (res) {if (res.code === 200) {res.data.forEach(item=>{dataList.push({name:item.areaCode, // 地区名称value:item.scaleFee // 要展示的数据})})}else {throttle(res.msg)}}});$.get('./js/jiangsu.json', function (geoJson) {echarts.registerMap('jiangsu', { geoJSON: geoJson });console.log(geoJson)var chart = echarts.init(document.querySelector('.map'));// 如果有的城市没有返回数据就补零for(var key in gdGeoCoordMap){for(var i=0; i<dataList.length; i++){if(key === dataList[i].name){dataList2.push({name:key,value:gdGeoCoordMap[key].concat(dataList[i].value)})break;}else if(i+1 === dataList.length){dataList2.push({name:key,value:gdGeoCoordMap[key].concat(0)})}}};var option = {geo:{map: 'jiangsu',roam: true,showLegendSymbol: true,zoom: 1.2,// center:[119.915176, 32.484882],// 地图区域的颜色itemStyle: {areaColor: 'rgba(0,0,0,0)',color: 'blue',borderColor: '#22F7F8',borderWidth: 2,shadowColor: '#22F7F8',shadowBlur: 15,// shadowOffsetX:10,shadowOffsetY: 5},label: {show: true,color: '#FFFFFF'},// 高亮区域的配置emphasis: {label: {show: true,color: '#ffffff' // 选中文字颜色},itemStyle: {areaColor: '#2B91B7', // 高亮区域颜色// opacity:'0.5'}},selectedMode:true,select: {label: {show: true,color: '#ffffff'},itemStyle: {areaColor: '#2B91B7', // 选中区域颜色}},regions:[{name:'南京市',selected:true}]},series: [{type: 'effectScatter',coordinateSystem: 'geo',rippleEffect: {scale: 10,brushType: 'stroke',},showEffectOn: 'render',itemStyle: {normal: {color: '#00FFFF',}},label: {normal: {color: '#fff',},},symbol: 'circle',symbolSize: [10, 5],data:[dataList2[0]],zlevel: 1,},{type: 'scatter',coordinateSystem: 'geo',itemStyle: {color: '#00FFF6',},symbol: 'image://../images/home/map2.png',symbolSize: [24, 33],symbolOffset: [0, -20],data:[dataList2[0]],},{type: 'scatter',coordinateSystem: 'geo',label: {show: true,formatter: function(params) { // var name = params.namevar value = params.value[2]var text = `{fline|${value}元}`return text;},   rich: {// align:'center',fline: {padding: [15, 15,15,15],color: '#FFD426',fontSize: 16,fontWeight:700,}},emphasis: {show: true},backgroundColor:{image:'../images/home/map.png'}},itemStyle: {color: '#00FFF6',},symbolSize: [0, 0], // 100 50symbolOffset: [0, -70], //60data:[dataList2[0]],}]}chart.setOption(option,true);// 首次进入先展示默认的第一项var j = 1setInterval(() => {option.series.forEach(item=>{item.data=[]item.data.push(dataList2[j])});option.geo.regions = []option.geo.regions.push({name:dataList2[j].name,selected:true})console.log(option.geo)j++;if(j === 13){j = 0 // 全部展示完重置}chart.setOption(option,true);},5000);// 点击当前高亮 并显示数据chart.on('click', function(params) {option.geo.regions.push({name:params.name,selected:true});option.series.forEach(item=>{item.data.forEach((item2,index)=>{if(item2.name === params.name){return false;}else if(index+1 === item.data.length){dataList2.forEach(item3=>{if(item3.name === params.name){item.data.push(item3)}})}})})chart.setOption(option,true);});window.addEventListener("resize", function () {chart.resize();});});
</script>

效果

代码已上传Echarts点击可在线查看
如有问题可在下方留言，创作不易，如果觉得文章还不错，还请点赞支持一下，谢谢！！！

Echarts地图高亮循环数据展示相关推荐

echarts——实现大屏数据展示——基础积累（超详细）
echarts--实现大屏数据展示--柱状图+堆叠柱状图+table表格等功能的使用最近在做大屏数据展示,样式真的超级好看.但是细节处理也是比较麻烦的. 最终效果图如下: 下面对我遇到的几个知识点进 ...
Spring Boot+高德地图热力图动态数据展示+MySQL
项目目录 pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns=&quo ...
Spring Boot+高德地图热力图静态数据展示
高端开放平台控制台---->应用管理---->我的应用---->创建新应用开发者支持---->示例与体验---->jsAPI示例中心项目目录创建的Spring B ...
echarts——实现2D地图+各省份数据展示——技能提升
同事做的项目,是个2D中国地图,使用的是echarts+vue.最终效果如下: 点击某个省份后,效果图如下: 本篇文章只处理中间地图部分,其他内容不做介绍. 1.html代码 <template ...
使用echarts开发电子屏数据展示页面
背景之前的项目因为要顾及体量问题,选用了highchart,没用上echarts:这次因为是本地部署电子屏幕的展示页,不需要考虑体量大小,直接用上了echarts:用起来觉得非常不错,特别是地图上非 ...
Echarts地图坐标geoCoordMap数据动态获取
这是一组geoCoordMap格式的数据: var geoCoordMap = {'台湾': [121.5135,25.0308],'黑龙江': [127.9688, 45.368],'内蒙古': [ ...
vue2项目中封装echarts地图的比较优雅的方式
以前写过 vue项目中封装echarts的比较优雅的方式,大屏可视化里面,除了数据图表很常用,显示省市地图区域也是很常用到的,这是姐妹篇. 区域地图选区域时,需要弹窗展示数据,样式是各种各样的,各种排 ...
echarts 地图九状线显示钓鱼岛系列（1）之 3.0 与2.0区别
由于echarts 3.0 和2.0版本不一样, 下文将分别介绍. (vue项目,可以参考 echarts 地图九状线显示钓鱼岛(续-vue项目) echarts地图需要按数据值大小,显 ...
基于Django的租房数据展示系统设计与实现
目录摘要 1 ABSTRACT 2 一.绪论 3 (一)研究背景及需求分析 3 (二)国内外研究现状 4 1.爬虫技术概述 5 2. 爬虫设计者面临的问题与反爬虫技术现状 6 (三)研究目标及研 ...
基于hadoop和echarts的教育大数据可视化系统毕设完整的代码+数据集
一.摘要在线教育平台现在是教育体系的重要组成部分,在当前大数据时代的背景下,促进教育机构建立统一平台.统一资源管理的数字化教学系统.如何评估系统平台的健康程度.学生的学习体验和在线课程的质量对于课 ...

Echarts地图高亮循环数据展示

js项目使用Echarts进行地图的绘制与数据高亮循环展示

效果

Echarts地图高亮循环数据展示相关推荐

最新文章

热门文章