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_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 =https://www.cnblogs.com/zxf100/archive/2022/12/07/ []
        var toolTipData =https://www.cnblogs.com/zxf100/archive/2022/12/07/ [];

        /*獲取地圖資料*/
        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 =https://www.cnblogs.com/zxf100/archive/2022/12/07/ rs  //資料
        var convertData = https://www.cnblogs.com/zxf100/archive/2022/12/07/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 = https://www.cnblogs.com/zxf100/archive/2022/12/07/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 = https://www.cnblogs.com/zxf100/archive/2022/12/07/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 =https://www.cnblogs.com/zxf100/archive/2022/12/07/ []
    var toolTipData =https://www.cnblogs.com/zxf100/archive/2022/12/07/ [];

    /*獲取地圖資料*/
    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 =https://www.cnblogs.com/zxf100/archive/2022/12/07/ rs

    var convertData = https://www.cnblogs.com/zxf100/archive/2022/12/07/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 = https://www.cnblogs.com/zxf100/archive/2022/12/07/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 = https://www.cnblogs.com/zxf100/archive/2022/12/07/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();
    });
}

——現在的努力，只為小時候吹過的牛逼！ ——

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/539473.html

標籤：其他

上一篇：JavaScript：是一種什么樣的編程語言？

下一篇：記錄--微信小程式獲取用戶資訊的最新方法記錄