console 命令行工具 X clear
console
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/echarts@5.3.3/dist/echarts.min.js"></script>
  <script src="https://unpkg.com/axios@0.27.2/dist/axios.min.js"></script>

  <style>
    html,
    body {
      height: 100%;
      font-size: 14px;
      color: #333;
    }

    * {
      padding: 0;
      margin: 0;
    }

    .app {
      height: 100%;
    }

    #map {
      width: 100%;
      height: 100%;
    }
  </style>

</head>

<body>

  <div class="app" id="app">
    <div id="map">

    </div>
  </div>

  <script>
    let mapData = null;

    window.onload = function () {
      axios.get('https://gw.alipayobjects.com/os/bmw-prod/d6da7ac1-8b4f-4a55-93ea-e81aa08f0cf3.json')
        .then(res => {
          console.log('res', res);
          mapData = res.data;
          initMap();
        })
        .catch(err => {
          console.log('err', err);
        })
    }

    function initMap() {
      let myChart = echarts.init(document.getElementById("map"));
      echarts.registerMap("china", mapData);
      let option = {
        backgroundColor: '#000',
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            return params.name
          }
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {}
          }
        },
        series: [
          {
            name: 'china',
            type: 'map',
            map: 'china',
            label: {
              show: true,
              fontSize: 10,
              color: '#fff',
            },
            selectedMode: 'multiple',
            itemStyle: {
              areaColor: '#323C48',
              borderColor: 'rgb(93,112,146)'
            },
            select: {
              label: {
                show: true,
                fontSize: 10,
                color: '#333',
                textBorderColor: '#fff',
                textBorderWidth: 1.5
              },
              itemStyle: {
                areaColor: 'rgb(49,130,189)',
                borderColor: '#fff'
              },
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 10,
                color: '#fff',
              },
              itemStyle: {
                areaColor: 'rgb(107,174,214)',
                borderColor: '#fff'
              },
            },
            data: [
              { name: '甘肃省', selected: true, value: 1 },
              { name: '云南省', selected: true, value: 1 },
              { name: '四川省', selected: true, value: 1 },
              { name: '宁夏回族自治区', selected: true, value: 1 },
              { name: '陕西省', selected: true, value: 1 },
              { name: '山西省', selected: true, value: 1 },
              { name: '河南省', selected: true, value: 1 },
              { name: '广东省', selected: true, value: 1 },
              { name: '福建省', selected: true, value: 1 },
              { name: '安徽省', selected: true, value: 1 },
              { name: '北京市', selected: true, value: 1 },
              { name: '上海市', selected: true, value: 1 },
              { name: '河北省', selected: true, value: 1 },
              { name: '香港特別行政區', selected: true, value: 1 },
              { name: '江西省', selected: true, value: 1 },
              { name: '浙江省', selected: true, value: 1 },
              { name: '广西壮族自治区', selected: true, value: 1 },
              { name: '重庆市', selected: true, value: 1 },
            ]
          }
        ],
      };
      myChart.setOption(option);
    }
  </script>

</body>

</html>