项目需求：在省份地图上绘制散点图，散点位置不一定是哪个城市或哪个区县，即任意点
通过查询官网文档，找到一个与需求类似的Demo：https://www.echartsjs.com/gallery/editor.html?c=scatter-map，更改代码，将中国地图替换为省份地图，省份地图的js代码可以从网上下载，官网现在不提供下载了。
index.html，一个盒子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>mapScatter Demo</title> </head> <body> <div id="echart" style="width: 1000px; height: 800px;"></div> <script src="./echarts.min.js"></script> <script src="./gansu.js"></script> <script src="./main.js"></script> </body> </html>
main.js
var dom = document.getElementById("container"); var myChart = echarts.init(dom); option = null; // 散点在地图上的坐标 var geoCoordMap = { "国家级基地1": [94.12, 39.66], "国家级基地2": [97.20, 39.55], "国家级基地3": [95.28, 40.29], "省级基地1": [98.36, 40.19], "省级基地2": [97.88, 39.49], "省级基地3": [95.77, 40.59], "市级基地1": [102.66, 38.89], "市级基地2": [101.23, 37.79], "市级基地3": [99.40, 39.69] }; // 将坐标与值对应并反映在地图上 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; }; option = { tooltip: { trigger: 'item', formatter: function (params) { return params.name; } }, visualMap: { type: 'piecewise', textStyle: { color: '#fff' }, pieces: [ {min: 300, label: '国家级基地', color: '#e3bf4c'}, {min: 200, max: 300, label: '省级基地', color: '#be4f51'}, {min: 100, max: 200, label: '市级基地', color: '#60c2cc'} ], color: ['#e3bf4c', '#be4f51', '#60c2cc'] }, geo: { map: '甘肃', label: { emphasis: { show: false } }, itemStyle: { normal: { areaColor: '#323c48', borderColor: '#111' }, emphasis: { areaColor: '#2a333d' } } }, series: [ { type: 'effectScatter', coordinateSystem: 'geo', data: convertData([ {name: "国家级基地1", value: 110}, {name: "国家级基地2", value: 110}, {name: "国家级基地3", value: 110}, {name: "省级基地1", value: 210}, {name: "省级基地2", value: 210}, {name: "省级基地3", value: 210}, {name: "市级基地1", value: 310}, {name: "市级基地2", value: 310}, {name: "市级基地3", value: 310} ]), symbolSize: 12, label: { normal: { show: false }, emphasis: { show: false } }, itemStyle: { emphasis: { borderColor: '#fff', borderWidth: 1 } } } ] }; if (option && typeof option === "object") { myChart.setOption(option, true); }
最终效果
内容来源于网络如有侵权请私信删除
- 还没有人评论，欢迎说说您的想法！
客服
