react中echarts中国地图数据展示

由于当前版本的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 (
     <>
       
   
     
    );
   };
   export default chinaMap;
   

效果图