echarts实现地图

实现效果

1. echarts获取

2. 地图边界数据获取

js代码

里面的 ZY_JSON 去上面的 2. 地图边界数据获取 里面获取
formatRoundNum方法向上取整十（使用百度AI回答）；

formatRoundNum(num) {
   let positiveNum = Math.abs(num);
   let power = Math.round(Math.log10(positiveNum));
   let coefficient = Math.pow(10, power);
   return Math.sign(num) * coefficient;
   //其实这个就可以实现 向上取整，然后除以10，最后再乘以10
   //return Math.ceil(num / 10) * 10;
},

//地图 echarts初始化
let _this = this
echarts.init(document.getElementById('mapEcharts')).dispose()
this.mapCharts = echarts.init(document.getElementById('mapEcharts'))
echarts.registerMap('ZHONGY', ZY_JSON);
let mapOption = {
  backgroundColor: '#fff',
  toolbox: {
    show: true,
    orient: 'vertical',
    left: 'right',
    top: 'center',
    feature: {
      saveAsImage: {},
      restore: {},
    }
  },
  visualMap: {
    min: 0,
    //这里是
    max: sum<=0?10:_this.formatRoundNum(sum),
    type: 'continuous',
    // splitNumber: 8,
    // text: ['高', '低'],
    realtime: false,
    calculable: true,
    left: '10px',
    top: '10px',
    inRange: {
      // color: ['#99CCFF', '#336699', '#003366']
      color: ['lightskyblue', 'yellow', 'orangered']
    },
    formatter: (e, e2) => {
      // return e + '-' + e2
      return e+' 万'
    },
  },
  geo: {
    name: '阳',
    type: 'map',
    map: 'ZHONGY',
    label: {
      show: true
    },
    center: [111.178697, 37.227195],
    zoom: 4.3,
    //这里使用abc自定义是为了避免鼠标移入地图之后会随着比例尺区块变色
    data: [{name: '阳县', abc: sum ? sum : 0}],
    itemStyle: {
      // 高亮状态下的样式
      emphasis: {
        areaColor: 'rgba(0,0,0,0.1)'
      }
    }
  },
  tooltip: {
    formatter: (e) => {
      if (e.componentSubType == "scatter") {
        return e.name + ":</br>" + _this.mDecimalNum(e.value[2]) + ' 万'
      } else {
        var unit = e.data == undefined ? 0 : e.data.abc
        // var unit = Number.isNaN(e.value) ? 0 : e.value
        return e.name + ':</br>' + _this.mDecimalNum(unit ) + ' 万'
      }
    }
  },
  series: [
  	//可以发现在上面还有个geo，但是这里的不能省，至于为啥...俺也不知  
  	//里面的tooltip也是不能省 反正等copy过来就完事
    {
      name: '阳',
      type: 'map',
      map: 'ZHONGY',
      label: {
        show: true
      },
      //不能省
      tooltip: {
        formatter: (e) => {
          if (e.componentSubType == "scatter") {
            return e.name + ":</br>" + _this.mDecimalNum(e.value[2]) + ' 万'
          } else {
            var unit = e.data == undefined ? 0 : e.data.abc
            // var unit = Number.isNaN(e.value) ? 0 : e.value
            return e.name + ':</br>' + _this.mDecimalNum(unit) + ' 万'
          }
        }
      },
      center: [111.178697, 37.227195],
      zoom: 4.3,
      //这里使用abc自定义是为了避免鼠标移入地图之后会随着比例尺区块变色
      data: [{name: '阳县', abc: sum ? sum : 0}],
      // data: [{name: '阳县', value: sum ? sum : 0}],
      itemStyle: {
        // 高亮状态下的样式
        emphasis: {
          areaColor: 'rgba(0,0,0,0.1)'
        }
      }
    },
    {
      type: 'scatter',
      coordinateSystem: 'geo',

      hoverAnimation: true,
      symbolSize: function (val) {
        // console.log(val, 'symbolSize')
        return 10;
      },
      data: longLatArr ? longLatArr : [{
        name: '阳县洗煤厂',
        value: [111.118653, 37.448450, 60],
        // value:[经，纬度，value],
      }
      ],
    },
  ]
}
console.log(mapOption, 'mapOption')
this.mapCharts.setOption(mapOption)