echars根据json数据画地图（省市区），并加入高亮点

 总体的代码：

      data(){
return
{
            shTempData:[{ name: '', value: [106.087780, 33.768826, 90] },
      { name: '', value: [106.175370, 33.871970, 120] },
      { name: '', value: [105.958710, 33.815350, 142] },
      { name: '', value: [106.056020, 33.653740, 120] },
      { name: '', value: [106.043910, 33.804150, 142] },
      { name: '', value: [105.947320, 34.095380, 123] },
    ]
}
}

SetHx(){
        
      const huixianJson = require('./huixian.json');
      var myChart = echarts.init(this.$refs["sctterMap"]);

      echarts.registerMap('huixian', huixianJson, {}) // 这个是关键，
      // console.log(JSON)
      let option = {
        geo: {
          map: 'huixian', // js 地图包要和echarts.registerMap()里面的名字保持一致
          type: 'map', // 地图
          // mapType: '阜阳市', // 自定义地区要和echarts.registerMap()里面的名字保持一致
          coordinateSystem: 'geo',
          roam: false,
          zoom: 1,
          zlevel: 2,
          // data: this.shTempData, // 圆点进度纬度
          label: { // 显示地区名
            normal: {
              show: true,
              // 提示内容 里面渲染的是data里面的数据
              formatter: params => {
                return params.name
              },
              position: 'top', // 提示方向
              color: '#071568',
              textStyle: {
                color: "#071568",
                fontSize: 0,
              },
            },
            emphasis: {
              show: true,// 点
              textStyle: {
                color: "#071568",
                fontSize: 0,
              },
            }
          },
          itemStyle: { // 颜色配置
            normal: {
              color: '#FED52F', // 圆球拨动的颜色
              borderColor: "#0e46b7",
              shadowColor: "#0e46b7",
              // 地区颜色
              areaColor: "#071568",
              borderWidth: 1, //设置外层边框
              textStyle: {
                color: "#071568",
                fontSize: 0,
              },
            },
            emphasis: {
              shadowOffsetX: 0,
              shadowOffsetY: 1,
              shadowBlur: 10,
              borderWidth: 1,
              //鼠标选择区域颜色
              areaColor: "#071568",
              textStyle: {
                color: "#071568",
                fontSize: 0,
              },
            }
            // areaColor: '#021642'
          },
          nameMap: {

          }
        },
        title: {// 
          // text:
          x: 'center',
          roam: false
        },

        series: [
          {
            name: ' ',
            type: 'effectScatter', // 涟漪动画
            mapType: 'hx', // 自定义扩展图表类型
            coordinateSystem: 'geo',
            roam: false,
            zoom: 1,
            zlevel: 2,
            symbol: 'circle', // 标记的图形。
            symbolSize: 15, // 标记的大小。
            rippleEffect: {
              period: 4, // 动画速度，值越小，动画越快
              brushType: 'stroke' // 波纹的绘制方式
            },
            label: {
              normal: {
                show: true,
                // 提示内容
                formatter: params => {
                  return params.name
                },
                position: 'top', // 提示方向
                color: '#fff'
              },
              emphasis: {
                show: true // 点
              }
            },
            itemStyle: {
              normal: {
                color: '#FED52F', // 圆球拨动的颜色
                borderColor: 'rgba(147, 235, 248, 1)',
                borderWidth: 0.5,
                areaColor: '#021642'
              },
              emphasis: {
                areaColor: 'orangered', // 滑过高亮颜色
                borderColor: '#111'
              }
              // areaColor: '#021642'
            },
            data: this.shTempData, //  在 type为'effectScatter'时就是圆点进度纬度
          }
        ]
      }
      myChart.setOption(option)
      },

1:DataV.GeoAtlas地理小工具系列  从该地址上找到你要画的省，市，县

2：可以使用调接口的方式， 也可以使用 直接获取接口内数据的方式

https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json

3：将接口内获取到的数据放入注册地图中， 我用的是 静态文件引入，因为该项目属于本地化部署

      const huixianJson = require('./huixian.json');

 echarts.registerMap('huixian', huixianJson, {}) 

4：加上高亮点，新写一个series

 type: 'effectScatter', // 涟漪动画

  data: this.shTempData, //  在 type为'effectScatter'时就是圆点进度纬度

如果是根据后端接口获取数据 ，重新加载一下就好了