地图type=map和type=scatter参数地理坐标（中国地图疫情）说明：

第一种方式：利用vue开发的echart页面

中国地图显示：https://echarts.apache.org/zh/option.html#visualMap-piecewise.type

vue代码：

<template>
  <ag-page class="newPoor" id="supportPoor">
    <dl-header name="扶贫线上化升级"  :backFlag="false" @backClick="backClick"></dl-header>
    <main class="content" ref="mainContent">
        <div class="header">
            <div class="header-introduce">
                <div class="header-titleBox">
                    <div class="header-title-icon">
                      <img src="./imgs/icon_title.png" />
                    </div>
                    <div class="header-title">简介背景</div>
                </div>
              <div class="header-content"
              >平安产险积极响应“压实责任，简历精准化，常态化机制”的保险业扶贫工作需求，成功试点产业扶贫“台江模式”—围绕优势产业，提供“免息免担保+贴费保险”支持，撬动扶贫产业资金，打造覆盖人、财、物的一揽子保险“造血扶贫模式”。</div>
              <div class="filling"></div>
              <mt-tabbar v-model="selected">
                  <mt-tab-item id="0" @click.native="tabBarClick(0)">
                    <div class="item">
                      <div class="item-value">{{totalCount}}</div>
                      <div class="item-label">
                        <span>项目总数</span>
                        <span class="item-unit">(个)</span>
                      </div>
                      <div class="item-selected-line"></div>
                    </div>
                  </mt-tab-item>
                  <mt-tab-item id="1" @click.native="tabBarClick(1)">
                    <div class="item">
                      <div class="item-value">{{totalMoney}}</div>
                      <div class="item-label">
                        <span>放款金额</span>
                        <span class="item-unit">(万元)</span>
                      </div>
                      <div class="item-selected-line"></div>
                    </div>
                  </mt-tab-item>
                  <mt-tab-item id="2" @click.native="tabBarClick(2)">
                    <div class="item">
                      <div class="item-value">{{totalHouholds}}</div>
                      <div class="item-label">
                        <span>带贫人数</span>
                        <span class="item-unit">(人)</span>
                      </div>
                      <div class="item-selected-line"></div>
                    </div>
                  </mt-tab-item>
                </mt-tabbar>
                <div class="map-container">
                    <div class="map-chart" ref="myEchart"></div>
                </div>
            </div>
        </div>
    </main>
  </ag-page>
</template>

<script>
  import header from '@/components/headerDl/header';
  import echarts from 'echarts';
  import '../../../node_modules/echarts/map/js/china';
  import iconEnter from './imgs/icon_enter.png';
  import axios from 'axios';

  export default {
    name: 'supportPoor',
    data () {
      return {
        mapData: [],  // json数据返回
        totalCount: 0, // 项目总数
        totalMoney: 0, // 放款金额
        totalHouholds: 0, // 带贫人数
        projectCountList: [],  // 项目数据
        loanMoneyList: [],  // 放款金额数据
        poorHouseHoldsCountList: [],  // 带贫数据
        myChart: null,
        mapOption: {
          tooltip: { // 提示框组件
            trigger: 'item',
            enterable: true,  // 鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true。
            position: function (point, params, dom, rect, size) {  // 提示框浮层的位置,通过数组表示提示框浮层的位置，支持数字设置绝对位置，百分比设置相对位置
              dom.style.transform = 'translateZ(0)'; // tooltip层级被canvas覆盖
              return [point[0], point[1] - 50];  // point: 鼠标位置，如 [20, 40]。
            },
            confine: true, // 是否将 tooltip 框限制在图表的区域内。
            extraCssText: 'padding: 8px 10px;border-radius: 6px 6px 6px 0 0 0 6px;font-size: 12px;color: #FFFFFF;' // 额外附加到浮层的 css 样式。如下为浮层添加阴影的示例：
          },
          visualMap: [
            {
              type: 'piecewise',  // 分段视觉映射组件-即中间显示条形
              show: true,  // 是否显示 visualMap-piecewise 组件
              seriesIndex: 1, // 指定取哪个系列的数据，即哪个系列的 series.data。默认取所有系列。
              inRange: {  // 定义目标系列视觉形式，visualMap-piecewise.inRange 和 visualMap-piecewise.outOfRange，则itemSymbol无需设置
                color: ['#F4FAE8', '#D8E4BD', '#A6C566', '#648228'], // 深绿色、浅绿色、淡浅绿色、白浅绿色
                symbol: 'circle',  // 圆点
                symbolSize: 5  // 圆点大小
              },
              inverse: true, // 当 visualMap.orient 为 'vertical' 时，pieces[0] 或 categories[0]对应『上方』，当 visualMap.orient 为 'horizontal' 时，pieces[0] 或 categories[0] 对应『左方』。
              pieces: [  // 即使圆点显示，如果设置了 visualMap-piecewise.pieces 或者 visualMap-piecewise.categories，则 splitNumber 无效。
                { min: 50 },
                { min: 10, max: 50 },
                { min: 1, max: 10 },
                { max: 1 }
              ],
              orient: 'horizontal',  //  水平放置 visualMap 组件
              left: 'center',  // visualMap 组件离容器左侧的距离
              bottom: 0,  // visualMap 组件离容器下侧的距离。
              textStyle: {  // visualMap 组件文字
                color: '#999999',
                fontSize: 10
              },
              itemWidth: 6,  // 图形的宽度，即每个小块的宽度。
              itemHeight: 6,  // 图形的高度，即每个小块的高度。
              align: 'left',  // 图形在左文字在右
              textGap: 5,  // 图形与文字之间的距离
              itemGap: 20   // 图形与图形之间的距离
            }
          ],
          geo: { // 地理坐标系组件。地理坐标系组件用于地图的绘制
            map: 'china',  // 地图类型
            roam: false,  // 是否开启鼠标缩放和平移漫游。默认不开启
            zoom: 1.5,  // 当前视角的缩放比例。
            bottom: -10, // 组件离容器下侧的距离,bottom 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比
            label: {  // 地图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
              show: true,  // 是否显示文字标签，比如显示广东名称在地图地图上
              color: '#555555', // 文字标签颜色
              fontSize: 6   // 文字标签字体大小
            },
            itemStyle: { // 地图区域的多边形 图形样式。
              areaColor: '#F4FAE8', // 地图区域的颜色。
              borderColor: '#DCE5C8', // 图形的描边颜色
              borderWidth: 0.6  // 描边线宽。为 0 时无描边。
            },
            emphasis: {
              itemStyle: { // 高亮状态下的多边形和标签样式
                areaColor: '#F5E303' // 黄色
              }
            }
          },
          series: [
            {
              type: 'scatter',
              coordinateSystem: 'geo'  // 使用地理坐标系，通过 geoIndex 指定相应的地理坐标系组件
            },
            {
              type: 'map',
              geoIndex: 0, // geoIndex 指定一个 geo 组件,当设定了 geoIndex 后，series-map.map 属性，以及 series-map.itemStyle 等样式配置不再起作用，而是采用 geo 中的相应属性。
              data: []  // 地图系列中的数据内容数组。数组项可以为单个数值。即选中部分的数据name\value
            }
          ]
        }
      };
    },
    components: {
      'dl-header': header
    },
    computed: {},
    created () {},
    mounted () {
      this.getMapData();
    },
    watch: {},
    methods: {
      // 点击tabbar
      tabBarClick (item) {
        switch (item) {
          case 0:
            this.mapOption.series[1].data = this.projectCountList;
            this.drawMap('扶贫项目数', '个', [
              { min: 50 },
              { min: 10, max: 50 },
              { min: 1, max: 10 },
              { max: 1 }
            ]);
            break;
          case 1:
            this.mapOption.series[1].data = this.loanMoneyList;
            this.drawMap('放款金额', '万元', [
              { min: 100 },
              { min: 50, max: 100 },
              { min: 1, max: 50 },
              { max: 1 }
            ]);
            break;
          case 2:
            this.mapOption.series[1].data = this.poorHouseHoldsCountList;
            this.drawMap('带贫人数', '人', [
              { min: 50 },
              { min: 10, max: 50 },
              { max: 10 },
              { max: 1 }
            ]);
            break;
          default:
            this.mapOption.series[1].data = [];
            break;
        }
      },
      // 获取地图后台数据
      getMapData () {
        const that = this;
        axios.get('http://localhost:8080/static/json/newPoor.json').then(res => {
           if (res.data.body && res.data.body.length > 0) {
             that.mapData = [...res.data.body];
             that.projectCountList = [];
             that.loanMoneyList = [];
             that.poorHouseHoldsCountList = [];
             let tempMoney = 0;
             res.data.body.map(item => {
               const { province, projectCount, loanMoney, poorHouseHoldsCount } = item;
               if (province) {
                 that.totalCount = Number(that.totalCount) + Number(projectCount);
                 tempMoney = Number(tempMoney) + Number(loanMoney);
                 that.totalHouholds = Number(that.totalHouholds) + Number(poorHouseHoldsCount);
                const provinceName = province.replace(/省|市|自治区|壮族自治区|回族自治区|维吾尔自治区|特别行政区/g, '');
                that.projectCountList.push({
                  name: provinceName,
                  value: projectCount
                });
                that.loanMoneyList.push({
                  name: provinceName,
                  value: (loanMoney / 10000).toFixed(2)
                });
                that.poorHouseHoldsCountList.push({
                  name: provinceName,
                  value: poorHouseHoldsCount
                });
               }
             });
             that.totalMoney = (tempMoney / 10000).toFixed(2);
             that.mapOption.series[1].data = that.projectCountList;
           } else {
             that.mapData = [];
             that.totalCount = 0;
             that.totalMoney = 0;
             that.totalHouholds = 0;
           }
           that.drawMap('扶贫项目数', '个', [
            { min: 50 },
            { min: 10, max: 50 },
            { max: 10 },
            { max: 1 }
          ]);
        });
      },
      // 绘制中国地图
      drawMap (name, unit, pieces) {
        const that = this;
        this.mapOption.tooltip.formatter = function (p) {
          return that.customTooltip(p, name, unit);
        };
        this.mapOption.visualMap[0].pieces = pieces;
        this.myChart = echarts.init(this.$refs.myEchart);
        this.myChart.setOption(this.mapOption);
        window.onresize = () => {
           this.myChart.resize();
        };
      },
      // 自定义tooltip
      customTooltip (params, name, unit) {
        console.log(params);
        var counts = params.value || 0;
        let url = window.location.href;
        let goToUrl = url.split('#')[0] + '#/poorProjectList?proviceName=' + params.name;
        var res = '<div><a href="' + goToUrl + '">';
            res += '<div style="display:flex;align-items:center">';
            res += '<div><div style="text-align:left;color:#ffffff;line-height:17px;">' + params.name + '</div><div style="color:rgba(255,255,255,0.66);line-height:17px;">' + name + '<span>' + counts + unit + '</span></div></div>';
            res += '<div style="display:flex;margin-left:12px;"><img src="' + iconEnter + '" style="widht:17px; height:17px;"></div>';
            res += '</div></a></div>';
            res += '<div style="position: absolute;width: 0;height: 0;border-width: 4px;border-style: solid;border-color: rgba(0,0,0,0.6) transparent transparent transparent;top: 54px;left: 60px;"></div>';
        return res;
      },
      // header返回按钮回调
      backClick () {
      if (window.App.IS_NATIVE && typeof window.app.finish === 'function') {
        window.app.finish();
      } else {
        this.$router.go(-1);
      }
      }
    }
  };
</script>

本地效果为：

参数说明：

tooltip：提示框组件；

第一方式：tooltip参数说明：

tooltip: { // 提示框组件
  trigger: 'item',
  enterable: true,  // 鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true。
  position: function (point, params, dom, rect, size) {  // 提示框浮层的位置,通过数组表示提示框浮层的位置，支持数字设置绝对位置，百分比设置相对位置
    dom.style.transform = 'translateZ(0)'; // tooltip层级被canvas覆盖
    return [point[0], point[1] - 50];  // point: 鼠标位置，如 [20, 40]。
 },
  confine: true, // 是否将 tooltip 框限制在图表的区域内。
  extraCssText: 'padding: 8px 10px;border-radius: 6px 6px 6px 0 0 0 6px;font-size: 12px;color: #FFFFFF;' // 额外附加到浮层的 css 样式。如下为浮层添加阴影的示例：
},

ooltip-formatter提示框浮层自定义模版：

this.mapOption.tooltip.formatter = function (p) {
  return that.customTooltip(p, name, unit);
};
// 自定义tooltip
customTooltip (params, name, unit) {
   console.log(params);
   var counts = params.value || 0;
   let url = window.location.href;
   let goToUrl = url.split('#')[0] + '#/poorProjectList?proviceName=' + params.name;
   var res = '<div><a href="' + goToUrl + '">';
       res += '<div style="display:flex;align-items:center">';
       res += '<div><div style="text-align:left;color:#ffffff;line-height:17px;">' + params.name + '</div><div style="color:rgba(255,255,255,0.66);line-height:17px;">' + name + '<span>' + counts + unit + '</span></div></div>';
       res += '<div style="display:flex;margin-left:12px;"><img src="' + iconEnter + '" style="widht:17px; height:17px;"></div>';
       res += '</div></a></div>';
       res += '<div style="position: absolute;width: 0;height: 0;border-width: 4px;border-style: solid;border-color: rgba(0,0,0,0.6) transparent transparent transparent;top: 54px;left: 60px;"></div>';
    return res;
},

tooltip.formatter文字说明：https://echarts.apache.org/zh/option.html#tooltip.formatter

第二种方式：vusualMap视觉映射组件说明：

visualMap: [
  {
    type: 'piecewise',  // 分段视觉映射组件-即中间显示条形
    show: true,  // 是否显示 visualMap-piecewise 组件
    seriesIndex: 1, // 指定取哪个系列的数据，即哪个系列的 series.data。默认取所有系列。
    inRange: {  // 定义目标系列视觉形式，visualMap-piecewise.inRange 和 visualMap-piecewise.outOfRange，则itemSymbol无需设置
       color: ['#F4FAE8', '#D8E4BD', '#A6C566', '#648228'], // 深绿色、浅绿色、淡浅绿色、白浅绿色
       symbol: 'circle',  // 圆点
       symbolSize: 5  // 圆点大小
    },
    inverse: true, // 当 visualMap.orient 为 'vertical' 时，pieces[0] 或 categories[0]对应『上方』，当 visualMap.orient 为 'horizontal' 时，pieces[0] 或 categories[0] 对应『左方』。
    pieces: [  // 即使圆点显示，如果设置了 visualMap-piecewise.pieces 或者 visualMap-piecewise.categories，则 splitNumber 无效。
      { min: 50 },
      { min: 10, max: 50 },
      { min: 1, max: 10 },
      { max: 1 }
    ],
    orient: 'horizontal',  //  水平放置 visualMap 组件
    left: 'center',  // visualMap 组件离容器左侧的距离
    bottom: 0,  // visualMap 组件离容器下侧的距离。
    textStyle: {  // visualMap 组件文字
       color: '#999999',
       fontSize: 10
    },
    itemWidth: 6,  // 图形的宽度，即每个小块的宽度。
    itemHeight: 6,  // 图形的高度，即每个小块的高度。
    align: 'left',  // 图形在左文字在右
    textGap: 5,  // 图形与文字之间的距离
    itemGap: 20   // 图形与图形之间的距离
  }
],

如图：

visualMap 是视觉映射组件说明：https://echarts.apache.org/zh/option.html#visualMap

第三种方式：series系列参数说明扩展geo组件： 

geo: { // 地理坐标系组件。地理坐标系组件用于地图的绘制
   map: 'china',  // 地图类型
   roam: false,  // 是否开启鼠标缩放和平移漫游。默认不开启
   zoom: 1.5,  // 当前视角的缩放比例。
   bottom: -10, // 组件离容器下侧的距离,bottom 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比
   label: {  // 地图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
      show: true,  // 是否显示文字标签，比如显示广东名称在地图地图上
      color: '#555555', // 文字标签颜色
      fontSize: 6   // 文字标签字体大小
   },
   itemStyle: { // 地图区域的多边形 图形样式。
      areaColor: '#F4FAE8', // 地图区域的颜色。
      borderColor: '#DCE5C8', // 图形的描边颜色
      borderWidth: 0.6  // 描边线宽。为 0 时无描边。
   },
   emphasis: {
      itemStyle: { // 高亮状态下的多边形和标签样式
        areaColor: '#F5E303' // 黄色
      }
   }
},
series: [
   {
     type: 'scatter',
     coordinateSystem: 'geo'  // 使用地理坐标系，通过 geoIndex 指定相应的地理坐标系组件
   },
   {
     type: 'map',
     geoIndex: 0, // geoIndex 指定一个 geo 组件,当设定了 geoIndex 后，series-map.map 属性，以及 series-map.itemStyle 等样式配置不再起作用，而是采用 geo 中的相应属性。
     data: []  // 地图系列中的数据内容数组。数组项可以为单个数值。即选中部分的数据name\value
   }
]

获取数据就是为了现实地图不同颜色的区域和tooltip提示层里面的数据展示

that.projectCountList=[];
that.projectCountList.push({
     name: provinceName,
     value: projectCount
});
that.mapOption.series[1].data = that.projectCountList;

如图：

 type=map的参数说明：https://echarts.apache.org/zh/option.html#series-map