一、主要分为以下五个步骤：

1、可以先下载一个jquery插件，用于作为请求数据

在终端使用：npm install jQuery;下载jquery插件；

2、在需要使用的地方引入jqeury模块

直接使用：import $ from 'jquery'，引入jquery; 第二步在你需要绘制地图的组件中引入jQuery插件，import $ from 'jquery'

3、下载echarts有关插件

在终端使用：npm install echarts -S;下载echarts插件；

4、引入echarts插件

在需要使用echarts的组件中使用：import echarts from 'echarts'引入插件

5、具体使用echarts绘制地图的代码如下；（以香港未为例）

实例如下：以香港的例子为例：

var ROOT_PATH =

      'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';

\


    var chartDom = document.getElementById('main');

    var myChart = echarts.init(chartDom);

    var option;

    myChart.showLoading();

    //2、 这个geoJson数据可以自己在网上找相关的浙江省的数据，或者从后端的接口来调用数据

    $.get(ROOT_PATH + '/data/asset/geo/HK.json', function (geoJson) {//这个数据可以用接口接过来；

      myChart.hideLoading();

\


      echarts.registerMap('HK', geoJson);

\


      myChart.setOption(option = {

        //3、 这个表示上方的title,用不到

        title: {

          text: '香港18区人口密度 （2011）',

          subtext: '人口密度数据来自Wikipedia',

          sublink: 'http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12'

        },

        //4、 这个是放到一小块地图上展示的内容，他是根据series中的data数组来决定的name:b，value:c（b: 表示名称，c: 表示值）

        tooltip: {

          trigger: 'item',

          formatter: '{b}<br/>{c} (p / km2)'

        },

        //5、 这个表示下载、展示……用不到；

        // toolbox: {

        //   show: true,

        //   orient: 'vertical',

        //   left: 'right',

        //   top: 'center',

        //   feature: {

        //     dataView: { readOnly: false },

        //     restore: {},

        //     saveAsImage: {}

        //   }

        // },

        //6、 这个是根据data中的value值来相应的显示不同的颜色（在这里是根据人口密度来显示不同的颜色；）

        visualMap: {

          min: 800,

          max: 50000,

          text: ['High', 'Low'],

          realtime: false,

          calculable: true,

          inRange: {

            color: ['lightskyblue', 'yellow', 'orangered']

          }

        },

        series: [

          {

            name: '香港18区人口密度',

            type: 'map',

            mapType: 'HK', // 自定义扩展图表类型

            label: {

              show: true

            },

            data: [

              { name: '中西区', value: 20057.34 },

              { name: '湾仔', value: 15477.48 },

              { name: '东区', value: 31686.1 },

              { name: '南区', value: 6992.6 },

              { name: '油尖旺', value: 44045.49 },

              { name: '深水埗', value: 40689.64 },

              { name: '九龙城', value: 37659.78 },

              { name: '黄大仙', value: 45180.97 },

              { name: '观塘', value: 55204.26 },

              { name: '葵青', value: 21900.9 },

              { name: '荃湾', value: 4918.26 },

              { name: '屯门', value: 5881.84 },

              { name: '元朗', value: 4178.01 },

              { name: '北区', value: 2227.92 },

              { name: '大埔', value: 2180.98 },

              { name: '沙田', value: 9172.94 },

              { name: '西贡', value: 3368 },

              { name: '离岛', value: 806.98 }

            ],

            // 7、自定义名称映射（这个是设置显示在地图上的各个小块区域的名字）

            nameMap: {

              'Central and Western': '中西区',

              'Eastern': '东区',

              'Islands': '离岛',

              'Kowloon City': '九龙城',

              'Kwai Tsing': '葵青',

              'Kwun Tong': '观塘',

              'North': '北区',

              'Sai Kung': '西贡',

              'Sha Tin': '沙田',

              'Sham Shui Po': '深水埗',

              'Southern': '南区',

              'Tai Po': '大埔',

              'Tsuen Wan': '荃湾',

              'Tuen Mun': '屯门',

              'Wan Chai': '湾仔',

              'Wong Tai Sin': '黄大仙',

              'Yau Tsim Mong': '油尖旺',

              'Yuen Long': '元朗'

            }

          }

        ]

      });

    });

    option && myChart.setOption(option);