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: 하이라이트 추가 및 새 시리즈 작성

 유형: '효과산란', // 잔물결 애니메이션

  data: this.shTempData, // 유형이 '효과산란'인 경우 도트 진행 위도입니다.

백엔드 인터페이스를 기반으로 데이터를 가져오는 경우 다시 로드하면 됩니다.