- A+
所属分类：Web前端
示例：
地图文件下载地址：https://gitcode.net/mirrors/fuhang-lm/echarts?utm_source=csdn_github_accelerator&from_codechina=yes
这里以北京市地图为例，如果是其他省份或者全国，下载对应的js文件并引入系统，需要替换一下两处，换成对应的省份：
var mapName = '北京'， geo: { map: '北京',}
名字命名在对应的js文件里，需要写对，地理坐标js文件也有，复制出来就可以了
html
<div id="chart_map" style="width:100%;height:610px;"></div> <div id="chart_bjmap" style="width:100%;height:610px;"></div> ...省略... <script src="/home/js/echarts.min.js"></script> <script src="/home/js/beijing.js"></script> <script src="/home/js/china.js"></script>
js，放射状和扩散圈
// 北京地图 function echart_bjmap() { var rs = [[{"name":"朝阳区"},{"name": '朝阳区', "value": 32}],[{"name": "海淀区"},{"name": '海淀区', "value": 222}]] console.log(rs) // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('chart_bjmap')); var mapName = '北京' var data = [] var toolTipData = []; /*获取地图数据*/ myChart.showLoading(); myChart.hideLoading(); var geoCoordMap = { 东城区: [116.418757,39.917544], 西城区: [116.366794,39.915309], 朝阳区: [116.486409,39.921489], 丰台区: [116.286968,39.863642], 石景山区: [116.195445,39.914601], 海淀区: [116.310316,39.956074], 门头沟区: [116.105381,39.937183], 通州区: [116.658603,39.902486], 顺义区: [116.653525,40.128936], 昌平区: [116.235906,40.218085], 大兴区: [116.338033,39.728908], 怀柔区: [116.637122,40.324272], 平谷区: [117.112335,40.144783] }; var GZData = rs //数据 var convertData = function (data) { var res = []; for (var i = 0; i < data.length; i++) { var dataItem = data[i]; var fromCoord = geoCoordMap[dataItem[0].name]; var toCoord = geoCoordMap[dataItem[1].name]; if (fromCoord && toCoord) { res.push({ fromName: dataItem[0].name, toName: dataItem[1].name, coords: [fromCoord, toCoord] }); } } return res; }; var color = ['#c5f80e']; var series = []; [ ['', GZData] ].forEach(function (item, i) { series.push({ name: item[0], type: 'lines', zlevel: 2, symbol: ['none', 'arrow'], symbolSize: 10, effect: { show: true, period: 6, trailLength: 0, symbol: 'arrow', symbolSize: 5 }, lineStyle: { normal: { color: color[i], width: 1, opacity: 0.6, curveness: 0.2 } }, data: convertData(item[1]) }, { name: item[0], type: 'effectScatter', coordinateSystem: 'geo', zlevel: 2, rippleEffect: { brushType: 'stroke' }, label: { normal: { show: true, position: 'right', formatter: '{b}' } }, symbolSize: function (val) { return val[2] / 8; //扩散圈的大小 }, itemStyle: { normal: { color: color[i] } }, data: item[1].map(function (dataItem) { return { name: dataItem[1].name, value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value]) }; }) }); }); option = { tooltip: { trigger: 'item', backgroundColor: 'rgba(166, 200, 76, 0.82)', borderColor: '#FFFFCC', showDelay: 0, hideDelay: 0, enterable: true, transitionDuration: 0, extraCssText: 'z-index:100', formatter: function (params, ticket, callback) { //根据业务自己拓展要显示的内容 if (params.seriesType == "effectScatter") { var res = ""; var name = params.name; var value = params.value[params.seriesIndex + 1]; res = "<span style='color:#fff;'>" + name + "</span><br/>医院数：" + value; return res; } else if (params.seriesType == "scatter") { var res = ""; var name = params.name; var value = params.data.value[2]; res = "<span style='color:#fff;'>" + name + "</span><br/>医院数：" + value; return res; } else { return name; } } }, geo: { map: '北京', label: { emphasis: { show: false } }, roam: true, itemStyle: { normal: { borderColor: 'rgba(147, 235, 248, 1)', borderWidth: 1, areaColor: { type: 'radial', x: 0.5, y: 0.5, r: 0.8, colorStops: [{ offset: 0, color: 'rgba(175,238,238, 0)' // 0% 处的颜色 }, { offset: 1, color: 'rgba(47,79,79, .1)' // 100% 处的颜色 }], globalCoord: false // 缺省为 false }, shadowColor: 'rgba(128, 217, 248, 1)', // shadowColor: 'rgba(255, 255, 255, 1)', shadowOffsetX: -2, shadowOffsetY: 2, shadowBlur: 10 }, emphasis: { areaColor: '#389BB7', borderWidth: 0 } } }, series: series }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }); }
全国地图
// echart_map 地图 function echart_map() { // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('chart_map')); var rs = [[{"name":"朝阳区"},{"name": '朝阳区', "value": 32}],[{"name": "海淀区"},{"name": '海淀区', "value": 222}]] var mapName = 'china' var data = [] var toolTipData = []; /*获取地图数据*/ myChart.showLoading(); var mapFeatures = echarts.getMap(mapName).geoJson.features; myChart.hideLoading(); var geoCoordMap = { 甘肃省: [104.35851932200904, 35.40123159456249], 青海省: [98.77753991113792, 36.53004669909589], 广西: [107.99655439706783, 23.735673935703687], 贵州省: [106.25837527859625, 26.505908922458815], 重庆市: [106.59396202962392, 29.737597968171656], 北京市: [116.35679568867022, 40.25702627244448], 福建省: [117.7802840500002, 26.617417710000097], 安徽省: [116.62978356256133, 32.13288035704295], 广东省: [112.38982181100027, 23.09589264500019], 西藏: [91.67781334810746, 29.081958115774455], 新疆: [86.36633990098284, 42.722922619141826], 海南省: [109.68506920700003, 19.15330638200004], 宁夏: [106.65764611237813, 37.85293528913229], 陕西省: [108.11004520082531, 33.38519318281914], 山西省: [111.72104861939818, 36.35586904611952], 湖北省: [111.37402265791923, 31.417539985382007], 湖南省: [110.902381220417, 28.066339830418826], 四川省: [103.4985530948494, 30.67739736629541], 云南省: [100.29696333219198, 25.721744899807277], 河北省: [115.64873628100008, 38.04465116700004], 河南省: [113.46032230023388, 34.15787079530108], 辽宁省: [123.35254967500032, 40.48240794500012], 山东省: [118.28029535679576, 36.076608741968954], 天津市: [117.65956331411487, 39.21855181203543], 江西省: [115.17473025869447, 27.407869370774904], 江苏省: [120.34094130672383, 32.49093327643905], 上海市: [121.64094130672383, 31.02093327643905], 浙江省: [120.28535242000021, 29.10194563100012], 吉林省: [126.25284846284336, 43.46916859112878], 内蒙古: [108.41327478505161, 40.317334824121446], 黑龙江省: [131.25284846284336, 46.46916859112878], 香港: [114.0517684250002, 22.32851797100014], 澳门: [111.95860436300031, 21.8], 台湾: [120.63599694100014, 23.222805080000114] }; var GZData = rs var convertData = function (data) { var res = []; for (var i = 0; i < data.length; i++) { var dataItem = data[i]; var fromCoord = geoCoordMap[dataItem[0].name]; var toCoord = geoCoordMap[dataItem[1].name]; if (fromCoord && toCoord) { res.push({ fromName: dataItem[0].name, toName: dataItem[1].name, coords: [fromCoord, toCoord] }); } } return res; }; var color = ['#c5f80e']; var series = []; [ ['', GZData] ].forEach(function (item, i) { series.push({ name: item[0], type: 'lines', zlevel: 2, symbol: ['none', 'arrow'], symbolSize: 10, effect: { show: true, period: 6, trailLength: 0, symbol: 'arrow', symbolSize: 5 }, lineStyle: { normal: { color: color[i], width: 1, opacity: 0.6, curveness: 0.2 } }, data: convertData(item[1]) }, { name: item[0], type: 'effectScatter', coordinateSystem: 'geo', zlevel: 2, rippleEffect: { brushType: 'stroke' }, label: { normal: { show: true, position: 'right', formatter: '{b}' } }, symbolSize: function (val) { return val[2] / 8; //扩散圈的大小 }, itemStyle: { normal: { color: color[i] } }, data: item[1].map(function (dataItem) { return { name: dataItem[1].name, value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value]) }; }) }); }); option = { tooltip: { trigger: 'item', backgroundColor: 'rgba(166, 200, 76, 0.82)', borderColor: '#FFFFCC', showDelay: 0, hideDelay: 0, enterable: true, transitionDuration: 0, extraCssText: 'z-index:100', formatter: function (params, ticket, callback) { //根据业务自己拓展要显示的内容 if (params.seriesType == "effectScatter") { var res = ""; var name = params.name; var value = params.value[params.seriesIndex + 1]; res = "<span style='color:#fff;'>" + name + "</span><br/>网格员数：" + value; return res; } else if (params.seriesType == "scatter") { var res = ""; var name = params.name; var value = params.data.value[2]; res = "<span style='color:#fff;'>" + name + "</span><br/>网格员数：" + value; return res; } else { return name; } } }, geo: { map: 'china', label: { emphasis: { show: false } }, roam: true, itemStyle: { normal: { borderColor: 'rgba(147, 235, 248, 1)', borderWidth: 1, areaColor: { type: 'radial', x: 0.5, y: 0.5, r: 0.8, colorStops: [{ offset: 0, color: 'rgba(175,238,238, 0)' // 0% 处的颜色 }, { offset: 1, color: 'rgba(47,79,79, .1)' // 100% 处的颜色 }], globalCoord: false // 缺省为 false }, shadowColor: 'rgba(128, 217, 248, 1)', // shadowColor: 'rgba(255, 255, 255, 1)', shadowOffsetX: -2, shadowOffsetY: 2, shadowBlur: 10 }, emphasis: { areaColor: '#389BB7', borderWidth: 0 } } }, series: series }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }); }
