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

示例：

 地图文件下载地址：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_bjmap" style="width:100%;height:610px;"></div>


...省略...


 <script src="/home/js/echarts.min.js"></script>
  <script src="/home/js/beijing.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();
        });
  }