echarts绘画中国地图

1.获取地图的json数据
可以在datav这里获取JSON API
http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5

2.这里用到的是react，其他框架同理，主要是其中的option

import * as echarts from 'echarts';
import dataJson from './data.json';
import { useEffect } from 'react';

export default () => {
  let data: any = [
    '河北',
    '山东',
    '辽宁',
    '黑龙江',
    '甘肃',
    '吉林',
    '青海',
    '河南',
    '江苏',
    '湖北',
    '湖南',
    '浙江',
    '江西',
    '广西',
    '广东',
    '云南',
    '福建',
    '台湾',
    '海南',
    '山西',
    '四川',
    '陕西',
    '贵州',
    '安徽',
    '重庆',
    '宁夏',
    '内蒙古',
    '新疆',
    '西藏',
    '南海诸岛',
    '北京',
    '天津',
  ];

  data = data.map((v: string, i: number) => {
    return {
      name: v,
      selected: i === 0,
      value: i,
    };
  });

  const option = {
    tooltip: {
      show: false,
    },
    background: 'red',
    geo: {
      // 地理坐标系组件,支持在地理坐标系上绘制散点图、线图
      map: 'china',
      aspectScale: 0.75,
      zoom: 1.1,
    },
    series: [
      {
        type: 'map',
        label: {
          normal: {
            show: true,
            textStyle: {
              color: '#1DE9B6',
            },
          },
          emphasis: {
            textStyle: {
              color: 'rgb(183, 185, 14)',
            },
          },
        },
        zoom: 1.1,
        map: 'china',
      },
      // 地图的线路图动画效果相关设置
      {
        type: 'lines',
        zlevel: 2,
        effect: {
          show: true,
          period: 4,
          trailLength: 0.6,
          symbol: 'arrow',
          symbolSize: 7,
        },
        lineStyle: {
          normal: {
            color: '#1DE9B6',
            width: 1,
            opacity: 0.1,
            curveness: 0.3,
          },
        },
        data: [],
      },
    ],
  };

  useEffect(() => {
    const chartDom = document.getElementById('main') as HTMLElement;
    let uploadDataUrl = dataJson;
    echarts.registerMap('china', uploadDataUrl as any);
    const myChart = echarts.init(chartDom);
    option && myChart.setOption(option);
  }, []);

  return <div style={{ height: 500 }} id="main" />;
};