echarts + Baidu Map implements map display (the code uses vue as an example)

1. Introduce Baidu Map API

//index.html中
<script src="http://api.map.baidu.com/api?v=2.0&ak=你的ak值"></script>

2. Install echarts

npm install echarts --save

3. Introduce the following into the component that needs to create a map

import echarts from "echarts";                    
require("echarts/extension/bmap/bmap");
const CUSTOM_MAP_CONFIG = require("../../../static/custom_map_config.json");   

This custom_map_config.json is a configuration file of Baidu map style. There is a configuration recommended by echart at the bottom of the article. You can also go to Baidu Map to get it (Baidu Map—》Console----》Featured Service Platform----》Personalization map) link

4. option preparation

      {
        title: {
          text: "应急资源统计分散图",
          left: "center",
          textStyle: {
            color: "#fff"
          }
        },
        tooltip: {
          triggerOn: "click",
          show:false
        },
        bmap: {                                    //百度地图配制
          center: [104.114129, 37.550339],
          zoom: 5,
          roam: true,
          mapStyle: {
            styleJson: CUSTOM_MAP_CONFIG          //地图样式配制
          }
        },
        series: []
      }

5. Instantiate the map

 let mapDiv = document.getElementById("material_map_box");
 let myChart = echarts.init(mapDiv);
 myChart.setOption(this.options);

custom_map_config.json file

[
    {
      "featureType": "water",
      "elementType": "all",
      "stylers": {
        "color": "#044161"
      }
    },
    {
      "featureType": "land",
      "elementType": "all",
      "stylers": {
        "color": "#004981"
      }
    },
    {
      "featureType": "boundary",
      "elementType": "geometry",
      "stylers": {
        "color": "#064f85"
      }
    },
    {
      "featureType": "railway",
      "elementType": "all",
      "stylers": {
        "visibility": "off"
      }
    },
    {
      "featureType": "highway",
      "elementType": "geometry",
      "stylers": {
        "color": "#004981"
      }
    },
    {
      "featureType": "highway",
      "elementType": "geometry.fill",
      "stylers": {
        "color": "#005b96",
        "lightness": 1
      }
    },
    {
      "featureType": "highway",
      "elementType": "labels",
      "stylers": {
        "visibility": "off"
      }
    },
    {
      "featureType": "arterial",
      "elementType": "geometry",
      "stylers": {
        "color": "#004981"
      }
    },
    {
      "featureType": "arterial",
      "elementType": "geometry.fill",
      "stylers": {
        "color": "#00508b"
      }
    },
    {
      "featureType": "poi",
      "elementType": "all",
      "stylers": {
        "visibility": "off"
      }
    },
    {
      "featureType": "green",
      "elementType": "all",
      "stylers": {
        "color": "#056197",
        "visibility": "off"
      }
    },
    {
      "featureType": "subway",
      "elementType": "all",
      "stylers": {
        "visibility": "off"
      }
    },
    {
      "featureType": "manmade",
      "elementType": "all",
      "stylers": {
        "visibility": "off"
      }
    },
    {
      "featureType": "local",
      "elementType": "all",
      "stylers": {
        "visibility": "off"
      }
    },
    {
      "featureType": "arterial",
      "elementType": "labels",
      "stylers": {
        "visibility": "off"
      }
    },
    {
      "featureType": "boundary",
      "elementType": "geometry.fill",
      "stylers": {
        "color": "#029fd4"
      }
    },
    {
      "featureType": "building",
      "elementType": "all",
      "stylers": {
        "color": "#1a5787"
      }
    },
    {
      "featureType": "label",
      "elementType": "all",
      "stylers": {
        "visibility": "off"
      }
    }
  ]

The preparation here should use the official demo of echarts as much as possible. I don’t know the reason for the preparation of Baidu map. After I introduced it, the map cannot appear. I have not found the specific problem. If you know the reason, please leave a message. ( echarts official demo )

6. Marking of data on the map.

Generally speaking, using scatter, push in the series is as follows

{
        type: "scatter",
        coordinateSystem: "bmap",            symbol:'circle',
        symbolSize: 70,
        label: {
          normal: {
            position: "inside",
            fontSize: 14,
            color: "#000000",
            lineHeight: 20,
            show: true
          },
          emphasis: {
            show: true
          }
        },
        itemStyle: {
          normal: {
            color: "#fff"
          }
        },
        data: []
      }