echarts百度地图2021最新实现方式（点，线结合）

1. 先在html文件中准备一个定义了高宽的 DOM 容器

   <div id="map" style="width: 100%;height:900px;"></div>
   

2. 引入js

   <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
   <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/bmap.min.js"></script>
   <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=百度的API Key"></script>
   

3. 开始写js代码

   // 1.初始化
   var dom = document.getElementById("map");
   var myChart = echarts.init(dom);
   
   // 2.数据准备
   // 国家的坐标
   var geoCoordMap = {
   "中国":[104.195397,35.86166],
   "日本":[138.252924,36.204824],
   "韩国":[127.766922,35.907757],
   }；
   // 需要标注的国家数据
   var data =[ {name: '中国', value: 300},
       {name: '日本', value: 150},
       {name: '韩国', value: 200},];
   // 将点的中文位置转为经纬度坐标
   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)
                  });
              }
          }
          //console.log(res);
          return res;
      };
      
   // 对于线的数据处理
   var data2 = [
       [{name:'日本'},{name:'中国'}],
       [{name:'韩国'},{name:'日本'}]
   ];
   var convertData2 = 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([
                   {
                       coord: fromCoord,
                   },
                   {
                       coord: toCoord,
                   },
               ]);
           }
       }
       return res;
   };
   
      
   // 3.配置项设置
   //飞线图标
   var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
   
   var  option = {
   title: {
       text: '企业贸易区域分布',
       left: 'center'
   },
   tooltip : {
       formatter: function(params) {
         return (
           "贸易金额"+'<br/> '+
           params.name +' '+ ' : ' +params.value[2]
         );
       }
   },
   bmap: {
       center:[104.195397,35.86166],
       zoom: 5,
       roam: true,//是否可拖拽
       mapStyle: {
           styleJson: [{
               'featureType': 'water',
               'elementType': 'all',
               'stylers': {
                   'color': '#75cff0'
               }
           }, {
               'featureType': 'land',
               'elementType': 'all',
               'stylers': {
                   'color': '#e4ecc2'
               }
           }, {
               'featureType': 'railway',
               'elementType': 'all',
               'stylers': {
                   //'visibility': 'off'
                   'color': '#cccccc'
               }
           }, {
               'featureType': 'highway',
               'elementType': 'all',
               'stylers': {
                   'color': '#fdfdfd'
               }
           }, {
               'featureType': 'highway',
               'elementType': 'labels',
               'stylers': {
                   'visibility': 'off'
               }
           }, {
               'featureType': 'arterial',
               'elementType': 'geometry',
               'stylers': {
                   'color': '#fef6c0'
               }
           }, {
               'featureType': 'arterial',
               'elementType': 'geometry.fill',
               'stylers': {
                   'color': '#c0b950'
               }
           }, {
               'featureType': 'poi',
               'elementType': 'all',
               'stylers': {
                   //'visibility': 'off'
                   'color': '#c08673'
               }
           }, {
               'featureType': 'green',
               'elementType': 'all',
               'stylers': {
                   'visibility': 'off'
               }
           }, {
               'featureType': 'subway',
               'elementType': 'all',
               'stylers': {
                   'visibility': 'off'
               }
           }, {
               'featureType': 'manmade',
               'elementType': 'all',
               'stylers': {
                   'color': '#d1d1d1'
               }
           }, {
               'featureType': 'local',
               'elementType': 'all',
               'stylers': {
                   'color': '#d1d1d1'
               }
           }, {
               'featureType': 'arterial',
               'elementType': 'labels',
               'stylers': {
                   'visibility': 'off'
               }
           }, {
               'featureType': 'boundary',
               'elementType': 'all',
               'stylers': {
                   'color': '#fefefe'
               }
           }, {
               'featureType': 'building',
               'elementType': 'all',
               'stylers': {
                   'color': '#d1d1d1'
               }
           }, {
               'featureType': 'label',
               'elementType': 'labels.text.fill',
               'stylers': {
                   'color': '#999999'
               }
           }]
       }
   },
   series : [
       {
           name: 'pm2.5',
           type: 'scatter',
           coordinateSystem: 'bmap',
           //symbol:'pin',
           //symbol:'image:///static/img/坐标.png',
           symbol:'path://M0,-28 C4.97056275,-28 9,-24.00634644 9,-19.07992512 C9,-17.8616986 8.75360187,-16.7005104 8.30750495,-15.642645 C7.4180692,-13.7976331 6.60280551,-12.1374788 5.86171387,-10.6522416 L5.49734905,-9.9241533 C2.09460285,-3.1449169 0.365363613,-0.2748662 0.309631348,-0.2486559 C0.152069092,0.0828853 -0.279388428,0.0828853 -0.451770485,-0.2486559 L-8.30750495,-15.642645 C-8.75360187,-16.7005104 -9,-17.8616986 -9,-19.07992512 C-9,-24.00634644 -4.97056275,-28 0,-28 Z M0,-22 C-1.65685425,-22 -3,-20.65685425 -3,-19 C-3,-17.3431458 -1.65685425,-16 0,-16 C1.65685425,-16 3,-17.3431458 3,-19 C3,-20.65685425 1.65685425,-22 0,-22 Z',
           color:'#d10007',
           data: convertData(data),
           symbolSize: function (val) {
               return val[2] / 10;
           },
           encode: {
               value: 2
           },
           label: {
               formatter: '{b}',
               position: 'right',
               show: false
           },
           emphasis: {
               label: {
                   show: true
               }
           }
       },
       {
           type: 'lines',
           coordinateSystem: 'bmap',
           zlevel: 10,
           effect: {
               show: true,
               period: 6,
               trailLength: 0.7,
               color: 'red',
               symbol: planePath,
               symbolSize: 3
           },
           lineStyle: {
               normal: {
                   color: '#a6c84c',
                   width:1,
                   opacity: 0.4,
                   curveness: 0.2
               }
           },
           data: convertData2(data2)
   
           }
       ]
   };
   
    
    4.最后渲染生成地图
   myChart.setOption(option);
   

   4.其它拓展
   1）如果想把地图上的地名，省份等文字标签都隐藏，可在mapStyle属性中设置

   {
      "featureType": "all",
      "elementType": "labels.text.fill",
      "stylers": {
          //"color": "#ff452c",
          "visibility": "off"
      }
   },
   

   还有一些其他的拓展功能没有写出来，后面再更新吧。

   注：以上只有一步是需要申请自己的百度地图的api key调用，其他的都可以直接用，大家也可以在我的基础上进行扩展。