echart绘制中国地图及各省份地图

  • echart绘制中国地图及各省份地图已关闭评论
  • 27 次浏览
  • A+
所属分类:Web前端
摘要

示例:  地图文件下载地址:https://gitcode.net/mirrors/fuhang-lm/echarts?utm_source=csdn_github_accelerator&from_codechina=yes

示例:

echart绘制中国地图及各省份地图

 

 地图文件下载地址:https://gitcode.net/mirrors/fuhang-lm/echarts?utm_source=csdn_github_accelerator&from_codechina=yes

 

这里以北京市地图为例,如果是其他省份或者全国,下载对应的js文件并引入系统,需要替换一下两处,换成对应的省份:

var mapName = '北京', geo: { map: '北京',} 

 名字命名在对应的js文件里,需要写对,地理坐标js文件也有,复制出来就可以了

echart绘制中国地图及各省份地图

 

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绘制中国地图及各省份地图

 

 

// 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();     }); }