Antd Design Pro中使用Echarts结合百度地图

React中使用echarts结合百度地图

一、引入echarts

注意：echarts、bmap都要引入，不引入bmap,不报错，但地图不会显示。

import echarts from 'echarts';
import 'echarts/extension/bmap/bmap';

二、创建容器存放

 <div id="main" style={{width: '85vw', height: '80vh'}}></div>

三、确保百度地图加载进来

注意：这里是关键代码

  function LoadBaiduMapScript() {
   //console.log("初始化百度地图脚本...");
   const AK =在百度地图官网申请到的ak;
   const BMap_URL = "https://api.map.baidu.com/api?v=2.0&ak=" + AK + "&s=1&callback=onBMapCallback";

   return new Promise((resolve, reject) => {
     // 如果已加载直接返回
     if (typeof BMap !== "undefined") {
       resolve(BMap);
       initMap();
       return true;
     }
     // 百度地图异步加载回调处理
     window.onBMapCallback = function () {
       console.log("百度地图脚本初始化成功...");
       initMap();
       resolve(BMap);
     };

     // 插入script脚本
     let scriptNode = document.createElement("script");
     scriptNode.setAttribute("type", "text/javascript");
     scriptNode.setAttribute("src", BMap_URL);
     document.body.appendChild(scriptNode);
   });
 }

调用加载script引入百度的代码

  useEffect(() => {
  LoadBaiduMapScript();
}, [])

四、echarts 做相关配置

  function initMap() {
  var chartDom = document.getElementById('main');
  var myChart = echarts.init(chartDom);
  var option;
  var data = [
    {name: '北京', value: 28},
    {name: '天津', value: 23},
    {name: '上海', value: 24},
  ]

  var geoCoordMap = {
    '北京': [116.4, 39.9],
    '天津': [117.2, 39.12],
    '上海': [121.47, 31.23],
  };

  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)
        });
      }
    }
    return res;
  };

  option = {
    title: {
      text: '店铺数量对比图',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    bmap: {
      center: [118.114129, 37.550339],
      zoom: 5,
      roam: true,
      mapStyle: {//这里配置地图样式，这个可以自定义配色
        styleJson: [{
          'featureType': 'water',
          'elementType': 'all',
          'stylers': {
            'color': '#d1d1d1'
          }
        }, {
          'featureType': 'land',
          'elementType': 'all',
          'stylers': {
            'color': '#f3f3f3'
          }
        }, {
          'featureType': 'railway',
          'elementType': 'all',
          'stylers': {
            'visibility': 'off'
          }
        }, {
          'featureType': 'highway',
          'elementType': 'all',
          'stylers': {
            'color': '#fdfdfd'
          }
        }, {
          'featureType': 'highway',
          'elementType': 'labels',
          'stylers': {
            'visibility': 'off'
          }
        }, {
          'featureType': 'arterial',
          'elementType': 'geometry',
          'stylers': {
            'color': '#fefefe'
          }
        }, {
          'featureType': 'arterial',
          'elementType': 'geometry.fill',
          'stylers': {
            'color': '#fefefe'
          }
        }, {
          'featureType': 'poi',
          'elementType': 'all',
          'stylers': {
            'visibility': 'off'
          }
        }, {
          '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: '店铺数量',
        type: 'scatter',
        coordinateSystem: 'bmap',
        data: convertData(data),
        symbolSize: function (val) {
          return val[2] / 3;
        },
        encode: {
          value: 2
        },
        label: {
          formatter: '{b}',
          position: 'right',
          show: false,
        },
        itemStyle: {
          color: "purple",
        },
        emphasis: {
          label: {
            show: true
          }
        }
      },
      {
        name: 'Top 5',
        type: 'effectScatter',
        coordinateSystem: 'bmap',
        data: convertData(data.sort(function (a, b) {
          return b.value - a.value;
        }).slice(0, 6)),
        symbolSize: function (val) {
          return val[2] / 3;
        },
        encode: {
          value: 2
        },
        showEffectOn: 'render',
        rippleEffect: {
          brushType: 'stroke'
        },
        hoverAnimation: true,
        label: {
          formatter: '{b}',
          position: 'right',
          show: true
        },
        itemStyle: {
          shadowBlur: 10,
          shadowColor: '#333'
        },
        zlevel: 1
      }
    ]
  };
  myChart.setOption(option);
}

总体来说，能把这个完整理出来还是探索学习到了，具体bmap的相关配置需要对照百度的官方文档，如果echarts里面能有就好了。