echarts做中国或省地图

1.安装依赖（特别注意：安装的版本为5.0.0以下，我使用的是4.9.0，这个十分关键）

npm install echarts 

2.按需导入页面

import echarts from "echarts";
import '../../node_modules/echarts/map/js/china.js' // 引入中国地图数据
// import '../../node_modules/echarts/map/js/world.js' // 引入世界地图数据
// import '../../node_modules/echarts/map/js/province/jiangxi.js' // 引入江西省地图数据

3.创建地图实例

let myChart = echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位置    
window.onresize = myChart.resize;
myChart.setOption({ // 进行相关配置
  backgroundColor: '#000',
  tooltip: {
    lineStyle: {
        type: 'solid',
        color: '#24CFF4',
        width:1,
        opacity: 1,
    },
    trigger: 'item',
    backgroundColor: 'rgba(0,0,0,0)',
    formatter: function(params, ticket, callback) {
      if (params.componentSubType === 'effectScatter') {
        var tipHtml2 = '';
        tipHtml2 = `<div style="background: #098270;position:relative;">
                        <div style="width: 100%;padding: 7px 10px;box-sizing: border-box;display: flex;align-items: flex-end;color: #CAF982;font-size: 16px;margin-bottom: 0px;">
                            <div>`+ params.data.name +`-`+ params.data.value[2] +`个站点</div>
                        </div>
                        <div style="padding: 0 10px 7px 10px;box-sizing: border-box;">
                            <div style="display: flex;font-size: 12px;margin-bottom:6px;">
                                <span style="width: 43px;height: 20px;background: #00c6a9;border:1px solid #fff;box-sizing:border-box;font-size:14px;text-align:center;line-height:20px">正常</span>
                                <span style="height: 20px;line-height: 20px;padding:0 6px;box-sizing: border-box;">运行站点数</span>
                                <span style="color: #00E3C2;font-size: 20px;padding-right:6px">`+ params.data.value1[2] +`</span>
                                <span>个</span>
                            </div>
                            <div style="display: flex;font-size: 12px;margin-bottom:6px;">
                                <span style="width: 43px;height: 20px;background: #D9001B;border:1px solid #fff;box-sizing:border-box;font-size:14px;text-align:center;line-height:20px">故障</span>
                                <span style="height: 20px;line-height: 20px;padding:0 6px;box-sizing: border-box;">运行站点数</span>
                                <span style="color: #D9001B;font-size: 20px;padding-right:6px">`+ params.data.value2[2] +`</span>
                                <span>个</span>
                            </div>
                        </div>
                        <div style="position:absolute;top:0;lefe:0;width:20px;height:20px;border-top:2px solid #CAF982;border-left:2px solid #CAF982;"></div>
                        <div style="position:absolute;top:0;right:0;width:20px;height:20px;border-top:2px solid #CAF982;border-right:2px solid #CAF982;"></div>
                        <div style="position:absolute;bottom:0;lefe:0;width:20px;height:20px;border-bottom:2px solid #CAF982;border-left:2px solid #CAF982;"></div>
                        <div style="position:absolute;bottom:0;right:0;width:20px;height:20px;border-bottom:2px solid #CAF982;border-right:2px solid #CAF982;"></div>
                    </div>`
        return tipHtml2;
      }
    }
  }, 
  geo: { // 这个是重点配置区
    map: 'china', // 表示中国地图
    roam: true,
    label: {
        normal: {
            show: false,
            color:"#fff"
        },
        emphasis: {
            show: true,
            color:"#fff"
        }
    },
    itemStyle: {  //地图颜色
      normal: {
          borderColor: 'rgba(147, 235, 248, 1)',
          borderWidth: 1,
          areaColor: {
              type: 'radial',
              x: 0.5,
              y: 0.5,
              r: 0.8,
              colorStops: [{
                  offset: 0,
                  color: 'rgba(143, 235, 231, 0)' // 0% 处的颜色
              }, {
                  offset: 1,
                  color: 'rgba(143, 235, 231, .2)' // 100% 处的颜色
              }],
              globalCoord: false // 缺省为 false
          },
          shadowColor: 'rgba(128, 217, 248, 1)',
          shadowOffsetX: -2,
          shadowOffsetY: 2,
          shadowBlur: 10
      },
      emphasis: {
          areaColor: '#06AF8F',
          borderWidth: 0,
      }
    }
  },
  series: [
    {
      name: '点',
      type: 'effectScatter',
      coordinateSystem: 'geo',
      symbol: 'circle', //气泡
      itemStyle: {
          normal: {
              color: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [{
                      offset: 0,
                      color: 'rgba(0,234,255,0.2)'
                  }, {
                      offset: 0.8,
                      color: 'rgba(0,234,255,0.8)'
                  }, {
                      offset: 1,
                      color: 'rgba(0,234,255,0.7)'
                  }],
                  global: false // 缺省为 false
              },
          }
      },
      symbolSize: function(val) {
          var max = 6000,
              min = 10;
          var maxSize4Pin = 100,
              minSize4Pin = 20;
          if (val[2] === 0) {
              return 0;
          }
          var a = (maxSize4Pin - minSize4Pin) / (max - min);
          var b = maxSize4Pin - a * max;
          return a * val[2] + b * 1.2;
      },
      label: {
          normal: {
              show: true,
              textStyle: {
                  color: '#fff',
                  fontSize: 9,
              },
              formatter: function(d) {
                  return d.data.value[2]
              }
          }
      },
      labelLine: {
          normal: {
              show: true
          }
      },
      zlevel: 6,
      data: this.convertData(this.data),
    }
  ]
})

以上三步即可完成。
最后附上完整代码

<template>
  <div class="echarts">
    <div :style="{height:'400px',width:'100%'}" ref="myEchart"></div>
  </div>
</template>
<script>
  import echarts from "echarts";
  import '../../node_modules/echarts/map/js/china.js' // 引入中国地图数据
  // import '../../node_modules/echarts/map/js/world.js' // 引入世界地图数据
  // import '../../node_modules/echarts/map/js/province/jiangxi.js' // 引入江西省地图数据
  export default {
    name: "echarts",
    data() {
      return {
        chart: null,
        data:[{
            name: "江西",
            coord: [115.89, 28.68],
            value: 599,
            value1: 99,
            value2: 500
        },{
            name: "广东",
            coord: [113.23, 23.16],
            value: 599,
            value1: 99,
            value2: 500
        }]
      };
    },
    mounted() {
      this.chinaConfigure();
    },
    beforeDestroy() {
      if (!this.chart) {
        return;
      }
      this.chart.dispose();
      this.chart = null;
    },
    methods: {
      convertData(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = this.data[i].coord;
            if(geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value),
                    value1: geoCoord.concat(data[i].value1),
                    value2: geoCoord.concat(data[i].value2),
                });
            }
        }
        return res;
      },
      chinaConfigure() {
        let myChart = echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位置    
        window.onresize = myChart.resize;
        myChart.setOption({ // 进行相关配置
          backgroundColor: '#000',
          tooltip: {
            lineStyle: {
                type: 'solid',
                color: '#24CFF4',
                width:1,
                opacity: 1,
            },
            trigger: 'item',
            backgroundColor: 'rgba(0,0,0,0)',
            formatter: function(params, ticket, callback) {
              if (params.componentSubType === 'effectScatter') {
                var tipHtml2 = '';
                tipHtml2 = `<div style="background: #098270;position:relative;">
                                <div style="width: 100%;padding: 7px 10px;box-sizing: border-box;display: flex;align-items: flex-end;color: #CAF982;font-size: 16px;margin-bottom: 0px;">
                                    <div>`+ params.data.name +`-`+ params.data.value[2] +`个站点</div>
                                </div>
                                <div style="padding: 0 10px 7px 10px;box-sizing: border-box;">
                                    <div style="display: flex;font-size: 12px;margin-bottom:6px;">
                                        <span style="width: 43px;height: 20px;background: #00c6a9;border:1px solid #fff;box-sizing:border-box;font-size:14px;text-align:center;line-height:20px">正常</span>
                                        <span style="height: 20px;line-height: 20px;padding:0 6px;box-sizing: border-box;">运行站点数</span>
                                        <span style="color: #00E3C2;font-size: 20px;padding-right:6px">`+ params.data.value1[2] +`</span>
                                        <span>个</span>
                                    </div>
                                    <div style="display: flex;font-size: 12px;margin-bottom:6px;">
                                        <span style="width: 43px;height: 20px;background: #D9001B;border:1px solid #fff;box-sizing:border-box;font-size:14px;text-align:center;line-height:20px">故障</span>
                                        <span style="height: 20px;line-height: 20px;padding:0 6px;box-sizing: border-box;">运行站点数</span>
                                        <span style="color: #D9001B;font-size: 20px;padding-right:6px">`+ params.data.value2[2] +`</span>
                                        <span>个</span>
                                    </div>
                                </div>
                                <div style="position:absolute;top:0;lefe:0;width:20px;height:20px;border-top:2px solid #CAF982;border-left:2px solid #CAF982;"></div>
                                <div style="position:absolute;top:0;right:0;width:20px;height:20px;border-top:2px solid #CAF982;border-right:2px solid #CAF982;"></div>
                                <div style="position:absolute;bottom:0;lefe:0;width:20px;height:20px;border-bottom:2px solid #CAF982;border-left:2px solid #CAF982;"></div>
                                <div style="position:absolute;bottom:0;right:0;width:20px;height:20px;border-bottom:2px solid #CAF982;border-right:2px solid #CAF982;"></div>
                            </div>`
                return tipHtml2;
              }
            }
          }, 
          geo: { // 这个是重点配置区
            map: 'china', // 表示中国地图
            roam: true,
            label: {
                normal: {
                    show: false,
                    color:"#fff"
                },
                emphasis: {
                    show: true,
                    color:"#fff"
                }
            },
            itemStyle: {  //地图颜色
              normal: {
                  borderColor: 'rgba(147, 235, 248, 1)',
                  borderWidth: 1,
                  areaColor: {
                      type: 'radial',
                      x: 0.5,
                      y: 0.5,
                      r: 0.8,
                      colorStops: [{
                          offset: 0,
                          color: 'rgba(143, 235, 231, 0)' // 0% 处的颜色
                      }, {
                          offset: 1,
                          color: 'rgba(143, 235, 231, .2)' // 100% 处的颜色
                      }],
                      globalCoord: false // 缺省为 false
                  },
                  shadowColor: 'rgba(128, 217, 248, 1)',
                  shadowOffsetX: -2,
                  shadowOffsetY: 2,
                  shadowBlur: 10
              },
              emphasis: {
                  areaColor: '#06AF8F',
                  borderWidth: 0,
              }
            }
          },
          series: [
            {
              name: '点',
              type: 'effectScatter',
              coordinateSystem: 'geo',
              symbol: 'circle', //气泡
              itemStyle: {
                  normal: {
                      color: {
                          type: 'radial',
                          x: 0.5,
                          y: 0.5,
                          r: 0.5,
                          colorStops: [{
                              offset: 0,
                              color: 'rgba(0,234,255,0.2)'
                          }, {
                              offset: 0.8,
                              color: 'rgba(0,234,255,0.8)'
                          }, {
                              offset: 1,
                              color: 'rgba(0,234,255,0.7)'
                          }],
                          global: false // 缺省为 false
                      },
                  }
              },
              symbolSize: function(val) {
                  var max = 6000,
                      min = 10;
                  var maxSize4Pin = 100,
                      minSize4Pin = 20;
                  if (val[2] === 0) {
                      return 0;
                  }
                  var a = (maxSize4Pin - minSize4Pin) / (max - min);
                  var b = maxSize4Pin - a * max;
                  return a * val[2] + b * 1.2;
              },
              label: {
                  normal: {
                      show: true,
                      textStyle: {
                          color: '#fff',
                          fontSize: 9,
                      },
                      formatter: function(d) {
                          return d.data.value[2]
                      }
                  }
              },
              labelLine: {
                  normal: {
                      show: true
                  }
              },
              zlevel: 6,
              data: this.convertData(this.data),
            }
          ]
        })
      }
    }
  }
</script>

这是效果图