由于當前版本的echarts要展示地圖是要借助百度地圖的八堡，而很多需求就是僅僅展示一個中國地圖咆蒿，所以引入百度地圖不是很友好牲蜀，接下來說明如何在echarts中展示中國地圖

步驟如下

1. 下載中國地圖資源：網盤鏈接: https://pan.baidu.com/s/1bZKjo3hypyFLWOkSoWvbPA 密碼: isos 文件雖然會亂碼但是不影響使用

2. cnpm i  echarts --save
   

3. //按需引入
   import { useState, useEffect, useRef, useMemo } from 'react';
   import { Carousel, Popover } from 'antd';
   import { connect } from 'dva';
   import { useMount } from 'ahooks';
   import styles from './index.less';
   import '../../../../../../utils/china.js';
   import * as echarts from 'echarts/core';
   import { TitleComponent, TooltipComponent } from 'echarts/components';
   import { ScatterChart, EffectScatterChart } from 'echarts/charts';
   import { CanvasRenderer } from 'echarts/renderers';
   echarts.use([
    TitleComponent,
    TooltipComponent,
    ScatterChart,
    EffectScatterChart,
    CanvasRenderer,
   ]);
   function setCityData() {
    return Math.round(Math.random() * 100);
   }
   let option;
   const data = [
    { name: '貴州', value: setCityData() },
    { name: '廣東', value: setCityData() },
    { name: '河南', value: setCityData() },
    { name: '云南', value: setCityData() },
    { name: '北京', value: setCityData() },
    { name: '天津', value: setCityData() },
    { name: '上海', value: setCityData() },
    { name: '重慶', value: setCityData() },
    { name: '海南', value: setCityData() },
    { name: '臺灣', value: setCityData() },
    { name: '香港', value: setCityData() },
    { name: '澳門', value: setCityData() },
    { name: '陜西', value: setCityData() },
    { name: '吉林', value: setCityData() },
    { name: '福建', value: setCityData() },
    { name: '江蘇', value: setCityData() },
    { name: '浙江', value: setCityData() },
    { name: '江西', value: setCityData() },
    { name: '湖北', value: setCityData() },
    { name: '遼寧', value: setCityData() },
    { name: '黑龍江', value: setCityData() },
    { name: '湖南', value: setCityData() },
    { name: '安徽', value: setCityData() },
    { name: '山東', value: setCityData() },
    { name: '新疆', value: setCityData() },
    { name: '廣西', value: setCityData() },
    { name: '甘肅', value: setCityData() },
    { name: '河北', value: setCityData() },
    { name: '山西', value: setCityData() },
    { name: '青海', value: setCityData() },
    { name: '西藏', value: setCityData() },
    { name: '四川', value: setCityData() },
    { name: '寧夏', value: setCityData() },
    { name: '內蒙古', value: setCityData() },
   ];
   const chinaMap = props => {
     useMount(() => {
      const myMain = document.getElementById('anlc');
      const myChart = echarts.init(myMain);
      option = {
      title: {
        text: '中國地圖',
        subtext: 'data from PM25.in',
        sublink: 'http://www.pm25.in',
        left: 'center',
      },
      tooltip: {
        trigger: 'item',
      },
      visualMap: {
        show: true,
        x: 'left',
        y: 'bottom',
        splitList: [
          { start: 90, end: 100 },
          { start: 80, end: 90 },
          { start: 70, end: 80 },
          { start: 60, end: 70 },
          { start: 50, end: 60 },
          { start: 40, end: 50 },
          { start: 30, end: 40 },
          { start: 20, end: 30 },
          { start: 10, end: 20 },
          { start: 0, end: 10 },
        ],
        color: [
          '#f47920',
          '#444693',
          '#224b8f',
          '#102b6a',
          '#494e8f',
          '#ae6642',
          '#6f60aa',
          '#694d9f',
          '#8552a1',
          '#401c44'
        ],
      },
      series: [
        {
          name: '數據',
          type: 'map',
          mapType: 'china',
          roam: true,
          label: {
            normal: {
              show: true, 
            },
            emphasis: {
              show: false,
            },
          },
          data: data
        },
      ],
    };
    option && myChart.setOption(option);
   });
   return (
     <>
       <div id="anlc" style={{ height: '100%', width: '90%' }} ></div>
     </>
    );
   };
   export default chinaMap;
   

效果圖