echarts添加地图散点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>地图下钻</title> <style> body { margin: 0 auto; } #main { position: fixed; left: 0; right: 0; top: 0; bottom: 0; } </style> </head> <body> <div id="main"></div> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.7.0/echarts.min.js"></script> <script> let publicUrl = 'https://geo.datav.aliyun.com/areas_v2/bound/'; async function initChart() { let chart = echarts.init(document.getElementById('main')); let alladcode = await getGeoJson('all.json') let chinaGeoJson = await getGeoJson('100000_full.json') initEcharts(chinaGeoJson, '中国', chart, alladcode) } initChart(); // 每个地区的数据 let mapData = [{ name: "河南省", value: 1000 }, { name: "山东省", value: 500 }, { name: "安徽省", value: 700 }, { name: "山西省", value: 200 }, { name: "湖南省", value: 600 }, { name: "四川省", value: 1600 } ] //echarts绘图 function initEcharts(geoJson, name, chart, alladcode) { //获取当前显示地图下方地市的坐标点数据； 用于气泡显示 let geoCoordMap = {}; // 获取地区详细信息 let mapFeatures = geoJson.features; // 遍历获取每个地区的经纬度 mapFeatures.forEach(function (v, i) { // 获取当前地区名 let name = v.properties.name; if (name) { // 获取当前地区的经纬度 geoCoordMap[name] = v.properties.center; } }); //将data数据进入方法，取需要的参数； 用于气泡显示 let convertData = function (data) { var res = []; data.forEach(item => { // 获取当前省份的经纬度坐标 let geoCoord = geoCoordMap[item.name]; if (geoCoord) { res.push({ // name 表示地区名称 name: item.name, // value数据格式为：[113.665412, 34.757975, '200'] value: geoCoord.concat(item.value) }); } }) return res; }; echarts.registerMap(name, geoJson); var option = { title: { text: name, left: 'center', }, //鼠标经过展示数据方法 tooltip: { triggerOn: "mousemove", formatter: function (params) { if (isNaN(params.value)) { params.value = 0 } if (params.seriesName === '散点') { params.value = params.data.value[2] } var html = '<span>' + params.name + '：</span><br/>' html += '<span>值：' + params.value + '</span><br/>' return html }, backgroundColor: 'rgba(29, 38, 71)', // 额外附加的阴影 extraCssText: 'box-shadow:0 0 4px rgba(11, 19, 43,0.8)', }, geo: { show: true, top: '15%', map: name, label: { normal: { show: false }, emphasis: { show: false, color: "#fff", } }, roam: true, itemStyle: { normal: { areaColor: '#116bda', borderColor: '#fff', }, emphasis: { areaColor: '#113cda', } } }, //进行气泡标点 series: [{ type: 'map', map: mapData, 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: true, data: mapData }, { name: '散点', // 自定义名称 type: 'effectScatter', // scatter effectScatter coordinateSystem: 'geo', // 设置坐标系类型 data: convertData(mapData), // 设置散点位置和数据 symbolSize: function (val) { // 设置散点大小 return 15 }, showEffectOn: 'render', rippleEffect: { brushType: 'stroke' }, hoverAnimation: true, // 是否显示鼠标悬浮动画 label: { // 静态显示时的样式 normal: { show: true, // 显示地区名称 formatter: function (data) { // 显示模板 return data.value[2] }, position: 'bottom', // 显示位置 }, // 鼠标悬浮上去的样式 emphasis: { show: true, // 显示地区名称 color: "red", }, }, itemStyle: { normal: { color: function (res) { let value = res.value[2] //根据value值对标点进行不同颜色显示 if (value < 500) { return '#ff3859' } else if (value < 1000) { return '#4ed7fa' } else if (value < 1500) { return '#fac531' } else { return '#01ff5b' } }, shadowBlur: 10, }, // 鼠标悬浮上去的样式 emphasis: { color: "red", }, }, zlevel: 3 } ] }; chart.setOption(option); // 解绑click事件 chart.off("click"); //给地图添加监听事件 chart.on('click', async params => { // 获取当前点击的地图code let clickRegion = alladcode.find(areaJson => areaJson.name === params.name); // 获取要获取地图的json名称 let regionJsonName = clickRegion.adcode + '_full.json' // 获取点击的区域名称 let cityName = params.name // 判断当前点击的地图等级,如果是区级，则再次点击时重新回到全国的数据 if (clickRegion.level === 'district') { regionJsonName = '100000_full.json' cityName = '山东省' } // 根据地图code获取 getGeoJson(regionJsonName).then((result) => { initEcharts(result, cityName, chart, alladcode) }) }) } //获取地图json数据 async function getGeoJson(jsonName) { return await $.get(publicUrl + jsonName) } </script> </body> </html>
效果
